一、Chrome擴(kuò)展包

1、React-Developer-Tools
檢視React組件的樹形結(jié)構(gòu)。
下載地址：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
2、Redux-DevTools
檢視Redux數(shù)據(jù)流，可以將Store狀態(tài)跳躍到任何一個(gè)歷史狀態(tài)，也就是所謂的“時(shí)間旅行”功能。
下載地址：https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
3、React-Perf
可以發(fā)現(xiàn)react組件渲染的性能問題
下載地址：https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm

二、Redux輔助及中間件

1、redux-immutable-state-invariant
在Redux項(xiàng)目中，有一個(gè)規(guī)則，每一個(gè)reducer函數(shù)都必須是一個(gè)純函數(shù)，不能修改傳入的參數(shù)state和action。但是只靠開發(fā)人員去遵守這個(gè)規(guī)則，并不可靠，因?yàn)橐?guī)則總是會(huì)被無心違反的。
redux-immutable-state-invariant包，提供了一個(gè)Redux中間件，它能夠讓Redux在每次派發(fā)動(dòng)作之后做一個(gè)檢查。如果發(fā)現(xiàn)某個(gè)reducer違反了作為一個(gè)純函數(shù)的規(guī)定，擅自修改了state，就會(huì)給一個(gè)大大的錯(cuò)誤警告，從而讓開發(fā)者意識(shí)到自己犯了一個(gè)錯(cuò)誤，必須要修正。

npm install  --save-dev redux-immutable-state-invariant

注意：redux-immutable-state-invariant這種檢查在開發(fā)環(huán)境很有用，但是在產(chǎn)品環(huán)境下，這樣的出錯(cuò)提示沒有意義。畢竟用戶不會(huì)去關(guān)心什么錯(cuò)誤提示，用戶也看不懂。況且這種檢查不僅要消耗計(jì)算資源，javaScript代碼體積也會(huì)增大。所以我們通常在產(chǎn)品環(huán)境中不啟用redux-immutable-state-invariant。
2、reselect
reselect庫是Redux的一個(gè)中間件，是一個(gè)簡(jiǎn)單的Redux庫。reselect中使用了緩存機(jī)制，它要解決的問題是：“在組件交互操作的時(shí)候，state發(fā)生變化的時(shí)候如何減少渲染的壓力”。

npm install --save reselect

雖然reselect庫以re開頭，但是邏輯上和React/Redux沒有直接關(guān)系，實(shí)際上，在任何需要這種具有記憶的計(jì)算場(chǎng)合都可以使用reselect，不過，對(duì)于React和Redux組合的應(yīng)用，reselect無疑能提供絕佳的支持。
3、redux-thunk
thunk是基于redux副作用邏輯的推薦中間件，包括需要訪問存儲(chǔ)的復(fù)雜同步邏輯，以及像AJAX請(qǐng)求這樣的簡(jiǎn)單異步邏輯。
redux-thunk中間件允許您編寫返回函數(shù)而不是動(dòng)作的動(dòng)作創(chuàng)建者。thunk可用于延遲動(dòng)作的發(fā)送，或僅在滿足某個(gè)條件時(shí)發(fā)送。內(nèi)部函數(shù)接收存儲(chǔ)方法dispatch和getState參數(shù)。

npm install --save redux-thunk

缺點(diǎn)：reducer返回結(jié)果用純函數(shù)方式對(duì)服務(wù)器訪問，而執(zhí)行訪問資源的操作將由reducer調(diào)用者去執(zhí)行。
4、redux-saga
redux-saga 是一個(gè)旨在使應(yīng)用程序副作用（即異步事物，如數(shù)據(jù)獲取和不純的東西，如訪問瀏覽器緩存）更容易管理，執(zhí)行更高效，易于測(cè)試，以及更好地處理故障的庫。
心理模型是一個(gè)saga就像你的應(yīng)用程序中的一個(gè)單獨(dú)的線程，它獨(dú)自負(fù)責(zé)副作用。redux-saga是一個(gè)用于管理redux應(yīng)用異步操作的中間件，這意味著可以使用正常的redux操作從主應(yīng)用程序啟動(dòng)，暫停和取消此線程，它可以訪問完整的redux應(yīng)用程序狀態(tài)，也可以調(diào)度redux操作。
redux-saga與redux-thunk相反，你最終沒有回調(diào)地獄，你可以輕松地測(cè)試你的異步流程，你的行動(dòng)保持純粹。

npm install --save redux-saga

缺點(diǎn)：體積大，要求開發(fā)這能理解ES6、async和await語法。
5、利用promise實(shí)現(xiàn)異步操作中間件

