package server-reason-react

  1. Overview
  2. Docs
Rendering React components on the server natively

Install

Dune Dependency

Authors

Maintainers

Sources

server-reason-react-0.1.0.tbz
sha256=557e215377660a5c48c0494704d3d149ff249d4a5669f1749b393176b963ea05
sha512=cc3dd53dd21d2564ad031ca74552587f4a8200833ec80392fd190a55d7a7f83bec0fc57d2ec0e262c0c3ef2e78a89914872ea1588921c3cb8836e8e5f67b4cef

doc/intro.html

Introduction

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 dune.

Let's start with a component.

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

This component is both a reason-react component and a server-reason-react component, since the interface is the same.

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)

Note: server-reason-react.ppx needs to be a different ppx than reason-react-ppx since needs to transform props into an interal representation where the type is known ahead of time in order to render them on the server efficiently.

The main difference is how it's going to render with ReactDOM:

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

This is usually part of your server code

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

Install

Since it's not in opam yet, you need to pin it to the main branch.

  opam pin server-reason-react.dev "https://github.com/ml-in-barcelona/server-reason-react.git#main" -y

Usage

Add server-reason-react.react and server-reason-react.reactDom to your dune file:

 (libraries (server-reason-react.react server-reason-react.reactDom) 

and also server-reason-react.ppx to your preprocess list

 (preprocess (pps server-reason-react.ppx)) 

Next

  1. How universal code works
  2. How to structure the code
OCaml

Innovation. Community. Security.