JSX

Reason comes with the JSX syntax! ReasonReact transforms it from an agnostic function call into a ReasonReact-specific call through a macro. To take advantage of ReasonReact JSX, put {"reason": {"react-jsx": 2} in your bsconfig.json (schema here).

Note that due to current syntax constraints, you need to put spaces around the JSX children: <div> foo </div>.

Uncapitalized #

<div foo=bar> child1 child2 </div>

transforms into

ReactDOMRe.createElement "div" props::(ReactDOMRe.props foo::bar ()) [|child1, child2|]

which compiles to the JS code React.createElement('div', {foo: bar}, child1, child2).

Prop-less <div /> transforms to ReactDOMRe.createElement "div" [|child1, child2|], which compiles to React.createElement('div', undefined, child1, child2).

Capitalized #

<MyReasonComponent key=a ref=b foo=bar baz=qux> child1 child2 </MyReasonComponent>

transforms to

ReasonReact.element key::a ref::b (MyReasonComponent.make foo::bar baz::qux [|child1, child2|])

Prop-less <MyReasonComponent /> transforms to ReasonReact.element (MyReasonComponent.make [||]).

Note how ref and key have been lifted out of the JSX call into the ReasonReact.element call. ref and key are reserved in ReasonReact, just like in ReactJS. Don't use them as props in your component!