Learning ReasonReact Step by Step Part: 0

09/12/2019 — 1 Min Read — In Reason, React.js

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".

Learning ReasonReact Step by Step Part: 0

Installation & Setup

Clean Up Webpack etc.

Create The First Component

Run ReasonReact

Further Reading