#express-react-router-views ## What is it? - a react render engine for express js - renders both backend and frontend views using react-router ## Install ```npm install express-react-router-views react react-dom react-router history express --save``` ## Usage on the server side var express = require('express'); var ExpressReactRouter = require('express-react-router-views'); var routes = require('./routes'); // This are react-router routes, check the example of a routes file below var app = express(); // Set the engine as .jsx or .js app.engine('.jsx', ExpressReactRouter.engine({ routes: routes })); // Set the view engine as jsx or js app.set('view engine', 'jsx'); // Set the custom view app.set('view', ExpressReactRouter.view); #### Routes example var React = require('react'); var ReactRouter = require('react-router'); var Layout = require('./components/layout.jsx'); var Index = require('./components/index.jsx'); var About = require('./components/about.jsx'); var Route = ReactRouter.Route; var IndexRoute = ReactRouter.IndexRoute; module.exports = ( ); ## Rendering views on server side app.get('/*', function(req, res) { // You can replace req.url with the view path that you've set on the routes file res.render(req.url); }); ## Usage On Client Side // assuming we use `browserify` var client = require('express-react-router-views').client; var routes = require('./routes'); // Same file used on the server side client.render({ routes: routes }); ### Layout example var React = require('react'); var ReactRouter = require('react-router'); var client = require('express-react-router-views').client; var Link = ReactRouter.Link; var IndexLink = ReactRouter.IndexLink; var ACTIVE = { color: 'red' }; var Layout = React.createClass({ render: function render() { return ( { client.getProps().title }

APP!

{ this.props.children && React.cloneElement(this.props.children, client.getProps())} ); } }); module.exports = Layout; `client.getProps()` grabs the properties set from the server side, so when you do `{ this.props.children && React.cloneElement(this.props.children, client.getProps())}` you're passing them to the props of any children. # Note This package was built using the latest react react-dom and react-router. I'll try to update it as fast as I can when new versions come out. That means that maybe some features will change in the future, but this Readme would update accordingly containing the changes between versions.