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
用這個方法的話相當于寫了一個專用的測試服務器，不是很推薦。
