Getting Started With Isomorphic React JS With Express

• Isomorphic JavaScript are the code which can be run in both server and client side.
• To achieve a shared JavaScript code between server and client we need to use NodeJS for writing server side code and then we can use Browserify like tool to create a version of code that can be used in client/browser environment.
• In this demo, “We will learn to use ReactJS in server side”.
• The NPM modules that are required for this are react and express.These packages needs to be install in the machine.
• ReactJS NPM module can be installed using command npm –save install react.The following screenshot shows the terminal with react installation using npm.

• The express NPM module provides web server for catering web pages to the user.Express server can be installed using npm install express –save command.The following command shows the terminal with express module installation.

• To demonstrate the isomorphic ReactJS we have created a2 new files like HelloComponent.js and server.js.The following screenshot shows the file structure.

• The package.json is created and has entry to all dependencies.The following code shows the content of package.json file.

{
  "name": "ReactIsomorphicDemo",
  "version": "0.0.0",
  "description": "Isomorphic ReactJS With Express Demo Part1",
  "main": "HelloComponent.js",
  "dependencies": {
    "react": "^0.13.2"
  },
  "devDependencies": {},
  "scripts": {
    "start": "node server.js"
  },
  "author": "Sandeep",
  "license": "ISC"
}

• The HelloComponent.js file contains the code for a ReactJS component named HelloComponent and then it is exported using CommonJS module export system.The following code shows the content of HelloComponent.js.

var React = require("react")
var HelloComponent = React.createClass({
    render:function(){
        return React.createElement('h1', null, 'Hello Sandeep');
    }
});
module.exports = HelloComponent;

• The server.js file contains the code for express based web server.It uses a method name createFactory() which returns a React element based on the input type parameter.It uses renderToString() method to generate HTML markup string that can be send to the client for the display.The following code shows the content of server.js file.

var React = require("react"),
    myComponent =require("./HelloComponent"),
    express = require("express"),
    ReactComponent = React.createFactory(myComponent),
    expressApp = express();

expressApp.get('', function(req, res){
    var reactComponentMarkup = ReactComponent(),
        staticMarkup = React.renderToString(reactComponentMarkup);
    res.send(staticMarkup);
});

var expressServer = expressApp.listen(80, function () {
    var serverAddress = expressServer.address();
    console.log("express server started...");
    console.log("express server host name: ",serverAddress.address);
    console.log("express listening to port no: ",serverAddress.port);
});

• Now we can start the express server by using command node server.js.The following screenshot shows the terminal with express server startup.

• Now we can request the localhost on port 80 to view the output.The following screenshot shows the output of the demo in chrome browser.

• The  demo code can be downloaded from the following link.

https://github.com/saan1984/ReactIsomorphicDemo