ReactRender

Renders React as HTML

Installation

If available in Hex, the package can be installed by adding react_server_render to your list of dependencies in mix.exs:

def deps do
  [
    {:react_render, "~> 1.0.0"}
  ]
end

Documentation

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/react_server_render.

Getting Started with Phoenix

• Add react_render to your package.json

"react_render": "file:../deps/react_render"

• Run npm install

npm install

• Create a file named server.js in your assets/js folder and add the following

const ReactRender = require('react_render/priv/server')

ReactRender.startServer()

• Add ReactRender to your Supervisor as a child.

  render_service_path = "assets/js/server.js"

  worker(ReactRender, [render_service_path])

• Call ReactRender.render/2

  component_path = "./HelloWorld.js"
  props = %{name: "Revelry"}

  ReactRender.render(component_path, props)

component_path can either be an absolute path or one relative to the render service. The stipulation is that components must be in the same path or a sub directory of the render service. This is so that the babel compiler will be able to compile it. The service will make sure that any changes you make are picked up. It does this by removing the component_path from node's require cache. If do not want this to happen, make sure to add NODE_ENV to your environment variables with the value production.

• To hydrate server-created components in the client, add the following to your app.js

import {hydrateClient} from 'react_render/priv/client'

function getComponentFromStringName(stringName) {
  // Map string component names to your react components here
  if (stringName === 'HelloWorld') {
    return HelloWorld
  }

  return null
}

hydrateClient(getComponentFromStringName)