This is an Express 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.
This package is no longer maintained. There are better options, though not all work with Express. I recommend Next.js or Remix.
npm install express-react-views react react-dom
Note: You must explicitly install react
as a dependency. Starting in v0.5, react
is a peer dependency here. This is to avoid issues that may come when using incompatible versions.
// app.js
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());
Beginning with v0.2, you can now pass options in when creating your engine.
option | values | default |
---|---|---|
doctype |
any string that can be used as a doctype, this will be prepended to your document | "<!DOCTYPE html>" |
beautify |
true : beautify markup before outputting (note, this can affect rendering due to additional whitespace) |
false |
transformViews |
true : use babel to apply JSX, ESNext transforms to views.Note: if already using babel-register in your project, you should set this to false |
true |
babel |
any object containing valid Babel options Note: does not merge with defaults |
{presets: ['@babel/preset-react', [ '@babel/preset-env', {'targets': {'node': 'current'}}]]} |
The defaults are sane, but just in case you want to change something, here's how it would look:
var options = { beautify: true };
app.engine('jsx', require('express-react-views').createEngine(options));
Under the hood, Babel is used to compile your views to code compatible with your current node version, using the react and env presets by default. 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');
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
module.exports = HelloMessage;
Your routes would look identical to the default routes Express gives you out of the box.
// app.js
app.get('/', require('./routes').index);
// routes/index.js
exports.index = function(req, res){
res.render('index', { name: 'John' });
};
That's it! Layouts follow really naturally from the idea of composition.
Simply pass the relevant props to a layout component.
views/layouts/default.jsx
:
var React = require('react');
function DefaultLayout(props) {
return (
<html>
<head><title>{props.title}</title></head>
<body>{props.children}</body>
</html>
);
}
module.exports = DefaultLayout;
views/index.jsx
:
var React = require('react');
var DefaultLayout = require('./layouts/default');
function HelloMessage(props) {
return (
<DefaultLayout title={props.title}>
<div>Hello {props.name}</div>
</DefaultLayout>
);
}
module.exports = HelloMessage;
These ideas don't really apply. But since they are familiar ideas to people coming from more traditional "templating" solutions, let's address it. Most of these can be solved by packaging up another component that encapsulates that piece of functionality.
I know you're used to registering helpers with your view helper (hbs.registerHelper('something', ...))
) and operating on strings. But you don't need to do that here.
require('moment')
and use directly in your view. You can bundle up other helpers as you please.All "locals" are exposed to your view in this.props
. These should work identically to other view engines, with the exception of how they are exposed. Using this.props
follows the pattern of passing data into a React component, which is why we do it that way. Remember, as with other engines, rendering is synchronous. If you have database access or other async operations, they should be done in your routes.
require
to access your views. This means that contents are cached for the lifetime of the server process. You need to restart your server when making changes to your views. In development, we clear your view files from the cache so you can simply refresh your browser to see changes.<script>
s and <style>
s will need to use dangerouslySetInnerHTML={{__html: 'script content'}}
. You can take advantage of ES6 template strings here.<script dangerouslySetInnerHTML={{__html: `
// Google Analytics
// is a common use
`}} />