React在我司也算是基本配置了，入职前接触过诸如ThinkPHP, ASP.NET MVC等“传统”的MVC框架，也曾听闻React的大名，心向往之。
入职后侥幸来到了REA，更侥幸参与了一个技术比较新的项目，有直接的机会学习React（以及FaceBook全家桶）。
自觉应该写点总结出来，水平尚浅，笔法拙劣，如果错误还请指正。
What React
React是FB推出用来构建UI的JS library，主要特点是组件化，同期还有Angular和Vue两个竞争对手，但鉴于我还没有学习过其他两个，这里就不给出比较了。目前来看React的生态圈更加庞大和完善。
Why React
或者说为什么选择组件化的JS library来构建应用。
HTML, CSS, JS的设计中，三者就不应该是耦合在一起的，传统的前端代码里，一个页面应该以一份HTML代码为基本，用一份或多份CSS和JS文件来控制样式和逻辑，当然也有用JS包办的。
于是出现了第一个问题，HTML文件的可重用性太低。
模板引擎解决了这个问题，
在这个解决方案下，文件可能是这样的：
-/layout
-_layout.html
-_header.html
-_sidebar.html
-/footer
-_footer.html
-_sponsor.html
代码一般是长这样的：
layout.html
<body>
{header}
%content%
{footer}
{sidebar}
</body>
然后需要使用模板的html文件继承这个模板，并且实现Content部分。
稍微完善一点的MVC框架都会有这个功能。比如ASP.NET MVC提供了PartialView 和 RenderBody等方法，Express之前官方推荐的模板引擎jade则提供了mixin和模板继承功能。
之后针对CSS也出现了LESS和SASS这样的工具。
但是时间久了，如何管理这些引用关系错综复杂的文件又成了一个新的问题。
一个例子
-/css
-header.css
-main-body.css
-sidebar.css
-footer.css
-/js
-header.js
-main-body.js
-sidebar.js
-footer.js
同一份文件可能被多个文件引用，这多个文件可能被更多的文件引用，而且不同文件之间可能会相互引用，如果项目管理者稍有不慎，项目的引用关系可能就从一棵树变成了图，各部分耦合性增强，而强行维持项目的树状结构必然会导致代码的重用性降低。在两者之间权衡是一件很痛苦的事。
组件化的优点在于部分解决了这些问题，将一个组件相关的HTML，CSS，JS打包在一起成为一个Component，需要用到这个Component的文件自行import，提升了代码的重用性。当然Component之间的相互引用就是另一个问题了。
你可能会问，这样不就破坏了我们一直强调的高内聚低耦合吗？从HTML,CSS,JS三者的关系来看确实是这样的，但从应用的功能和代码层面来想，我们把功能拆分成原子级的Component，其实提升了它的内聚性。
另一方面，技术就是在各个方面权衡利弊。
How React
这个实在说来话长。这篇文章只是想引入第一步，先搭一个codebase。
-
node init之后，建基本目录结构：
-/client
-/dist
-/src
-/server
yarn add react react-dom express，前提是你装过了yarnnpm install yarn -g之后给你
package.json中的script添加一行"start": "node ./server/index.js",这样就可以用yarn start或者npm run start来启动server目录下的index.js了编辑
server/index.js, 这里用到了ejs来做render，所以需要yarn add ejs
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const ejs = require('ejs');
app.get('/',function(req,res){
res.render('index');
})
app.engine('.html', ejs.__express);
app.set('view engine','html');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const server = app.listen(3000,function(){
const host = server.address().address;
const port = server.address().port;
console.log('Listening at http://%s:%s',host,port);
})
-
yarn start，访问localhost:3000发现并不能成功访问，因为我们没有指定views的目录，暂时按下。 - 在
client/src下新建index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render((
<h1>Hello, world!</h1>,
document.getElementById('root')
));
在client/dist下新建index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
修改server/index.js，
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const ejs = require('ejs');
app.get('/',function(req,res){
res.render('index');
})
app.set('views','./client/dist/');//设置views目录
app.engine('.html', ejs.__express);
app.set('view engine','html');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const server = app.listen(3000,function(){
const host = server.address().address;
const port = server.address().port;
console.log('Listening at http://%s:%s',host,port);
})
yarn start重新运行，访问3000，发现不报错了，但Hello world也没有渲染出来。这是因为React的代码并不能被浏览器直接解释，我们还需要构建工具把它编译成浏览器能够识别的js(es5)yarn add webpack,yarn add babel-core babel-preset-react babel-loader,在client下新建文件webpack.config.js
module.exports = {
entry: {
app: [
'./src/index.js',
]
},
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
'babel-loader'
]
}
]
}
}
在根目录下新建.babelrc
{
"presets": [
"react"
]
}
最后修改package.json,加一行build
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./server/index.js",
"build": "cd ./client && webpack"
},
现在就可以通过yarn build来将Jsx的代码转换成js了
- 但现在访问3000仍然是空白页面，原因是没有在server中配置静态资源。修改
server/index.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const ejs = require('ejs');
const path = require('path');
app.get('/',function(req,res){
res.render('index');
})
app.set('views','./client/dist/');
app.engine('.html', ejs.__express);
app.set('view engine','html');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//添加静态资源目录
app.use(express.static(path.join(__dirname,'..','client/dist')));
//当访问网站根目录时，返回index.html
app.get('/',function(req,res){
res.sendFile(path.join(__dirname,'..','client/dist/index.html'))
});
const server = app.listen(3000,function(){
const host = server.address().address;
const port = server.address().port;
console.log('Listening at http://%s:%s',host,port);
})
至此，已经可以编译和运行网站看到想要的结果了。
我们可以把build和start两个命令合成一个，这样只需要yarn dev就可以编译并且执行了。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./server/index.js",
"build": "cd ./client && webpack",
"dev": "npm run build && npm run start"
},
关于WebPack hot reload
实际上对于开发人员目前的配置仍然是不够的，总不能每次修改代码都跑一次yarn dev吧。
针对这个问题
可以给webpack命令加上一个-watch参数，这样当代码修改后webpack会自动重新打包，但仍然需要刷新浏览器。
目前WebPack提供了两种方法来让代码能够hot reload。
- webpack-dev-server
这是WebPack提供的一个微型Express服务 - 利用webpack提供的API
用这个方法的话相当于写了一个专用的测试服务器，不是很推荐。
