初學者的React全家桶完整例項
寫在前面的話
自已以前對redux,React,rect-redux,react-router都是有一點的瞭解，並且在真實的專案中也多少有些涉及。但是不足的地方在於沒有做一個demo將他們串起來,所以總是感覺似懂非懂。特別是react服務端渲染這一塊，對於自己完全就是一個黑箱，這對我深入理解react同構等稍微難一點的內容產生了很大的影響。所以我最後寫了這個例子，希望有同樣困擾的同學能夠有所收穫。也歡迎star,issue。
不得不說，當你真實的去做一個專案的時候，哪怕是一個小小的demo，這都會完全顛覆你對React生態的認識。從一開始的不知道如何入手，到遇到各種困難，然後各種google，最後解決問題，你會發現自己是真的在成長。遇到的問題以及解決方案，我在文章列表中也給出了。時間+經歷=成長，對於我來說就夠了。默默的對自己說一句，加油把少年!
1、專案說明
首先下載該專案，然後直接執行下面的命令。
npm install npm run dev //npm run pro //生產模式下執行註釋部分命令
2、專案基本知識點
2.1 代理與反代理的基本內容
使用http-proxy來完成。其反向代理的原理如下圖：
通過如下程式碼完成，其相當於一個反向代理伺服器，向我們的代理伺服器，即API伺服器傳送請求:
const targetUrl = 'http://' + (process.env.APIHOST||"localhost") + ':' + (process.env.APIPORT||"8888");//其中APIHOST和APIPORT分別表示API伺服器執行的域名與埠號const proxy = httpProxy.createProxyServer({
target:targetUrl,
ws:true
//反代理伺服器與伺服器之間支援webpack socket});
app.use("/api",(req,res)=>{
proxy.web(req,res,{target:targetUrl});
});
app.use('/ws', (req, res) => {
proxy.web(req, res, {target: targetUrl + '/ws'});
});2.2 react全家桶常見庫
react-router,react,redux,react-redux,redux-async-connect,redux-thunk等一系列react相關的基本內容。其中最重要的就是我們的redux-async-connect，他可以在跳轉到某個頁面之前或者之後發起某一個ajax請求。用法如下:
@asyncConnect([{ //其中helpers來自於服務端渲染
promise: ({store: {dispatch, getState},helpers}) => { const promises = []; const state = getState(); //得到store的當前狀態
if(!isInfoLoaded(state)){
promises.push(dispatch(loadInfo()));
} if(!isAuthLoaded(state)){
promises.push(dispatch(loadAuth()));
} //如果沒有登入或者相應的資料沒有載入完成，那麼我們在此時載入資料
return Promise.all(promises);
}
}])其中helpers方法來自於其服務端渲染的loadOnServer方法:
loadOnServer({...renderProps, store, helpers: {client}}).then(() => { const component = ( <Provider store={store} key="provider">
<ReduxAsyncConnect {...renderProps} />
<\/Provider>
)
res.status(200);
global.navigator = {userAgent: req.headers['user-agent']};
res.send('<!doctype html>\n' +
renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}\/>));
});
2.3 自定義bootstrap
使用bootstrap-loader來載入自定義的bootstrap檔案(.bootstraprc)，從而減小打包後文件的大小。我們通過在專案目錄下建立.bootstraprc檔案，該檔案可以指定我們需要使用的bootstrap樣式，是否使用JavaScript等。如通過下面的配置：
scripts: false
就可以在當前應用中不引入bootstrap的javascript，而只是單獨使用樣式。如果在單獨使用樣式的情況下我們可以結合react-bootstrap，react-router-bootstrap來完成頁面的各種互動。如果你要單獨使用這部分的內容，你可以參考這裡
2.4 webpack的HMR功能整合
使用webpack實現HMR(react-transform-hmr)等基本功能，以及介紹了webpack-dev-middleware，webpack-hot-middleware等的使用。
babelReactTransformPlugin[1].transforms.push({
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
});
如果你想深入瞭解HMR，你也可以參考這裡。
2.5 redux開發工具使用
redux-devtools,redux-devtools-dock-monitor,redux-devtools-log-monitor等redux開發工具的使用。只需要新增下面的一段程式碼就可以了:
import React from 'react';
import { createDevTools } from 'redux-devtools';
import SliderMonitor from "redux-slider-monitor";
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
export default createDevTools( <DockMonitor changeMonitorKey='ctrl-m' defaultPosition="right" toggleVisibilityKey="ctrl-H"
changePositionKey="ctrl-Q">
<LogMonitor />
<SliderMonitor keyboardEnabled />
<\/DockMonitor>);
當然，如果要新增這部分程式碼要做一個判斷:
if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) { const { persistState } = require('redux-devtools'); const DevTools = require('../containers/DevTools/DevTools');
finalCreateStore = compose(
applyMiddleware(...middleware),
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(), //如果有window.devToolsExtension，那麼使用使用者自己的，否則使用我們配置的
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)(_createStore);
}
也就是說我們只會在開發模式下，同時客戶端程式碼(服務端顯然是不需要的，該工具只是為了在客戶端檢視當前state的狀態)中，以及DEVTOOLS為true中才會新增我們的devTool工具。
2.6 react伺服器端同構
服務端同構是react開發中不可避免的問題，因為服務端渲染在一定程度上能夠減少首頁白屏的時間，同時對於SEO也具有很重要的作用。React中關於服務端渲染的介紹只是給出一個match方法，而更加深入的知識卻要自己反覆琢磨。
match({ history, routes: getRoutes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => { if (redirectLocation) {
res.redirect(redirectLocation.pathname + redirectLocation.search); //重定向要新增pathname+search
} else if (error) {
console.error('ROUTER ERROR:', pretty.render(error));
res.status(500);
hydrateOnClient();
} else if (renderProps) {
loadOnServer({...renderProps, store, helpers: {client}}).then(() => { const component = ( <Provider store={store} key="provider">
<ReduxAsyncConnect {...renderProps} />
<\/Provider>
);
res.status(200);
global.navigator = {userAgent: req.headers['user-agent']};
res.send('<!doctype html>\n' +
renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}\/>));
});
} else {
res.status(404).send('Not found');
}
});
});
針對這部分內容我寫了react服務端渲染中的renderProps與react-data-checksum以及React服務端同構深入理解與常見問題等系列文章，也歡迎閱讀。文中提到了webpack-isomorphic-tools，該工具使得在服務端也能夠處理less/css/scss,image等各種檔案，從而使得服務端同構成為現實(服務端可以使用css module等特性生成className，從而使得checksum在客戶端與服務端一致，防止客戶端重新渲染)。
2.7 各種打包工具
better-npm-run以及webpackcc等打包工具的使用。前者在package.json中直接配置就行:
"betterScripts": {
"start-prod": {
"command": "node ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "production",
"PORT": 8080,
"APIPORT": 3030
}
}
}
其主要作用在於方便設定各種環境變數。而webpackcc集成了多種打包方案，總有一個適合你
2.8 服務端客戶端其他的庫
superagent,express等與伺服器相關的內容。其中前者主要用於向服務端傳送請求，包括服務端向反向代理伺服器以及客戶端向伺服器傳送請求。
const methods = ['get', 'post', 'put', 'patch', 'del'];
import superagent from 'superagent'; this[method] = (path, { params, data } = {}) => new Promise((resolve, reject) => { const request = superagent[method](formatUrl(path)); if (params) {
request.query(params);
} //如果傳入了引數，那麼通過query新增進去
if (__SERVER__ && req.get('cookie')) {
request.set('cookie', req.get('cookie'));
} if (data) {
request.send(data);
} //request.end才會真正傳送請求出去
request.end((err, { body } = {}) => err ? reject(body || err) : resolve(body));
}));
2.9 高階元件的元件複用邏輯
高階元件對於元件複用是相當重要的。比如有一種情況，你需要獲取所有的使用者列表，圖書列表,**列表等等，然後在資料獲取完成後來重新渲染元件，此時你也可以考慮高階元件的方式：
//此時我們只是需要考慮真正的非同步請求資料的邏輯，以及對prop進行特別處理的邏輯，而不用管當前是圖書列表，還是使用者列表等等function connectPromise({promiseLoader, mapResultToProps}) {
return Comp=> { return class AsyncComponent extends Component {
constructor(props) {
super(); this.state = {
result: undefined
}
}
componentDidMount() {
promiseLoader()
.then(result=> this.setState({result}))
}
render() { return ( <Comp {...mapResultToProps(props)} {...this.props}/>
)
}
}
}
}
const UserList = connectPromise({
promiseLoader: loadUsers,
mapResultToProps: result=> ({list: result.userList})
})(List); //List can be a pure component
const BookList = connectPromise({
promiseLoader: loadBooks,
mapResultToProps: result=> ({list: result.bookList})
})(List);
你應該很容易就看出來了，對於這種列表型別的高階元件抽象是相當成功的。我們只需要關注重要的程式碼邏輯，在componentDidMount請求資料結束後我們會自動呼叫setState來完成元件狀態的更新，而真實的更新的元件卻是我們通過自己的業務邏輯來指定的,可以是BookList,UserList,**List等等。這樣具有副作用的高階元件複用也就完成了。如果你需要深入瞭解高階元件的內容，請檢視我的這篇文章。在該專案中我們使用了multireducer
3、React全家桶文章總結
關於該專案中使用到的所有的react相關知識點我都進行了詳細總結。但是很顯然，如果你要學習react，必須對webpack和babel都進行一定的瞭解。因為在寫這個專案之前，我只是一個react/webpack/babel的新手，因此也是在不斷的學習中摸索前進的。遇到了問題就各種google,baidu。而且我對於自己有一個嚴格的要求，那就是要知其然而且要知其所以然，因此我會把遇到的問題都進行深入的分析。下面我把我在寫這個專案過程遇到問題，並作出的總結文章貼出來，希望對您有幫助。我也希望您能夠關注每一篇文章下面的參考文獻，因為他們確實都是非常好的參考資料。
3.1 React+redux相關
3.2 webpack相關
3.3 Babel相關
3.4 其他內容
4、你能夠學到的東西
內部所有的程式碼都有詳細的註釋，而且都給出了程式碼相關說明的連結。通過這個專案，對於react*全家桶*應該會有一個深入的瞭解。該專案牽涉到了常見的React生態中的庫，因此命名為全家桶。該專案用到的React生態的主要庫如下：
react react-addons-perf react-bootstrap react-dom react-helmet react-redux react-router react-router-bootstrap react-router-redux react-tap-event-plugin react-transform-hmr redux redux-async-connect redux-devtools redux-devtools-dock-monitor redux-devtools-log-monitor redux-form, redux-slider-monitor redux-thunk multireducer ........