react-isomorphic-lite

This module provides the glue for an isomorphic React.js application. It makes no assumptions about what flavor of Flux you may or may not be using, and does just enough to render your components on the server and then hook them up on the client.

It also allows you to (optionally) use a layout so that you can mount your application at a specific element, rather than having to mount the entire document.

express.js example

Register the view engine with express:

var viewEngine = require("react-isomorphic-lite").expressViewEngine;
var app = require("express");

app.set("view engine", "js");
app.engine("js", viewEngine({ layout: true }));

To render MyApp.js:

app.get("/app, function(req, res) {
    res.render("MyApp", { 
        // Can contain anything you want to pass to the App; will be serialized to the client
        appState: { message: "Hello world" } 
        // At a minimum, this should contain the script with React and MyApp.js
        scripts: [
            "/MyApp-bundle.js"
        ]
    });
});

MyApp should extend from the base App and use the built-in export() method:

var App = require("react-isomorphic-lite/App");
var React = require("react");

class MyApp extends App {

    createElement(context) {
        return React.createElement("h1", null, context.appState.);        
    }

    client(context) {
        return this.createElement(context);
    }

    server(context) {
        return this.createElement(context);
    };

};

module.exports = (new MyApp()).export();

Bundling static files

You will need to make sure that MyApp-bundle.js is being served to the client. If you use webpack, this as easy as adding an entry for MyApp.js.