轉自：??https://www.jianshu.com/p/de421e0db710?

?

這段時間因為項目的原因，要做web前端，趁此機會調研了一下當前前端的技術，根據調研的結果，React毫無疑問是現在的NO.1，遂決定入坑學一下React。

工欲善其事必先利其器，搜集整理網上資料制定了一個學習React的基礎路線，希望能幫助自己快速的入門React。也跟大家分享一下。

文章大綱如下：

1 React學習“8”步走
2 學習資料總結

First of all

為了穩固基礎，這個React學習的基礎路線，我們一定要逐步地來進行學習。

不要想著通過接觸 React 來將 ES6 + Webpack + Babel + React + Routing + AJAX 這些知識一次性學好。

欲速則不達！

在文章的最后，我將一些相應的資料也做了相應的羅列，大家可以根據自己的需求查看、下載。

1 React學習“8”步走

第0步：JavaScript

在學習之前的你，理應對 JavaScript 有所了解，或至少是 ES5 標準下的 JavaScript。可若了解甚少，那么，你就應該停下手頭上的工作，學習好該基礎部分后，才可邁步前行。

可倘若早已熟知 ES6 所帶來的新特性，那么請繼續。因為如你所料，React 的 API 接口在 ES5 和 ES6 兩標準間存在著較大的差異性。所以對于你來說，熟悉兩種標準其特性的不同至關重要。盡管發生了異常，你也可以通過兩種標準之間的轉換，尋找出廣泛有效的答案。

第0.5步：NPM

NPM 在 JavaScript 世界中，可謂是軟件管理方的王者。然而，在這里你卻并不需要學習太多關于 NPM 自身的東西。只要在安裝好后連同 Node.js，學習如何使用其安裝軟件即可。

npm install

第1步：React

學習一個新的編程技術，我們往往會從熟悉的Hello World教程開始。首先，我們可以通過使用 React 官方教程所展示的原生 HTML 文件來實現，而該文件包含有一些 script 標簽。其次，我們還可以通過使用像 React Heatpack 這樣的工具來快速上手。

第2步：構建后摒棄

一旦你完成了 “Hello World” 的基礎課程，你將如何去學習 ”think in React” 的課程。

請嘗試去構建一些官方文檔列表中所展示的項目（TODOs、beers、movies），然后，借此學會數據流（data flow）的工作原理。

當然，你也可以把一些已有的大型 UI 項目（Twitter、Reddit、Hacker News等）分割成一小塊來構建 —— 即把其瓜分成組件（components），并使用靜態的數據去進行構建。

總的來說，我們需要構建的，理應是一些小型且可被摒棄的應用程序項目。這些項目必須是可摒棄的。否則，你將深陷于一些不為重要的東西，如可維護性和代碼結構等。

第3步：Webpack

構建工具是學習過程中的一個主要的難點。搭建 Webpack 的環境會讓你感覺是一件繁雜的工作，而且，完全不同于 UI 代碼的書寫。這就是為什么我要將 Webpack 放在了整個學習路線的第三步，而不是第零步。

在這里，推薦一篇名為《React+Webpack快速上手指南》的文章，作為對 Webpack 的簡介。

一旦你清楚 Webpack 所負責的工作（打包生成各種的文件，而不僅僅是 JS 文件） —— 以及其中的工作原理（適用于各種文件類型的加載器），那么，Webpack 對于你來說將會是一個更為欣喜的部分。

第4步：ES6

如今，進入了整個路線的第四步。上述的所有將會作為下面的鋪墊。之前，在學習 ES6 過程中，所學到的部分也將會讓你寫出更為利落簡潔的代碼 —— 以及性能更高的代碼。回想起一開始那時候，某些問題本不應卡住在那 —— 但現在的你，已然清楚知道為啥 ES6 能完美地融合在其中。

在 ES6中，你應該學習一些常用的部分：箭頭函數（arrow functions）、let/const、類（classes）、析構（destructuring）和 import

第5步：Router

有些人會把 React Router 和 Redux 這兩個概念混為一談 —— 但是，它們之間并沒有任何的關系或依賴。因此，你可以（也理應）在深入 Redux 之前學習如何去使用 React Router。

由于在之前“think in React”的教程中，積累了堅實的基礎。因此，相比于第一天學習 React Router，我們此時更能從基于組件（component-based）的構建方式中，領悟出更多的精髓。

下面幾個鏈接可幫助你基本掌握Router
初入react-router新手入門
react-router學習筆記之入門
React Router的一個完整示例
React路由管理 —— React Router 總結
React-Router 中文簡明教程

第6步：Redux

React 只是 DOM 的一個抽象層，并不是 Web 應用的完整解決方案。
有兩個方面，它沒涉及。

• 代碼結構
• 組件之間的通信

對于大型的復雜應用來說，這兩方面恰恰是最關鍵的。因此，只用 React 沒法寫大型應用。

為了解決這個問題，2014年 Facebook 提出了 Flux 架構的概念，引發了很多的實現。2015年，Redux 出現，將 Flux 與函數式編程結合一起，很短時間內就成為了最熱門的前端架構。

構建一次性的應用程序。通過些許的 Redux 經驗，去逐漸理解其背后的工作原理。

Redux 中文文檔
Redux 入門教程

2 學習資料總結

除了上面的資料之外，我還準備了一些較為完整的資料，由淺及深的介紹了React的知識，認真仔細的看完這些書籍，并實踐其中的代碼，相信一定能夠掌握React的開發。

書籍篇

學習書籍是最高效的方法，能迅速帶你了解某個知識的整個框架結構，由表及里。

深入REACT技術棧.pdf
react快速上手開發完整版.pdf
深入淺出React和Redux.pdf

網站篇

網站中總結的知識，是對某類知識的一個細化，更加專注于某類問題的解決方法
React官網的中文版（重要資料）
React.js 小書

視頻篇

慕課網視頻
51CTO視頻
百度網盤視頻 密碼：s0fc

P.S. 上面的書籍篇、網站篇和視頻篇部分努力學習好之后，也基本算是對React入門了，后面就是通過項目去不斷加深自己的理解。

image.png

祝大家學有所成！！！

作者：艾剪疏
鏈接：https://www.jianshu.com/p/de421e0db710
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

總結

以上是生活随笔為你收集整理的React学习途径和资料分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。