Server-Side Rendering with React
James DiGioia
import React from 'react';const App = React.createClass({displayName: 'App',propTypes: {headline: React.PropTypes.string.isRequired},render: function render() {return (<h1 className="headline">{this.props.headline}</h1>);}});export default App;
app.js
<h1 class="headline">Hello World!</h1>
rendered.html
import express from 'express';import exphbs from 'express-handlebars';import React from 'react';import ReactDOMServer from 'react-dom/server';const app = express();app.engine('hbs', exphbs({extname: '.hbs'}));app.set('view engine', 'hbs');app.use(express.static('public'));app.get('/', (req, res) => {const state = { headline: 'Hello World!' };res.render('index', {app: ReactDOMServer.renderToString(<App {...state} />),state: JSON.stringify(state)});});
server.js
import ReactDOM from 'react-dom';const state = window.__INITIAL_STATE__ || {};document.addEventListener('DOMContentLoaded', () => {ReactDOM.render(<App {...state} />,document.getElementById('app'));});
client.js