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

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 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: 1

UPDATE:

ReasonML + BuckleScript is now Rescript.

As the ecosystem has changed around those tools, this blog post is not accurate anymore.


Let's continue from yesterday's post 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:

[@react.component]
let make = () => <Form />;
Enter fullscreen mode Exit fullscreen mode

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):

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

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.