Learning ReasonReact Step by Step Part: 0
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”.