Building a Todo Application with ReasonML

Key Takeaways

hi guys my name is tensor welcome to my reason to do app tutorial today we're going to be using reason ml to build a to do application alright so before we get started with this to do application just want to mention a few things you can install reason by using yarn or NPM or you can install it by installing the O camel compiler and then the open package manager in both cases it's a little bit more difficult than you'd expect to get things running on Windows because the support for Windows is not fully there yet however you can sort of bypass this by using the Linux subsystem for Windows which is what I will be using in this particular tutorial also in this tutorial I will be using the reason script create react app yarn bootstrapper to bootstrap our application anyway like always I'll put all the information that you guys will need to get started with the reason into the description box if you are interested all right so to build our application I run yarn create react app to do dash test scripts test version reason scripts and this will build out an application called to do with various pieces of Reason boilerplate once the application has been built you can CD into the folder of the application and you can run yarn start and this will start the development server for you our development server will be naturally on localhost 3000 and you can see here is the actual bootstrapped react to Reason application now let's take a look at the files and the directory so we have a package JSON file this has all of the dependencies that we need we have react react Dom and recent scripts and then we have our dev dependencies we also have this bs config JSON file in here we actually explicitly define the BS dependencies that we're going to be using inside of our Baco script slash reason application specifically we need to say ok where we want to use a reason react and BS just now in this tutorial we won't be covering test-driven development so we won't be actually using BS just but this is in there by default so then we have a bunch of folders here we have a public folder and this has our favicon our index.html and then a the facade Jason file and then we've got a source folder where we have an app underscore test re file which is our test file for our reason application then we have app dot re which is the main component for this particular application you can see that a lot of these syntax is very reminiscent of react Java Script we also have indexed re which I would kind of say is the entry point for this particular application we're rendering the element app with the message of welcome to react and reason and we're rendering it to the route ID in our index dot HTML you can see here that our route ID is this div element the application here you'll see that we have this development and its surrounding the entire application that's being rendered and that's basically how this application works we're essentially going to leave index dot re alone for the most part all we're really going to do is remove this message part because we don't really need it so let's jump into the app file and let's remove all of this boilerplate and while we're at it I'm going to also delete the app dot CSS file now if we wanted to add more CSS to our application we could do so by adding it into our index dot CSS file and I'll go through how this works when we get to the end of our application the first thing I like to do when building any application is define the data so first we define a type called to do to do is a record we have an ID of int we have a text of string and we have a completed which is a boolean each to do will have its own ID and of course the actual to do itself will be the string part and then it will also have a completed value which will change based on whether or not a checkbox is checked or not now let's define the state of the application the state of our application is just a list of our to do type we can also create algebraic or Union types in reason and we want to do this to define all the actions that can be done in our application this type has an ad type which has a string associated with it it has a checked type which has an int and a delete type which also has an int our ad type is for when a user adds a to-do to our application our check type is for when a user checks the box of each to do and our delete type is for when a user wants to delete it to do from the list so like with rust we can alias functions by simply saying let and then creating a variable in this case I'm creating two string so when I call the two string function anywhere else inside of our application it will be a stand-in for this line of code also because all variables inside of reason are immutable we need to use what is called a reference to create a mutable value so I'm creating a value called to do ID and I'm setting the initial value at zero so this reference is a mutable integer type so our new to do function will take in text and then we'll take our to-do ID reference and we'll increment it by one we're using this colon equals to allow us to reassign the to do ID by adding it to one and we need to use this caret here to basically signify to the compiler that it is a reference so we're taking the reference we're adding 1 to it and then we're putting it back into to do ID and then we're taking ID and we're assigning it to do new ID with the caret and then we're saying completed equals false by default and then we're taking text and we're assigning it to our text field the next thing that we want to do is create a function that will be assigned to our action check so this function takes in our ID so the ID that we want to check and then our list of two do's and then we call a list map and the way that lists map works is that we take a function and then we apply it to a list so our function takes in a t where t ID is equivalent to ID and if this is true take the completed part of our record and we invert the boolean otherwise we just return t as it was and of course we need to pass in the list that we are editing so we put in to dues here so what we're essentially doing here especially with this triple dot notation which is called the spread operator it's rather than reassigning the completed part of our we're actually creating an entire new element and replacing the old element by referencing the old element now we're going to create a function that will correspond with our action delete and so our delete function takes in ID and our list of two dues and then we call list dot filter instead of list map the way filter works is it takes in a function that returns a boolean what it will do is it will filter all of the elements where that boolean is true and then keep them in the list so in other words say we have an element with a a ID of three and we want to delete that idea three we pass in three and then every other element that doesn't have the idea of three will stay in our list we now need to create a function called value from event and this will allow us to take a keyboard event or a mouse event and get a string from it pipe e into react event read formed target and then we pipe in the result of that into react Dom read Dom event to object and then we get the value out of this and this will give us back a string representation of the event okay so now we have the basic logic of our application all set up now let's create the component for our main component we're going to use what's called a reducer component so we say let component equal reason react dot reducer component app and then we want to create a function to actually build this component to extend the component we use the spread operator it allows us to essentially take the base reducer component and then add functionality to it we're taking a version of this component and then creating a new one based off of that version first we'll define the initial state with an anonymous function it takes in nothing and we'll just set to do 's equal to an empty list then we want to set up what's called the reducer and the reducer allows us to define the logic for our actions and for updating our data we were passing in the action and then we're passing in our list of to do's and we want to switch on each the actions that we have for ad we want to call reason react dot update and we're updating our list of to do's by calling the new to do function with text in it and we're extending our current to-do list with this every single time we add an element we take the old list and we append a new element to this new list and again we're using the spread operator to sort of do that for check and for delete we're going to be doing similar things and for check we just call our check function and for delete we just call our delete function all right so now let's create our renderer and for those of you who have ever worked with react you'll be very familiar with this because we're essentially writing JSX inside of our reason for our render component just for now we're just going to create a div called app and inside of it will have an h3 and we're going to call that two string function that we aliens before and pass in a string called to-do app and then we're just going to close the h3 in the div and our application will actually compile so I left on the developer server and you can see that we've got this title here that just says to-do app so this is all fine and dandy but all of our logic doesn't work because we don't have an input box we have no buttons we don't have a list with reason when you want to create multiple components you typically create multiple files in this case however I'm just going to define the multiple components in the same file so I'll create a new module called input and inside of this module we need to define the state and we want to define the component that we want to extend so our state will just be a type string the only state for this input is just the text that's actually in the input box when the user is typing it in and then our component will be a reducer component that will just be called input with a capital I now like with our other component we want to create a make function to extend the base reducer component rather than just taking in children like with this one we're going to be taking in a on submit function and then our children and then for our initial state we want to give it an empty string for our reducer we pass in our new to-do function and then we call reason react not update with our new to-do function all right so now let's create our render function we pass in the state which in this case is just our string and we're just going to call this to do and then we pass in our reducer which we're just going to call reduce and we want to then create an input element with a class name of input the value that we want to bind it to is the to do value the type for this input will be type text and then we'll have a placeholder that will say what do you want to do then to complete this input element we want to add an on change listener this will call reduce and it will have the event which will be e and it will call the value from event function that we created above which gives us the string from the event when we get a value from the event that is type enter we want to submit the to do and we do this with our on key down listener but in E which is our event and if react event three keyboard key E is equivalent to enter then we want to call on submit with two doing it and then we want to call reduce with an anonymous function that resets our state and you'll notice here that we have this set of parentheses on the outside that's because we want to execute this entire anonymous function as it's called inside of this line all right so that's all we really need to do for our input element now we can add it to our main element we want to just put it underneath of our H 3 so we create like an HTML element and this needs to have an on submit we call reduce we put in our to do and then we call our add type which will then execute this piece of logic which will allow us to update the list and make sure to put an equal sign in here that's actually a common mistake that I make all the time here's our application we have our title and then we have our input immediately after it we can type something into our input and if we hit the enter key you'll see that it just disappears for our to-do list I'm just going to create a new module called to-do item and this particular module doesn't need to define a state because we're using a Conant called a stateless component our component doesn't actually have the data coupled to it so we just define our component and in this case we're calling it to-do item with capital T and I and for our make function we want to pass in our to do on toggle and then a function call click delete and then of course we're passing in our children we want to extend the component and then we're going to render it and we pass in self on toggle will be when somebody clicks on this element and then click delete will be a function that gets run when the element is clicked to be deleted so first we'll create a div to wrap this component in and then we'll give it a non click with the event that executes the on toggle function then we'll have an input which will be our checkbox then we also want to bind this input to our to-do completed we need to convert the reason boolean into a JavaScript boolean and we put this in for a property called checked this means that the checkbox will be bound to the value of this boolean now to finish off this element we need to create a label element and this label element will have our to-do text converted into an element so we call our two string function and then we create another input and this is type 'button and then we want to give this a class name of button delete we'll give it a value as in like the actual text on the button will be an X and then we'll have an onclicklistener when it's clicked it'll automatically run the click delete function that's all we need to do for our to-do item now let's come down here and actually implement it into our main application to implement this we're going to make use of our list map function we're going to map our to-do list onto the elements that we just created each of the two dues inside of our today's list will have their own to-do item for so first we create a div to wrap around it with a class name of to-do list and then we open a set of parentheses like this to create our anonymous function and we put our list dot map function inside of it and then the function that we're mapping to our list will take a to-do item and then pass it into our to do item element will bind the key property to a string of int so we're converting our integer to a string and we're taking that from our to do ID we are binding our to do as the value for this item and then for our on toggle we're calling reduce and then we are calling the check function with to do ie D in it and then click delete will be reduced with the delete and the to do ID inside of that the list that we're calling this function on is our to do list now this will just output a list it won't actually output an element so we need to do a few more things to make it output some elements so what we can do is we can take the list that we're getting and we can convert it into an array and then we can convert the array back into elements so like with the function that we have that string to element we have a function called array to element and it takes an array from Buckle script and then converts it into a bunch of elements let's take a look at our application so now we can put in elements and you can see that now we have this list if we click anywhere on the div it will check the box so I can click even all the way out here and it will check the box and we can then click the X to delete a element so this is a fully working to do application we could style it up a bit by adding to our index dot CSS and the way this works is inside of our index dot re file we're using this BS raw declaration to require the index dot CSS file so here I just put in a little bit of styling now we've got this sort of box shadow around it our items are a little bit better spaced out the input is a little bit wider we could also add a few more elements to this to do application for instance we can make it so that we could filter through to dues that have been marked as completed or we could add a small little footer that allows us to see how many to dues are in the list anyway guys I hope you enjoyed this tutorial I know this was a fairly basic application and I know you guys are probably getting sick working at to do applications if you did enjoy this tutorial feel free to like and subscribe if you have any questions or comments feel free to leave them in the box below and if you just liked it then by all means download it as much as you like have a good day