[譯]怎樣學習React—從初級到高階路線圖
ofollow,noindex">原文戳這裡
嘿，夥伴們！
這個指南是為初學React的朋友寫的，在每個部分，我用心收集了最好的視訊和文章，讓我們學習起來更加容易。
注意：我跟下面提到的網站沒有任何關係，純粹是我個人的想法
預備知識
- 基本瞭解HTML，CSS和JavaScript
- 基本瞭解ES6特性，這裡有篇文章介紹ES6特性，從一開始，你至少應該知道以下特性：1.Let; 2.Const; 3.Arrow Functions; 4.Import and Exports; 5.Classes
- npm的基本使用
準備開始
你可以使用線上的程式碼編輯器去練習，或者你可以使用Create React App
我分別在JSFiddle和Codepen上構建了一個開發環境
為了掌握所有React的基礎內容，你可以從下面的教程開始學習：
React的React official documentation
Kent C. Dodds的Beginners guide to React
Samer Buna的Fundamentals of React
現在你應該瞭解了React的基本內容，這足夠我們使用React開發一個簡單的Web應用
那麼現在可以看一下React的官方教程：React Official tutorial ，這是一篇很好的文章，它覆蓋了React的基礎內容，並且非常清楚的講解了特定的一些主題
最後並同等重要的是，學習怎樣讓React應用連線API介面：
Ethan Jarrell的Fetching API with React.js
開始寫一些專案
- 簡單的To-Do應用
- 簡單的計算器應用
- 構建一個購物車
- 使用Github的API展示Github的使用者統計資料
React Router
React Router幫助你的單頁面應用建立路由，它非常強大並且容易使用。
馬上開始：
Paul Sherman的React Router tutorial
Learn Code Academy的React Router and intro to SPA
Scotch.io的Routing React apps
這些文章足夠你開始使用React路由
專案
- 一個簡單的CRUD應用
- 克隆Hacker News
如果你確實對學習Router非常感興趣，可以看看下面的教程：
React Training的React Router完全教程
Webpack
Webpack是一個著名的JavaScript的模組打包器，它幫助你的專案以靜態檔案維護依賴關係，讓開發者不必做這件事
和Webpack一起的還有載入器，載入器可以幫助專案執行特定的任務
想要更多的學習Webpack，跟隨下面的教程：
Andrew Ray的When and why to use Webpack
Learn Code Academy的Webpack tutorial
要使用Webpack建立本地React環境，你可以看一下下面的Github庫：
Hanif Roshan的React SPA template
上面的教程足夠讓你開始使用Webpack，然後想要更加深入的瞭解，可以看下下面的指南：
SurviveJS的Webpack introduction
伺服器渲染
伺服器渲染是React的最酷的特性之一，它可以被任何後端技術使用
React的伺服器渲染（SSR）幫助你在伺服器建立元件，並且在瀏覽器裡渲染成HTML，當所有的JavaScript模組在瀏覽器裡下載完成之後，React開始登場。簡單！
首先，看下React-DOM API:
React的React-DOM API
想要更深入瞭解，可以學習以下教程：
Tyler McGinnis的React server rendering
Roilan Salinas的React router server rendering
Dennis Brotzky的React Server side rendering guide
Redux
Redux是為維護應用程式狀態而開發的JavaScript庫。在構建複雜的應用程式時，會將增加管理元件間狀態的開銷。 Redux可幫助您將所有狀態儲存在一個源中。當然，React與Redux配合得很好！
開始：
Learn Code Academy的Redux tutorial
Valentino Gagliardi的Redux tutorial for beginners
CSS Tricks的React Redux
這些教程足以開始使用Redux。但是，我也無法抗拒提到下面的教程。它很值得：
Dan Abramov的Getting started with Redux