在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:paypal/react-engine开源软件地址:https://github.com/paypal/react-engine开源编程语言:JavaScript 100.0%开源软件介绍:react-engineWhat is react-engine?
Install# 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 SideSetup in an Express appvar 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')); KrakenJS app's config.jsonSetup in a{
"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 specPass in a JavaScript object as options to the react-engine's server engine create method.
The options object should contain the mandatory Additionally, it can contain the following optional properties,
Rendering views on server sidevar data = {}; // your data model
// for a simple react view rendering
res.render(viewName, data);
// for react-router rendering
// pass in the `url` and react-engine
// will run the react-router behind the scenes.
res.render(req.url, data); Usage On Client Side (Mounting)// assuming we use a module bundler like `webpack` or `browserify`
var client = require('react-engine/lib/client');
// finally, boot whenever your app is ready
// example:
document.addEventListener('DOMContentLoaded', function onLoad() {
// `onBoot` - Function (optional)
// returns data that was used
// during rendering as the first argument
// the second argument is the `history` object that was created behind the scenes
// (only available while using react-router)
client.boot(/* client options object */, function onBoot(data, history) {
});
};
// if the data is needed before booting on
// client, call `data` function anytime to get it.
// example:
var data = client.data(); Client options specPass in a JavaScript object as options to the react-engine's client boot function. It can contain the following properties,
Data for component renderingThe actual data that gets fed into the component for rendering is the If you don't want to pass all that data, you can pass in an array of object keys or dot-lookup paths that react-engine can filter out from the // example of using `renderOptionsKeysToFilter` to filter `renderOptions` keys
var engine = ReactEngine.server.create({
renderOptionsKeysToFilter: [
'mySensitiveData',
'somearrayAtIndex[3].deeply.nested'
],
routes: require(path.join(__dirname + './reactRoutes'))
}); Notes:
Handling redirects and route not found errors on the server sideWhile using react-router, it matches the url to a component based on the app's defined routes. react-engine captures the redirects and not-found cases that are encountered while trying to run the react-router's match function on the server side. To handle the above during the lifecycle of a request, add an error type check in your express error middleware. The following are the three types of error that get thrown by react-engine:
** for MATCH_REDIRECT error, // example express error middleware
app.use(function(err, req, res, next) {
console.error(err);
// http://expressjs.com/en/guide/error-handling.html
if (res.headersSent) {
return next(err);
}
if (err._type && err._type === ReactEngine.reactRouterServerErrors.MATCH_REDIRECT) {
return res.redirect(302, err.redirectLocation);
}
else if (err._type && err._type === ReactEngine.reactRouterServerErrors.MATCH_NOT_FOUND) {
return res.status(404).send('Route Not Found!');
}
else {
// for ReactEngine.reactRouterServerErrors.MATCH_INTERNAL_ERROR or
// any other error we just send the error message back
return res.status(500).send(err.message);
}
}); Yeoman GeneratorThere is a Yeoman generator available to create a new express or KrakenJS application which uses react-engine: generator-react-engine. Performance ProfilingPass in a function to the
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论