Taking a Look at ReasonML And ReasonReact

09/03/20191 Min Read — In Reason, React.js

Last weekend I took a peek at Reason, a JavaScript-like-syntax for OCaml.
Ocaml is a multi-paradigm language from 1996 which also supports a functional programming approach. It is also typed and compiled.

Reason is an alternative syntax and toolchain for OCaml with better JavaScript interop and convenience features (via BuckleScript, the compiler).

Reason also has pattern-matching. When I first learned Elixir, I was blown away by the power of pattern-matching. I'm happy to see that Reason offers it, too.

For me, the selling point is the interop with React via ReasonReact.

Here is the canonical counter example from the official docs:

type action =
| Tick;
type state = {
count: int,
};
[@react.component]
let make = () => {
let (state, dispatch) = React.useReducer(
(state, action) =>
switch (action) {
| Tick => {count: state.count + 1}
},
{count: 0}
);
React.useEffect0(() => {
let timerId = Js.Global.setInterval(() => dispatch(Tick), 1000);
Some(() => Js.Global.clearInterval(timerId))
});
<div>{ReasonReact.string(string_of_int(state.count))}</div>;
};

React.js was initially developed with an ML-language (not OCaml though).
ReasonReact offers an alternative way to write React apps with first-class JavaScript support. Additionally, Reason provides type-safety and is supposedly faster than TypeScript.

Reason feels similar to Elixir in many ways. Many concepts I learned in Elixir (and Clojure/Racket) apply to Reason.

The main hurdle for me are the types, as I'm more accustomed to loosely typed languages.