Mastodon hachyterm.io

Learning ReasonReact Step by Step Part: 0

UPDATE: ReasonML + BuckleScript is now Rescript. As the ecosystem has changed around those tools, this blog post is not accurate anymore. My …

Last modified:

UPDATE:
ReasonML + BuckleScript is now Rescript.
As the ecosystem has changed around those tools, this blog post is not accurate anymore.

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