Get started with ReasonReact [Part 1]

You might, Why the hell we need another type-safe and fast "language", "tool", and "etc" (You name it) Since typescript already playing a big role in the React community. Well that's was my concern as well, I also came from Typescript + React world. But in reality, ReasonML is not only about the type-safe (The biggest selling point), there are more than that ex: immutability, pattern matching, data structures.

What is ReasonML?

ReasonML is a language powered by Ocaml ( or alternative syntax for OCaml). All you can archive with Reason can be done with Ocaml. Also, JSX is part of the ReasonML (ReasonReact) it supports ReactJS and NodeJS out of the box and you can compile ReasonML into native or Javascript using BuckleScript (Still it's compiled into a readable code). IMO this brings us all the goodness of functional programming.

Read more about ReasonML https://reasonml.github.io/docs/en/what-and-why

Let's get started with ReasonReact

One of the key players is BuckelScript (Now this has been rebranded as ReScript), this will compile all ReasonML into Js. First, we have to install BuckelScript globally.

npm install --global bs-platform

The fastest way to get started is by using a theme of BuckelScript build system (bsb). First, we have to init the project with a theme of your choice.

bsb -init my-app -theme react-starter

You can list available themes with following command.

bsb -themes

For this example, we are using it as the theme. This will generate a ReasonReact minimal project with state and hook.

You can build and run the project with the following commands. Also, this theme Webpack support out of the box.

yarn start &  yarn server

Try yourself and see how all of this works. Specially pay attention on how everything has wired up. In next lessons will deep dive into Functional Programming,  ReasonML and BuckelScript (ReScript) and how ReasonML help you to develop with confident.

Sanath Samarasinghe

Sanath Samarasinghe