a、redux-promise
b、redux-promises(redux-promises向后兼容redux-thunk)
c、redux-simple-promise
d、redux-promise-middleware

6、其他redux處理異步的中間件

a、redux-effects
b、redux-side-effects
c、redux-loop
d、redux-observable

三、單元測(cè)試

1、Mocha
Mocha是流行的JavaScript測(cè)試框架之一，通過它添加和運(yùn)行測(cè)試，從而保證代碼質(zhì)量

npm install -g mocha
npm install --save-dev mocha

2、Chai.js斷言庫
Chai是一個(gè)可以在node和瀏覽器環(huán)境運(yùn)行的BDD/TDD斷言庫，可以和任何JavaScript測(cè)試框架結(jié)合。

npm install chai

BDD（Behavior Driven Development行為驅(qū)動(dòng)開發(fā)）
是一種敏捷軟件開發(fā)的技術(shù)，它鼓勵(lì)軟件項(xiàng)目中的開發(fā)者、QA和非技術(shù)人員或商業(yè)參與者之間的協(xié)作
TDD（Test Driven Development測(cè)試驅(qū)動(dòng)開發(fā)）
測(cè)試先于編寫代碼的思想，用于指導(dǎo)軟件開發(fā)
3、jest
jest 是facebook推出的一款測(cè)試框架，集成了 Mocha，chai，jsdom，sinon等功能。

npm install -g jest
npm install --save-dev jest

4、Enzyme
Enzyme是React的JavaScript測(cè)試實(shí)用程序，可以更輕松地測(cè)試React Components的輸出。您還可以在給定輸出的情況下操縱，遍歷并以某種方式模擬運(yùn)行時(shí)
5、Sinon.js
獨(dú)立和測(cè)試框架無關(guān)的JavaScript測(cè)試間諜

pm install sinon

6、redux-mock-store
用于測(cè)試redux異步操作創(chuàng)建器和中間件的模擬存儲(chǔ)。模擬存儲(chǔ)將創(chuàng)建一個(gè)調(diào)度操作數(shù)組，用作測(cè)試的操作日志。

npm install redux-mock-store --save-dev

四、react動(dòng)畫

1、react-motion
它是一個(gè)react動(dòng)畫庫

npm install --save react-motion

2、react-addons-css-transition-group
react-addons-css-transition-group插件，就是利用css的transition和animation實(shí)現(xiàn)組件的進(jìn)場(chǎng)和出場(chǎng)動(dòng)畫的。ReactCSSTransitionGroup是在ReactTransitionGroup的基礎(chǔ)上進(jìn)行再封裝。

五、EJS高效的 JavaScript 模板引擎

"E" 代表 "effective"，即【高效】。EJS 是一套簡(jiǎn)單的模板語言，幫你利用普通的 JavaScript 代碼生成 HTML 頁面。EJS 沒有如何組織內(nèi)容的教條；也沒有再造一套迭代和控制流語法；有的只是普通的 JavaScript 代碼而已。

六、Express

1、Express
基于 Node.js平臺(tái)，快速、開放、極簡(jiǎn)的 Web 開發(fā)框架

npm install express --save

七、Webpack

1、webpack-dev-middleware
webpack-dev-middleware就是，生成一個(gè)與webpack的compiler綁定的中間件，然后在express啟動(dòng)的服務(wù)app中調(diào)用這個(gè)中間件。
其作用簡(jiǎn)單總結(jié)為以下三點(diǎn)：通過watch mode，監(jiān)聽資源的變更，然后自動(dòng)打包（如何實(shí)現(xiàn)，見下文詳解)、快速編譯，走內(nèi)存、返回中間件，支持express的use格式。

npm install webpack-dev-middleware --save-dev

注意：此模塊至少需要Node v6.9.0和Webpack v4.0.0，并且必須與接受快速中間件的服務(wù)器一起使用。不建議全局安裝此模塊。
2、webpack-hot-middleware
僅使用webpack-dev-middleware進(jìn)行Webpack熱重裝。這允許您在沒有webpack-dev-server的情況下將熱重新加載添加到現(xiàn)有服務(wù)器中。

npm install --save-dev webpack-hot-middleware

3、react-hot-loader
react-hot-loader是react組件的熱加載。但是webpack-dev-server已經(jīng)是熱加載，為何還要在 react 項(xiàng)目還要安裝 react-hot-loader 呢？
其實(shí)這兩者的更新是有區(qū)別的，webpack-dev-server 的熱加載是開發(fā)人員修改了代碼，代碼經(jīng)過打包，重新刷新了整個(gè)頁面。而 react-hot-loader 不會(huì)刷新整個(gè)頁面，它只替換了修改的代碼，做到了頁面的局部刷新。

npm install --save-dev react-hot-loader