React同构
javascript同构是什么
让javascript代码在客户端和服务器端都能运行
关键是什么
mvc的框架是在DOM加载的时候渲染，这个当然也可以显示，但是会带来不好的用户体验。
另一个问题是MVC框架里面内容是不能被搜索引擎搜索到的（除非给钱给第三方服务），如果你的app提供一些用户需要搜索的数据，那就悲剧了。
但是当你在服务器端渲染javascript代码，就能解决这些问题，是不是觉得很酷。。。。
同构的好处
教程
https://www.youtube.com/watch?v=8wfY4TGtMUo
在server.js中安装jsx。
// Make sure to include the JSX transpiler
require("node-jsx").install();
然后如果你的组件是在一个单独的文件中，你需要使用module.exports导出你的组件。
然后确保调用React.createFactory,将你的组件在服务器端渲染出来。
/** @jsx React.DOM */
var React = require('react/addons');
/* create factory with griddle component */
var Griddle = React.createFactory(require('griddle-react'));
var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = 100;
var ReactApp = React.createClass({
componentDidMount: function () {
console.log(fakeData);
},render: function () {
return (
<div id="table-area">
<Griddle results={fakeData} columnMetadata={columnMeta} resultsPerPage={resultsPerPage} tableClassName="table"/>
</div>
)
}
});
/* Module.exports instead of normal dom mounting */
module.exports.ReactApp = ReactApp;
/* Normal mounting happens inside of /main.js and is bundled with browerify */
现在，当你在路由里面使用React.renderToString时，奇迹就会发生。。。
var React = require('react/addons');
var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);
module.exports = function(app) {
app.get('/',function(req,res){
// React.renderToString takes your component
// and generates the markup
var reactHtml = React.renderToString(ReactApp({}));
// Output html rendered by react
// console.log(myAppHtml);
res.render('index.ejs',{reactOutput: reactHtml});
});
};
将reactOutput变量传递到template模板中。
<!doctype html>
<html>
<head>
<title>React Isomorphic Server Side Rendering Example</title>
<link href='/styles.css' rel="stylesheet">
</head>
<body>
<h1 id="main-title">React Isomorphic Server Side Rendering Example</h1>
<!-- reactOutput is the server compiled React Dom Nodes -->
<!-- comment out reactOutput to see empty non indexable source in browser -->
<div id="react-main-mount">
<%- reactOutput %>
</div>
<!-- comment out main.js to ONLY see server side rendering -->
<script src="/main.js"></script>
</body>
</html>
注意：因为这些文件是js后缀而不是jsx后缀的，所以使用React.createFactory来包含组件。想知道原因，看这里
Demo安装指引
如果你想下载代码自己尝试
- clone这个仓库：git clone git@github.com:HelloClicky/helloClicky.git
- 安装依赖包： npm install
- 运行代码：node server.js
- 在浏览器中输入网址访问：http://localhost:4444 5:想看看服务器端渲染做了什么，可以在index.ejs文件中注释掉main.js，然后你就会看到服务器端生成了什么内容。
上面的仓库貌似不能访问，请访问这里https://github.com/DavidWells/isomorphic-react-example
