Beyond JSX

Note: This section requires knowledge about the low level apis for creating elements, such as React.createElement or ReactDOMRe.createDOMElementVariadic.

Note: This page assumes your bsconfig.json to be set to "reason": { "react-jsx": 3 } to apply the right JSX transformations.

Component Types

A plain React component is defined as a ('props) => React.element function. You can also express a component more efficiently with our shorthand type React.component<'props>.

Here are some examples on how to define your own component types (often useful when interoping with existing JS code, or passing around components):

RES
// Plain function type
type friendComp =
  ({"name": string, "online": bool}) => React.element;

// Equivalent to
// ({"padding": string, "children": React.element}) => React.element
type containerComp =
  React.component<{
    "padding": string,
    "children": React.element
  }>;

The types above are pretty low level (basically the JS representation of a React component), but since ReScript React has its own ways of defining React components in a more language specific way, let's have a closer look on the anatomy of such a construct.

JSX Component Interface

A ReScript React component needs to be a (sub-)module with a make and makeProps function to be usable in JSX. To make things easier, we provide a @react.component decorator to create those functions for you:

module Friend = {
  @react.component
  let make = (~name: string, ~children) => {
    <div>
      {React.string(name)}
      children
    </div>
  }
}

In the expanded output:

• makeProps: A function that receives multiple labeled arguments (according to prop names) and returns the value that is consumed by make(props)

• make: A converted make function that complies to the component interface (props) => React.element

Note: The makeProps function will also always contain a ~key prop.

Special Case React.forwardRef

The @react.component decorator also works for React.forwardRef calls:

module FancyInput = {
  @react.component
  let make = React.forwardRef((~className=?, ~children, ref_) =>
    <div>
      // use ref_ here
    </div>
  )
}

As shown in the expanded output above, our decorator desugars the function passed to React.forwardRef in the same manner as a typical component make function. It also creates a makeProps function with a ref prop, so we can use it in our JSX call (<FancyInput ref=.../>).

So now that we know how the ReScript React component transformation works, let's have a look on how ReScript transforms our JSX constructs.

JSX Under the Hood

Whenever we are using JSX with a custom component ("capitalized JSX"), we are actually using React.createElement to create a new element. Here is an example of a React component without children:

<Friend name="Fred" age=1 />

As you can see, it uses Friend.make and Friend.makeProps to call the React.createElement API. In case you are providing children, it will use React.createElementVariadic instead (which is just a different binding for React.createElement):

<Container width=200>
  {React.string("Hello")}
  {React.string("World")}
</Container>

Note that the ~children=React.null prop has no relevance since React will only care about the children array passed as a third argument.

Dom Elements

"Uncapitalized JSX" expressions are treated as DOM elements and will be converted to ReactDOMRe.createDOMElementVariadic calls:

<div title="test"/>

The same goes for uncapitalized JSX with children:

<div title="test">
  <span/>
</div>