Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paypal/react-engine
a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views
https://github.com/paypal/react-engine
Last synced: about 2 months ago
JSON representation
a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views
- Host: GitHub
- URL: https://github.com/paypal/react-engine
- Owner: paypal
- License: apache-2.0
- Archived: true
- Created: 2015-04-09T21:21:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-10T08:56:12.000Z (over 5 years ago)
- Last Synced: 2024-05-13T04:02:51.969Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 311 KB
- Stars: 1,452
- Watchers: 64
- Forks: 154
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-engine
[](https://travis-ci.org/paypal/react-engine)
### What is react-engine?
* a react render engine for [Universal](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) (previously [Isomorphic](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)) JavaScript apps written with express
* renders both plain react views and **optionally** react-router views
* enables server rendered views to be client mountable
### Install
```sh
# In your express app, react-engine needs to be installed alongside react/react-dom (react-router is optional)
$ npm install react-engine react react-dom react-router --save
```
### Usage On Server Side
###### Setup in an Express app
```javascript
var Express = require('express');
var ReactEngine = require('react-engine');
var app = Express();
// create an engine instance
var engine = ReactEngine.server.create({
/*
see the complete server options spec here:
https://github.com/paypal/react-engine#server-options-spec
*/
});
// set the engine
app.engine('.jsx', engine);
// set the view directory
app.set('views', __dirname + '/views');
// set jsx or js as the view engine
// (without this you would need to supply the extension to res.render())
// ex: res.render('index.jsx') instead of just res.render('index').
app.set('view engine', 'jsx');
// finally, set the custom view
app.set('view', require('react-engine/lib/expressView'));
```
###### Setup in a [KrakenJS](http://krakenjs.com) app's config.json
```json
{
"express": {
"view engine": "jsx",
"view": "require:react-engine/lib/expressView",
},
"view engines": {
"jsx": {
"module": "react-engine/lib/server",
"renderer": {
"method": "create",
"arguments": [{
/*
see the complete server options spec here:
https://github.com/paypal/react-engine#server-options-spec
*/
}]
}
}
}
}
```
###### Server options spec
Pass in a JavaScript object as options to the react-engine's [server engine create method](#setup-in-an-express-app).
The options object should contain the mandatory `routes` property with the route definition.
Additionally, it can contain the following **optional** properties,
- `docType`: \ - a string that can be used as a doctype (_Default: ``_).
(docType might not make sense if you are rendering partials/sub page components, in that case you can pass an empty string as docType)
- `routesFilePath`: \ - path for the file that contains the react router routes.
react-engine uses this behind the scenes to reload the routes file in
cases where [express's app property](http://expressjs.com/api.html#app.set) `view cache` is false, this way you don't need to restart the server every time a change is made in the view files or routes file.
- `renderOptionsKeysToFilter`: \ - an array of keys that need to be filtered out from the data object that gets fed into the react component for rendering. [more info](#data-for-component-rendering)
- `performanceCollector`: \ - to collects [perf stats](#performance-profiling)
- `scriptLocation`: \ - where in the HTML you want the client data (i.e. `var __REACT_ENGINE__ = ... `) to be appended (_Default: `body`_).
If the value is undefined or set to `body` the script is placed before the `