My goal is to learn more in public, so that it also may help others.

I’ve given ReasonReact a first try. I’ve read a bit of the documentation, took a peek into Exploring ReasonML, and found some useful blog posts.

Let’s try to build a form in Reason React!

This is a simple project, but forms are one of the most common things you’ll need in a web application.

Installation & Setup⌗

Installation via npm or yarn is painless:

$ yarn add -g bs-platform

Create a new project:

$ bsb init reason-form -theme react-hooks

This command bootstraps a new ReasonReact project called “reason-form” with React hooks.

Go to the directory and install the necessary modules:

$ cd reason-form && yarn install

Clean Up Webpack etc.⌗

The default configuration for running the project with npm or yarn is cumbersome. You have to run two scripts in two separate terminals.

I use concurrently to run several scripts in parallel.

$ yarn add --dev concurrently

Modify package.json . Delete the scripts and replace with the following:

"scripts" : { "start" : "concurrently -k \"yarn run start:bsb\" \"yarn run start:webpack\"" , "start:bsb" : "bsb -clean-world -make-world -w" , "start:webpack" : "webpack-dev-server --port 3000" , "build" : "concurrently -k \"yarn run build:webpack\"" , "build:webpack" : "NODE_ENV=production webpack" , "format" : "refmt src/*.re" } ,

Create The First Component⌗

Remove the example components in the src folder.

Delete the content of src/index.html and replace with the following:

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" /> < title >Reason Form</ title > </ head > < body > < div id = "root" ></ div > < script src = "Index.js" ></ script > </ body > </ html >

This adds Bulma and a div with id “root” where we will mount our Reason React app.

The HTML loads JavaScript from Index.js - that’s how it’s configured with webpack. Take a look at webpack.config.js if you want to know more.

Modify scr/Index.re :

ReactDOMRe.renderToElementWithId (< App /> , "root" );

Create the src/App.re file:

[ @ react . component ] let make = () => < div className = "App" > { "Hello World" |> ReasonReact.string } < / div >;

The strange looking syntax is ReasonReact’s way of writing JSX.

The decorator and the make function create a React component. Inside the div you have to tell Reason that you’re dealing with a string.

It sure doesn’t look pretty.

Run ReasonReact⌗

Go to the terminal:

$ yarn run start

Go to http://localhost:3000 and you should see “Hello World”.

Further Reading⌗