Learning ReasonReact Step by Step Part: 0
Tags: reason, react, learning, tutorial
Published: 2019-09-13 12:17:22

---
title: Learning ReasonReact Step by Step Part: 0
published: true
description: Learning how ReasonReact works from a beginner's perspective
tags: reasonml, react, learning, tutorial
series: Learning ReasonReact Step by Step
canonical_url: https://www.rockyourcode.com/learning-reason-react-step-by-step-part-0
---

**UPDATE**:  
ReasonML + BuckleScript is now [Rescript](https://rescript-lang.org/blog/bucklescript-is-rebranding).  
As the ecosystem has changed around those tools, this blog post is not accurate anymore.

---

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

I've given **[ReasonReact][reasonreact]** a first try. I've read a bit of the documentation, took a peek into [Exploring ReasonML][exploringreasonml], and found some [useful][jaredforsythe] [blog][seif] [posts][jamesfriend].

**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][installation]:

```sh
$ yarn add -g bs-platform
```

Create a new project:

```sh
$ 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:

```sh
$ 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][concurrently] to run several scripts in parallel.

```sh
$ yarn add --dev concurrently
```

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

```json
  "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:

```html
<!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][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`:

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

Create the `src/App.re` file:

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

The strange looking syntax is [ReasonReact's way of writing JSX][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:

```sh
$ yarn run start
```

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

### Further Reading

- [ReasonReact][reasonreact]

[publiclearning]: https://www.swyx.io/writing/learn-in-public
[jamesfriend]: https://jamesfriend.com.au/a-first-reason-react-app-for-js-developers
[jaredforsythe]: https://jaredforsyth.com/posts/a-reason-react-tutorial/
[seif]: https://dev.to/seif_ghezala/reasonml-for-production-react-apps-part-1-3nfk
[reasonreact]: https://reasonml.github.io/reason-react/en/
[exploringreasonml]: http://reasonmlhub.com/exploring-reasonml/
[installation]: https://reasonml.github.io/docs/en/installation
[bulma]: https://bulma.io/
[jsx]: https://reasonml.github.io/reason-react/docs/en/jsx
[concurrently]: https://www.npmjs.com/package/concurrently