>>>>>>> 24b6b53 ( 【init】)
packge.json:
{{
"name": "react-router-startup",
"description": "A Startup Devlopment Kit for React Router",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-watch": "^2.0.2"
},
"dependencies": {
"express": "^4.13.4",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-router": "^2.4.1",
"swig": "^1.4.2"
},
"scripts": {
"start": "babel-node app.js",
"dev": "babel-watch app.js"
}
}
- babel-cli 里面有个 babel-node ,比较重要的工具。
- babel-watch 动态监视文件变化
- babel-preset-es2015 es2015转换
- babel-preset-react react转换
app.js:
require('babel-core/register')({
presets: ['es2015', 'react']
});
import express from 'express';
import React from 'react';
import ReactDOM from 'react-dom/server';
import {match ,RouterContext} from 'react-router';
import swig from 'swig';
var route = require('./view/route');
const app = express();
app.use((req,res) => {
match({routes:route.default , location:req.url},(error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
var html = ReactDOM.renderToString(React.createElement(RouterContext, renderProps));
var page = swig.renderFile('template/index.html',{html:html});
res.status(200).send(page);
} else {
res.status(404).send('Not found')
}
});
});
app.listen(3000,()=>{
console.log('server running');
});
route.js:
import React from 'react';
import {Route} from 'react-router';
import App from './component/App';
import Home from './component/Home';
import Content from './component/Content';
export default (
<<<<<<< HEAD
<Route component={App}>
<Route path="/" component={Home}/>
<Route path="/content" component={Content}/>
</Route>
=======
<Route component={App}>
<Route path="/" component={Home}/>
<Route path="/content" component={Content}/>
</Route>
>>>>>>> 24b6b53 ( 【init】)
)
基础环境这样,用新语法去写,一切ok了。
当初试验写新语法,在撸PhotoHub时候,按照阿里前端的那篇文章,搬来了很多babel插件。现在测试了下,用这个方式,babel的插件一个没有用到,已经可以支持node使用新语法,以及服务端的渲染了。
全部代码已放入github,[传送门](https://github.com/ThinkCats/ReactRouterServerRender),希望能给同样在大海中漂泊的小白们带来点亮光。。。
一天晚上,整理了两篇文章,业已很困,酸奶和煤球都已经睡得呼呼了。