React/Webpack/Express codebase

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

  {header}
  %content%
  {footer}
  {sidebar}

然后需要使用模板的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，前提是你装过了yarn npm 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((
  Hello, world!,
    document.getElementById('root')
));

在client/dist下新建index.html




    
    React

修改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
用这个方法的话相当于写了一个专用的测试服务器，不是很推荐。

具体可以参考webpack的文档
中文
英文