Consider deferring to hapi-react-views.

A port of express-react-views to hapi

This is an hapi view engine which renders React components on server. It renders static markup and does not support mounting those views on the client.

This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.

npm i -S hapi-react react react-dom

Note: You must explicitly install react as a dependency. React is a peer dependency here. This is to avoid issues that may come when using incompatible versions.

The 1.x.x version(s) is reserved for React 0.11.x versions. Versions 2.x.x and up will support React 0.12.x and up.

Add it to your app

server = new hapi.Server(0);
var engine = require('hapi-react')();

server.register(require('vision'), (err) => {
  assert.ifError(err);

  server.views({
    defaultExtension: 'jsx',
    engines: {
      jsx: engine, // support for .jsx files
      js: engine // support for .js
    },
    relativeTo: __dirname,
    path: 'views'
  });
});

The defaults are sane, but just in case you want to change something, here's how it would look:

var options = { beautify: true };

server.views({
  engines: {
    jsx: require('hapi-react')(options)
  }
});

Under the hood, Babel is used to compile your views into ES5 friendly code, using the default Babel options. Only the files in your views directory (i.e. app.set('views', __dirname + '/views')) will be compiled.

Your views should be node modules that export a React component. Let's assume you have this file in views/index.jsx:

var React = require('react');
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

module.exports = HelloMessage;

Create a hapi route and serve the view.

server.route({
  method: 'GET',
  path: BASE_URL,
  handler: function(request, reply) {
    reply.view('index', {
      name: 'Trevor'
    });
  }
})