react server side rendering for thinkjs 2.x
npm install think-react-render
open the middleware configuration file bootstrap/middleware.js, and add this content as follows for register middleware:
varreactRender=require('think-react-render');think.middleware('react_render',reactRender);edit the hook configuration file config/hook.js, edit the configuration properties, it can auto executes in each request and after the view parse.
module.exports={'view_parse': ['append','react_render']};write React component in the view files, the middleware will capitalize the first letter of the tag identified as a React component and rendering in service side.
this is a part of JSX Syntax. doesn't support child component, so you can use it as a entrance.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<App name={appname}></App>
</body>
</html>
use this.assign() method in controller to assign the data to view files.
varBase=require('./base.js');module.exports=think.controller(Base,{indexAction: function(self){this.assign('appname',"think-react-render");returnthis.display();}});create your self component files in the view/component directory, such as the follows app.jsx:
varReact=require('react');module.exports=React.createClass({render: function(){return(<divid="app">{this.props.name}</div>);}});Here are the results rendered
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<div id="app" data-reactid=".2cj2burx62o" data-react-checksum="-459794789">think-react-render</div>
</body>
</html>
you can create config/react_render.js configuration file as follow:
module.exports={jsx: true,// use jsx syntax? default is trueextension: '.jsx',// The extension of component files, default is .jsx,root_path: 'component',// Component file path, the path relative for `view.root_path`, and this support absolute path.left_delimiter: '{',// The delimiter of component arrribute in view files, such as "name={appname}", this configuration doesn't work for react component file, you can change it when the default value conflict with view file syntax.right_delimiter: '}',// such as the abovelower_name: true// is the component use lower case filename.};MIT