Learning ReasonReact Step by Step Part: 1
Tags: reason, react, learning, tutorial
Published: 2019-09-13 12:21:40

---
title: Learning ReasonReact Step by Step Part: 1
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-1
---

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

---

Let's continue from [yesterday's post](https://dev.to/sophiabrandt/learning-reasonreact-step-by-step-part-0-48la) and build the skeleton for our application: a simple form with ReasonReact and hooks.

Go to the `src` folder.

The main `App.re` file should just render a `Form` component:

```reasonml
[@react.component]
let make = () => <Form />;
```

The syntax looks unfamiliar. What is `[@react.component]`?

It is a decorator attribute and tells ReasonReact that you're writing a React component. Duh!

The latest ReasonReact version uses React hooks under the hood.

Your app will throw an error because we don't have a `Form` component yet (`src/Form.re`):

```reasonml
// create an alias for ReasonReact. String,
// so that we don't have to type out the full function every time
let str = ReasonReact.string;

[@react.component]
let make = () =>
  <div className="section is-fullheight">
    <div className="container">
      <div className="column is-4 is-offset-4">
        <div className="box">
          <form>
            <div className="field">
              <label className="label"> {"Email Address" |> str} </label>
              <div className="control">
                <input
                  className="input"
                  type_="email"
                  name="email"
                  required=true
                />
              </div>
            </div>
            <div className="field">
              <label className="label"> {"Password" |> str} </label>
              <div className="control">
                <input
                  className="input"
                  type_="password"
                  name="password"
                  required=true
                />
              </div>
            </div>
            <button
              type_="submit" className="button is-block is-info is-fullwidth">
              {"Login" |> str}
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>;
```

As you can see, in Reason (and Ocaml) the filename serves as the namespace for the module/component.

Here we set up a HTML form with [Bulma][bulma] classes for styling. Like in React, we have to replace `class` with `className`.  
`type` is a reserved keyword, so you have to use `type_`.  
You also have to spell out that the input field is required by writing `required=true`. With React, you could omit the `=true` assignment. In ReasonReact, you have to be explicit.

### Further Reading

- [ReasonReact][reasonreact]
- [ReasonReact Invalid Prop Name](https://reasonml.github.io/reason-react/docs/en/invalid-prop-name)
- [Using Custom React Hooks to Simplify Forms][upmostly] by James King

[reasonreact]: https://reasonml.github.io/reason-react/en/
[bulma]: https://bulma.io/
[upmostly]: https://upmostly.com/tutorials/using-custom-react-hooks-simplify-forms