A List of Simple Examples

A Basic Greeting Component

Some things to note:

Reason's return statements are implicit so you don't need to write return. It'll always be the last item in the block
Reason has labelled parameters (arguments) that are prefixed by a tilde, eg: ~message
Since everything in ReasonReact is typed, we need to wrap our message in React.string(message)

/* Greeting.re */

[@react.component]
let make = (~message) => <h1> {React.string(message)} </h1>;

Usage in another file. Looks very similar to JSX in Javascript!

/* ... */

<div>
  <Greeting message="Hello World!">
</div>

/* ... */

A Component with Optional Arguments and React.Fragment

[@react.component]
let make = (~title, ~description=?) =>
  <>
    /* React.Fragment works the same way as in React.js! */
    <h1> title </h1>
    /* Handling optional variables where you don't want to render anything */
    {
      switch (description) {
      | Some(description) => <span> {React.string(description)} </span>
      /* Since everything is typed, React.null is required */
      | None => React.null
      }
    }
  </>;

A Form Component with React.js Differences

[@react.component]
let make = () => {
  /* unused variables are prefixed with an underscore */
  let onSubmit = _event => Js.log("Hello this is a log!");

  /* onSubmit=onSubmit turns to just onSubmit */
  <form onSubmit>
    <input
      /* class names work the same way */
      className="w-full"
      /* type_ is underscored b/c its a reserved word in Reason */
      type_="text"
      /* No braces {} needed! */
      autoFocus=true
      placeholder="Game Code"
    />
    <button type_="submit"> {React.string("Button label")} </button>
  </form>;
};

A Component that Renders a List of Items

This component uses Belt, from melange.

/* We define the type of the item (this is a record) */
type item = {
  id: string,
  text: string,
};

[@react.component]
let make = (~items) =>
  <ul>
    {
      items
      ->Belt.Array.map(item =>
          <li key={item.id}> {React.string(item.text)} </li>
        )
      /* Since everything is typed, the arrays need to be, too! */
      ->React.array
    }
  </ul>;