React+Redux開發實錄（二）React技術棧一覽

React+Redux開發實錄（一）搭建工程腳手架
React+Redux開發實錄（二）React技術棧一覽

React技術棧一覽

從上面搭建工程腳手架中，咱們看到了React開發技術棧。有ES六、babel、eslint、webpack、react、redux、react-router。

對React新手（有HTML、JavaScript、CSS基礎）來講，需明確掌握React和Redux相關概念。至於其餘的，瞭解就能夠。不過咱們有必要在實踐以前從總體上俯瞰一下。清楚前因後果，避免迷迷糊糊一味跟隨別人的代碼去Ctrl+C & Ctrl+V，即痛苦又容易半途而廢。

ES6

JavaScript的下一代標準，規定從此按年份發佈新版。2015年發佈的ECMAScript6.0，也叫ES2015。
實踐React以前，建議先了解下ES6的模塊化、箭頭函數、表達式解構、Promise異步編程。

完整了解ES6，推薦閱讀前端大牛Nicholas C. Zakas（尼古拉斯.澤卡斯）的《深刻理解ES6》

線上閱讀推薦：阮一峯的開源書《ECMAScript6入門》

Babel

JavaScript在不斷髮展，各類新的標準提案層出不窮，因爲瀏覽器的多樣性致使可能幾年以內都沒法普遍普及。Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉化爲幾乎全部瀏覽器都認識的ES5舊代碼，你能夠沒必要顧慮的使用ES新特性。

這裏有個Babel的REPL線上編譯器。在左側輸入箭頭函數f=>f感覺下吧。

實踐React以前，知道有這麼個東西就能夠了。Webpack會在構建項目時自動調用Babel進行轉換。

線上閱讀推薦：React技術棧之Babel

ESlint

ESLint是一個JavaScript代碼靜態檢查工具，能夠有效提升代碼質量。維持前端團隊高度一致的編碼風格。ESLint不但提供一些默認的規則，也提供用戶自定義規則去約束JavaScript風格。

ESLint是Nicholas C. Zakas（尼古拉斯.澤卡斯）創造的。前端大牛，前雅虎前端技術主管，YUI 庫的貢獻者。當年的我，憑着他的紅寶書《JavaScript高級程序設計》，再配合《CSS網站佈局實錄》，就邁入前端。他同時也是《編寫可維護的JavaScript》、《高性能JavaScript》和《深刻理解ES6》的做者。

實踐React以前，知道有這麼個東西就能夠了。項目過程當中，須要調整規則的時候，參考ESlint完整規則列表

Webpack

Webpack是新一代打包工具。現在，前端項目日漸複雜，構建系統已成爲開發過程當中不可或缺的部分，而模塊打包正是前端構建系統的核心。

實踐React以前，瞭解下webpack就能夠。經過ceate-react-app建立的腳手架，執行npm run eject彈出的webpack配置，就已經至關完美了。再集合項目，適當定製就能夠了。

線上閱讀推薦：
入門webpack
一小時包教會webpack

線上閱讀推薦：
React技術棧之Webpack環境搭建（一）手動搭建
React技術棧之Webpack環境搭建（二）不一樣環境不一樣配置
React技術棧之Webpack環境搭建（三）打包性能優化

React

React是Facebook推出的JavaScript庫。口號是「用來建立用戶界面的JavaScript庫」，因此它只是和用戶界面打交道，能夠把它當作MVC中的V（視圖）層，項目中通常再配上Redux進行數據流和狀態的管理。

實踐React以前，強烈建議熟悉下React概念。

線上閱讀推薦：
React技術棧之React（一）初識React
React技術棧之React（二）組件的prop和state
React技術棧之React（三）組件的生命週期

Redux

React的核心就是組件，它只負責view，當應用複雜程度增長時，還須要有數據流向控制、狀態管理等方案。

React推出了Flux架構及其官方實現。同時業界也推出了不少Flux的實現，其中以Redux爲翹楚，它將 Flux 與函數式編程結合一塊兒，很短期內就成爲了最熱門的前端架構。

直接使用Redux是有點煩的，所以React官方提供了react-redux庫，它對redux api進行了封裝，藉助react-redux，能夠在項目中更方便的使用Redux。

實踐React以前，必須熟悉Redux和react-redux，瞭解Flex架構更好但不是必須。

線上閱讀推薦：
Redux入門教程
React技術棧之Redux異步流
React技術棧之Redux高階運用

react-router

路由庫React-Router，是React體系的一個重要部分。它是官方維護的，事實上也是惟一可選的路由庫。它經過管理URL，實現組件的切換和狀態的變化。如今已經到了react-router4版本了，跟3版本用法有所不一樣。

實踐React以前，能夠了解下。

線上閱讀參考：
React技術棧之React-Router(這個是react-router3)

UI框架

諸如 Ant Design、Material-UI、React bootstrap、React Desktop、Amaze UI React

React+Redux開發實錄（一）搭建工程腳手架React+Redux開發實錄（二）React技術棧一覽