ReasonML Quick Start Guide

JSX

Reason comes with the JSX syntax. One difference in ReasonReact's version of JSX is that we cannot do the following in ReasonReact:

<div>"hello world"</div>

Instead, we need to convert the string to a ReasonReact.reactElement with the ReasonReact.string function:

<div>ReasonReact.string("hello world")</div>

However, this still doesn't work. We need to also wrap the expression with { } to help the parser differentiate between multiple possible children:

<div> {ReasonReact.string("hello world")} </div>

You're free to create an alias that is less verbose and use that instead:

let str = ReasonReact.string;<div> {str("hello world")} </div>;

When a custom component is invoked in JSX, its make function is called. The <App /> syntax desugars ...