til / ReScript: Creating a React component

One great part of the ReScript ecosystem is the bindings to React. These bindings live in a project called rescript-react. This is an introductory post on how to create a React component.

// Button.res
@react.component
let make = (~onClick) => {
  <button onClick>{React.string("Click me")}</button>
}

Let’s step through the code line-by-line and see what’s happening.

@react.component is a decorator that tells rescript-react that you’re writing a component and it creates some code behind the scenes to get the props setup correctly.

let make = (~onClick) => { defines the start of our component function. The name of the function needs to be make for everything to work correctly. make is also a convention for the “main” function of a module and every file in ReScript is a module. onClick is a named argument – it can be compared to props defined as ... = ({ onClick }) => in JavaScript React – and in this case, it is our only prop to this component.

<button onClick> is the start of our JSX and it works just like regular React. The difference is in the onClick prop we send to the button. In React we would need to do onClick={onClick}, but rescript-react JSX has punning. This works like objects in JavaScript that allows you to do return { onClick } instead of return { onClick: onClick }.

The type of onClick is inferred by its usage as ReactEvent.Mouse.t => unit so we don’t need to define the type of the prop ourselves. The type also indicates that the prop is required.

To display a text inside the button, we use React.string("Click me"). ReScript needs every JSX child to have the same type, React.element. React.string converts the regular "Click me" string to a React.element. rescript-react has helper methods for converting most primitive values like int, float, string, and array to React elements.

This is the resulting generated (ES6) code:

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from 'react'

function Test(Props) {
  var onClick = Props.onClick
  return React.createElement(
    'button',
    {
      onClick: onClick,
    },
    'Click me'
  )
}

var make = Test

export { make }
/* react Not a pure module */