Webpack:%20最著名的模塊打包工具之一,有不少優(yōu)秀的模板配置奧,譬如Webpack2-React-Redux-Boilerplate。
Atom,%20VSCode,%20or%20WebStorm%20+%20vim:%20你需要為自己選擇合適的編輯器來輔助你快速開發(fā)。Atom與VSCode都是非常優(yōu)秀的JavaScript編輯器,WebStorm也不錯但是它是收費版本。如果你打算直接在服務端開發(fā)的話,Vim是個不錯的選擇。
ESLint:%20ESLint能夠幫助開發(fā)者更快地發(fā)現(xiàn)語法錯誤與樣式問題,在Code%20Review與TDD之后這是個不錯的減少Bug的方法。
Tern.js:%20基于編輯器插件的標準JavaScript類型推導工具,不需要任何編譯步驟或者注解支持。
Yarn*:%20類似于NPM的工具,不過安裝起來更為可靠快速。
TypeScript*:%20JavaScript的靜態(tài)類型支持,不過需要特別注意的是,除非你在學習Angular%202,不然我覺得你如果要選用Angular%202的話還是要慎重考慮。我個人很喜歡TypeScript,也很欽佩他們團隊的優(yōu)秀工作,不過任然有很多的權衡,可以參閱%20“The%20Shocking%20Secret%20About%20Static%20Types”%20&%20“You%20Might%20Not%20Need%20TypeScript”.
Flow*:%20JavaScript靜態(tài)類型檢測工具,可以閱讀%20“TypeScript%20vs%20Flow”%20來對于這二者有個大概的了解,如果你打算Flow的話也是推薦我的編輯器%20Nuclide。
React
React%20是個專注于構建用戶視圖層的JavaScript庫,其基于單向數(shù)據(jù)流的設計思想,也就意味著:
React%20以Props的形式將參數(shù)傳入Components,并且在數(shù)據(jù)發(fā)生變化的時候選擇性重渲染部分DOM。在重渲染階段發(fā)生的數(shù)據(jù)變化并不會立刻觸發(fā)重渲染,而是在下一個繪制階段的時候才會進行重渲染。
渲染完畢之后,就進入了事件處理,React使用特殊的合成事件幫助開發(fā)者監(jiān)聽與響應事件,將所有的節(jié)點上的事件交托單一事件監(jiān)聽器處理以獲得更好的性能體驗。你可以在這些事件的監(jiān)聽函數(shù)中通過外部傳入的回調(diào)重新設置Props或者直接修改內(nèi)部State。
對于數(shù)據(jù)的任何變化都會重復步驟1。
這種單向數(shù)據(jù)流與當時以Angular%201%20/%20Knockout為代表的雙向數(shù)據(jù)綁定形成對比,雙向數(shù)據(jù)綁定中如果發(fā)現(xiàn)綁定的數(shù)據(jù)發(fā)生變化則會立刻觸發(fā)重渲染,而無論當前是否處于渲染流程中,這一點也就導致了Reflows與Repaints的性能表現(xiàn)非常差。React并沒有預置專門的數(shù)據(jù)管理系統(tǒng),不過官方推薦基于Flux的解決方案。React%20的單向數(shù)據(jù)流的概念借鑒了很多函數(shù)式編程的設計思想,并且對于不可變數(shù)據(jù)結構的應用也在很大程度上改變了我們對前端框架的認識。如果你希望了解更多關于React與Flux架構的知識,推薦閱讀%20“The%20Best%20Way%20to%20Learn%20to%20Code%20is%20to%20Code:%20Learn%20App%20Architecture%20by%20Building%20Apps”。
create-react-app*:%20官方出品的快速腳手架搭建工具。
react-router*:%20方便的React路由解決方案。
Next.js*:%20非常簡單的通用React應用開發(fā)框架。
velocity-react*:%20非常不錯的React動畫輔助庫。
Redux
Redux%20為應用提供了事務式的,確定性的狀態(tài)管理支持。在Redux中,我們僅可以通過Action來修改當前的應用狀態(tài)。如果你希望深入了解為啥這么做,可以參閱%20“10%20Tips%20for%20Better%20Redux%20Architecture.”%20或者跟著%20Dan%20Abramov的官方課程:
“Getting%20Started%20with%20Redux”
“Building%20React%20Applications%20with%20Idiomatic%20Redux”
實際上即使你不使用Redux,也很推薦學習Redux的設計思想,它可以給你很多關于狀態(tài)管理的最佳實踐,告訴你純函數(shù)的價值所在,以及告訴你何謂Reducers,何謂General-Purpose函數(shù)。在Redux的工程實踐中,對于異步Action的處理也是值得討論的:
redux-saga*:%20A%20synchronous-style%20side-effect%20library%20for%20Redux.%20Use%20this%20to%20manage%20I/O%20(such%20as%20handling%20network%20requests).