DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sophia Brandt
Sophia Brandt

Posted on • Updated on • Originally published at rockyourcode.com

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 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
Enter fullscreen mode Exit fullscreen mode

Create a new project:

$ bsb init reason-form -theme react-hooks
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

Create the src/App.re file:

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

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
Enter fullscreen mode Exit fullscreen mode

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

Further Reading

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›