Tutorial: Build a Todo App with ReasonReact

Part 1—Future of React? ReasonReact!

In this post, we’re going to explore ReasonReact— a new-ish tool from Facebook for building React applications. We’ll cover the basics of what ReactReason is, and in a future post, build a basic to-do app using it.

What is Reason?

Reason isn’t a new language, but rather a new syntax and toolchain powered by OCaml that’s intended for JavaScript developers. Reason eliminates the need to write traditional OCaml, but still provides all the benefits of the language.

OCaml can be compiled into bytecode, native code, and JavaScript. To compile to JavaScript, we’ll need to use BuckleScript. With BuckleScript in place, we can use yarn or npm with any ReasonReact project.

Here’s a diagram to better illustrate the flow from Reason/OCaml to JavaScript:

ReasonML to JavaScript diagram.

Why Use Reason?

Since Reason is based on OCaml, it leverages all of the advantages of OCaml.
For example, Reason is a statically typed with full support for object orientation and mutable support.

When we use Reason, our code ends up looking a lot like the JavaScript code that we’re used to. However, based on my own experience, when you use Reason you can eliminate ESLint from your project because of its type system.

Code can be compiled quickly and efficiently from Reason, and Reason team is working hard to improve error message.

Ultimately, the best way to appreciate the advantages of Reason is to give it a try, so let’s get set up to do that!

Reason + React = ReasonReact

Using Reason with your React project is easy thanks to the ReasonReact library. It has all the great features of Reason and also provides us with a way to build the React apps that we’re used to, but with an API that is safe, clean, and statically-typed.

Can’t wait to see what this looks like? Try ReasonReact in a browser here.

To use ReasonReact to build a real app, you’ll need to start by installing BuckleScript’s bsb build system:

npm install -g bs-platform

Once that’s installed, there are two ways to create a ReasonReact app.

The first option is a lighter-weight approach, that compiles your Reason code to straightforward JS files, so you can actually open index.html directly from the file system if you wanted to:

$ bsb -init <app-name> -theme react
$ cd <app-name> && npm install && npm start
# in another tab
$ npm run webpack

The second option is to use Reason Script with Create React App:

$ npx create-react-app <app-name> --scripts-version reason-scripts
$ cd <app-name>
$ npm start

Once you’ve scaffolded your app, you’re ready to give ReasonReact a try. Here’s an example of you would create a stateless component using ReasonReact:

let component = ReasonReact.statelessComponent(“App”);
let make = (~message, _children) => {
 …component,
 render: _self =>
 <div className=”App”>
     <img src=logo className=”App-logo” alt=”logo” />
     <h2> (ReasonReact.string(message)) </h2>
 </div>,
};

If you’re still not convinced and would like to learn more about the Reason Project, check out this talk by Cheng Lou at React Conf 2017:

In the next post, we’ll roll up our sleeves and dive into ReasonReact to create the following to-do app:

ReasonReact Todo App

Great. We’ll finish the todo app in Part 2 here!

If you liked this post and want to keep learning about web and app development with RED Academy, be sure to follow us on Medium or check out our website.