express-react-engine
This is an Express view engine for React's JSX that supports server side rendering and it is not limited to static markdown.
Usage
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 = ;var app = ; app;app;
Change your views directory to match your components directory and set jsx
as your view engine.
Options
wrapper
is a React component that renders the Html element as well as the initial props and children Html.
Example
app;
/components/html.jsx
var React = ;var Html = React;moduleexports = Html;
Views
Your views
can be simple modules that export a React Component.
var React = ; var Home = React; moduleexports = Home;
Routes
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 = ;var router = express; router; moduleexports = router;
Now foo
will be available within the component as this.props.foo
.
Layouts
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 :)