Getting started with server-reason-react

This documentation will explain the different modules available in server-reason-react, and how to use them, however it is assumed a minimum understanding of Reason, reason-react, Melange and a bit of dune.

Let's start with a React component written in Reason:

module Greetings = {
  [@react.component]
  let make = (~name) => {
    <div>
      <h1> {React.string("Hello " ++ name)} </h1>
    </div>
  }
};

A module with a make function that returns a React.element. This component is both a reason-react component and a server-reason-react component.

server-reason-react provides React and ReactDOM modules with the same interface as reason-react, including the JSX transformation via server-reason-react.ppx.

• React (server-reason-react.react)
• ReactDOM (server-reason-react.reactDom)

The main difference is, with server-reason-react you can render it on the server with ReactDOM (server-reason-react.reactDom):

let html = ReactDOM.renderToStaticMarkup(<Greetings name="visitor" />)
// <div><h1>Hello visitor</h1></div>

_{This is usually part of your server-side code}

The ReactDOM module exposes the renderTo* methods: ReactDOM.renderToStaticMarkup, ReactDOM.renderToString and ReactDOM.renderToLwtStream.