A React's JSX express rendering engine
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



This is an Express view engine for React's JSX that supports server side rendering and it is not limited to static markdown.


npm install express-react-engine react react-dom

Make sure you install react and react-dom as dependencies.

Add it to your Express App

var ReactEngine = require('express-react-engine');
var app = express();

app.set('views', __dirname + '/components');
app.engine('jsx', ReactEngine());

Change your views directory to match your components directory and set jsx as your view engine.


wrapper is a React component that renders the Html element as well as the initial props and children Html.


app.engine('jsx', reactEngine({wrapper: 'html.jsx'}));


var React = require('react');

var Html = React.createClass({
  render: function () {
    return (
          <link rel='stylesheet' type='text/css' href='/stylesheets/style.css' />
            <div id='view' dangerouslySetInnerHTML={{__html: this.props.body}} />
            <script type='application/json' dangerouslySetInnerHTML={{__html: JSON.stringify(this.props.props)}} />
            <script src='/javascripts/bundle.js' />

module.exports = Html;


Your views can be simple modules that export a React Component.

var React = require('react');

var Home = React.createClass({
  render: function () {
    return (
        E.T. Phone Home!

module.exports = Home;


You can use your routes the same way you always did in Express. Just render the React component instead of a jade/hjs/hbs template. Passing an object to the component as props is also straightforward, just add it as the second argument of res.render().

var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
  res.render('home/index.jsx', { foo: 'bar' });

module.exports = router;

Now foo will be available within the component as this.props.foo.


Obviously you can still use Layouts if you want. Just create a component that will render the "layout stuff" and pass him via props the component that you want to be laid out :)