這段時(shí)間因?yàn)轫?xiàng)目的原因，要做web前端，趁此機(jī)會(huì)調(diào)研了一下當(dāng)前前端的技術(shù)，根據(jù)調(diào)研的結(jié)果，React毫無(wú)疑問是現(xiàn)在的NO.1，遂決定入坑學(xué)一下React。
工欲善其事必先利其器，搜集整理網(wǎng)上資料制定了一個(gè)學(xué)習(xí)React的基礎(chǔ)路線，希望能幫助自己快速的入門React。也跟大家分享一下。
文章大綱如下：
1 React學(xué)習(xí)“8”步走
2 學(xué)習(xí)資料總結(jié)
First of all
為了穩(wěn)固基礎(chǔ)，這個(gè)React學(xué)習(xí)的基礎(chǔ)路線，我們一定要逐步地來(lái)進(jìn)行學(xué)習(xí)。
不要想著通過接觸 React 來(lái)將 ES6 + Webpack + Babel + React + Routing + AJAX 這些知識(shí)一次性學(xué)好。
欲速則不達(dá)！
在文章的最后，我將一些相應(yīng)的資料也做了相應(yīng)的羅列，大家可以根據(jù)自己的需求查看、下載。
1 React學(xué)習(xí)“8”步走
第0步：JavaScript
在學(xué)習(xí)之前的你，理應(yīng)對(duì) JavaScript 有所了解，或至少是 ES5 標(biāo)準(zhǔn)下的 JavaScript?？扇袅私馍跎?，那么，你就應(yīng)該停下手頭上的工作，學(xué)習(xí)好該基礎(chǔ)部分后，才可邁步前行。
可倘若早已熟知 ES6 所帶來(lái)的新特性，那么請(qǐng)繼續(xù)。因?yàn)槿缒闼?，React 的 API 接口在 ES5 和 ES6 兩標(biāo)準(zhǔn)間存在著較大的差異性。所以對(duì)于你來(lái)說(shuō)，熟悉兩種標(biāo)準(zhǔn)其特性的不同至關(guān)重要。盡管發(fā)生了異常，你也可以通過兩種標(biāo)準(zhǔn)之間的轉(zhuǎn)換，尋找出廣泛有效的答案。
第0.5步：NPM
NPM 在 JavaScript 世界中，可謂是軟件管理方的王者。然而，在這里你卻并不需要學(xué)習(xí)太多關(guān)于 NPM 自身的東西。只要在安裝好后連同 Node.js，學(xué)習(xí)如何使用其安裝軟件即可。
npm install
第1步：React
學(xué)習(xí)一個(gè)新的編程技術(shù)，我們往往會(huì)從熟悉的Hello World教程開始。首先，我們可以通過使用 React 官方教程所展示的原生 HTML 文件來(lái)實(shí)現(xiàn)，而該文件包含有一些 script 標(biāo)簽。其次，我們還可以通過使用像 React Heatpack 這樣的工具來(lái)快速上手。
第2步：構(gòu)建后摒棄
一旦你完成了 “Hello World” 的基礎(chǔ)課程，你將如何去學(xué)習(xí) ”think in React” 的課程。
請(qǐng)嘗試去構(gòu)建一些官方文檔列表中所展示的項(xiàng)目（TODOs、beers、movies），然后，借此學(xué)會(huì)數(shù)據(jù)流（data flow）的工作原理。
當(dāng)然，你也可以把一些已有的大型 UI 項(xiàng)目（Twitter、Reddit、Hacker News等）分割成一小塊來(lái)構(gòu)建 —— 即把其瓜分成組件（components），并使用靜態(tài)的數(shù)據(jù)去進(jìn)行構(gòu)建。
總的來(lái)說(shuō)，我們需要構(gòu)建的，理應(yīng)是一些小型且可被摒棄的應(yīng)用程序項(xiàng)目。這些項(xiàng)目必須是可摒棄的。否則，你將深陷于一些不為重要的東西，如可維護(hù)性和代碼結(jié)構(gòu)等。
第3步：Webpack
構(gòu)建工具是學(xué)習(xí)過程中的一個(gè)主要的難點(diǎn)。搭建 Webpack 的環(huán)境會(huì)讓你感覺是一件繁雜的工作，而且，完全不同于 UI 代碼的書寫。這就是為什么我要將 Webpack 放在了整個(gè)學(xué)習(xí)路線的第三步，而不是第零步。
在這里，推薦一篇名為《React+Webpack快速上手指南》的文章，作為對(duì) Webpack 的簡(jiǎn)介。
一旦你清楚 Webpack 所負(fù)責(zé)的工作（打包生成各種的文件，而不僅僅是 JS 文件） —— 以及其中的工作原理（適用于各種文件類型的加載器），那么，Webpack 對(duì)于你來(lái)說(shuō)將會(huì)是一個(gè)更為欣喜的部分。
第4步：ES6
如今，進(jìn)入了整個(gè)路線的第四步。上述的所有將會(huì)作為下面的鋪墊。之前，在學(xué)習(xí) ES6 過程中，所學(xué)到的部分也將會(huì)讓你寫出更為利落簡(jiǎn)潔的代碼 —— 以及性能更高的代碼?；叵肫鹨婚_始那時(shí)候，某些問題本不應(yīng)卡住在那 —— 但現(xiàn)在的你，已然清楚知道為啥 ES6 能完美地融合在其中。
在 ES6中，你應(yīng)該學(xué)習(xí)一些常用的部分：箭頭函數(shù)（arrow functions）、let/const、類（classes）、析構(gòu)（destructuring）和 import
第5步：Router
有些人會(huì)把 React Router 和 Redux 這兩個(gè)概念混為一談 —— 但是，它們之間并沒有任何的關(guān)系或依賴。因此，你可以（也理應(yīng)）在深入 Redux 之前學(xué)習(xí)如何去使用 React Router。
由于在之前“think in React”的教程中，積累了堅(jiān)實(shí)的基礎(chǔ)。因此，相比于第一天學(xué)習(xí) React Router，我們此時(shí)更能從基于組件（component-based）的構(gòu)建方式中，領(lǐng)悟出更多的精髓。
下面幾個(gè)鏈接可幫助你基本掌握Router
初入react-router新手入門
react-router學(xué)習(xí)筆記之入門
React Router的一個(gè)完整示例
React路由管理 —— React Router 總結(jié)
React-Router 中文簡(jiǎn)明教程
第6步：Redux
React 只是 DOM 的一個(gè)抽象層，并不是 Web 應(yīng)用的完整解決方案。
有兩個(gè)方面，它沒涉及。
- 代碼結(jié)構(gòu)
- 組件之間的通信
對(duì)于大型的復(fù)雜應(yīng)用來(lái)說(shuō)，這兩方面恰恰是最關(guān)鍵的。因此，只用 React 沒法寫大型應(yīng)用。
為了解決這個(gè)問題，2014年 Facebook 提出了 Flux 架構(gòu)的概念，引發(fā)了很多的實(shí)現(xiàn)。2015年，Redux 出現(xiàn)，將 Flux 與函數(shù)式編程結(jié)合一起，很短時(shí)間內(nèi)就成為了最熱門的前端架構(gòu)。
構(gòu)建一次性的應(yīng)用程序。通過些許的 Redux 經(jīng)驗(yàn)，去逐漸理解其背后的工作原理。
2 學(xué)習(xí)資料總結(jié)
除了上面的資料之外，我還準(zhǔn)備了一些較為完整的資料，由淺及深的介紹了React的知識(shí)，認(rèn)真仔細(xì)的看完這些書籍，并實(shí)踐其中的代碼，相信一定能夠掌握React的開發(fā)。
書籍篇
學(xué)習(xí)書籍是最高效的方法，能迅速帶你了解某個(gè)知識(shí)的整個(gè)框架結(jié)構(gòu)，由表及里。
深入REACT技術(shù)棧.pdf
react快速上手開發(fā)完整版.pdf
深入淺出React和Redux.pdf
網(wǎng)站篇
網(wǎng)站中總結(jié)的知識(shí)，是對(duì)某類知識(shí)的一個(gè)細(xì)化，更加專注于某類問題的解決方法
React官網(wǎng)的中文版（重要資料）
React.js 小書
視頻篇
慕課網(wǎng)視頻
51CTO視頻
百度網(wǎng)盤視頻 密碼：s0fc
P.S. 上面的書籍篇、網(wǎng)站篇和視頻篇部分努力學(xué)習(xí)好之后，也基本算是對(duì)React入門了，后面就是通過項(xiàng)目去不斷加深自己的理解。
祝大家學(xué)有所成?。?！
