Building a Todo Application using ReasonML and React
What Will I Learn?
- You will learn how to write records and immutable variables using ReasonML
- You will learn how to build reducer and stateless components in a React ReasonML project
- You will learn how to write and read basic ReasonML code
- You will learn about the development pipeline for client side ReasonML projects
Requirements
- The latest versions of Yarn and/or Node Package Manager
- Visual Studio Code or any ReasonML Compatible text editor (Information can be found here)
- A fair understanding of JavaScript development and dependencies
Difficulty
- Intermediate
Description
In this video tutorial, we write a simple ReasonML Todo Application. This application lets us showcase the basic syntax of the ReasonML/BuckleScript programming Language as well as the basic layout of a React ReasonML project. Todo Applications are fairly good examples to use for learning new technologies because they require that the user learns how to deal with Input and Output as well as the mutation of records and the use of various types classes.
In this example, we build out our Data Model using a bunch of records. We then build out our Action Model using the ReasonML Algebraic Data Types (Union Types). Specifically, we add functionality to Add, Modify and Delete Todos from our application. We then build out the front-end of our application making use of the Reason-React library. This includes writing Reducers and JSX like syntax for our Shadow DOM elements which allows us to bind our actions and model to the user interface.
We build three different components in this project. The input box that is used to input a new Todo into the Todo list, the base app component which is used to embed the other two components and the Todo List component which defines how our Todos should be displayed on the screen. On our Todo List component we also add a button to allow the user to remove Todos and we add a check box to allow the user to alter the Todo's status.
The source code for this project can be found here
Learn more about installing ReasonML here
Video Tutorial
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you for moderating my content.
you always have the best content tensor keep it up!
ReasonML just realease and you had a tutorial? That was fast haha
ReasonML has been out for a while. In fact, I believe this is the 3rd syntax iteration (It used to basically be Ocaml syntax).
Oo okay. Because i just came across ReasonML few weeks ago, i thought is the new project of Facebook.
Its definitely relatively new... About a year or two at most so you aren't wrong there. I'm not entirely sure how long Buckle-script has been a thing (the precursor to Reason).