以下是如何學習React的一個五步計劃。每一步都盡可能向你指出免費的資源。

第一步：“大河之劍天上來” React文檔+Code Sandbox

是的，你應該從閱讀React文檔開始學習。文檔寫得很好，讀完它你將理解React的基本術語和概念。上面分享的鏈接指向文檔的第一部分，安裝。這兒有一個CodePen的鏈接可以幫助你上手。

另一個我更喜歡的學習資源是Code Sandbox。我覺得它提供了基礎React應用的更好感覺。你可以使用它來實踐文檔裏的內容。

在React文檔的Create a New APP標簽下面有另外一個可做選擇的學習鏈接，可以參照這個Create React App鏈接裏的內容在你本地機器上構建開發環境。Create React App是一個很好的工具，馬上使用起來也許會對你有所幫助。每個人都有自己最有效的學習方法，你可以根據自己需求從以上學習資源中選擇。

我個人覺得，在你剛開始學習的時候，Create React APP裏的內容會加重精神負擔。我的建議是在初學階段使用Code Sandbox或者Code Pen，註重基本概念而不是開發環境。你可以隨時回過頭來構建環境。

關鍵點: 我建議閱讀React文檔的快速入門和高級指南。我知道並不是每個人都喜歡閱讀文檔，尤其是那些視覺或聽覺學習者。如果你在努力克服閱讀文檔的困難，那麽你需要關註的重點內容是快速入門裏的如下部分：

JSX簡介
元素渲染
組件&Props
State&生命周期（極其重要！）
事件處理
組合vs繼承
React理念
重申一下，我建議完整閱讀這兩部分內容，但學習的最低限度是以上列出的重點內容。重點內容包含了你需要的基本概念。

第二步：“醉裏，挑燈看劍” React基礎課程
經過第一步學習，你應該對React是什麽有所了解。也許並沒有清楚所有細節，但你應該開始在腦海中形成一些概念。下一步是React訓練的基礎課程。它是很好的免費課程，作者是Tyler McGinnis，他不但知識淵博，而且他的授課易於理解。

為什麽推薦這門課程？如果你是一個視覺或聽覺學習者，這個課程將對你有所幫助。它包含了構建項目需要的基礎和要點，像webpack和獲取遠程數據。

在課程結束時，你可以掌握構建一個基本的React應用所需的內容。根據你學習React的目標，你甚至有可能在完成課程時學到了你需要的所有信息。而你們中的大多數人，那些想學習React來構建客戶端項目的人，需要繼續學習下去。

更新：不可思議的是，在本篇文章發表的同一天，這個課程開始收費了。我通過聯系Tyler得知他發起了一項新事業，因此不能再免費提供該課程。他新網站每月訂閱費用是20美元，如果按年訂閱更便宜一些。即便如此，我依然推薦該課程作為第二步學習的內容，原因如下：

課程質量高
沒有可與該課程媲美的免費資源（但如果你負擔不起這門課程，我稍後會給出兩個替代資源）
它是地道的React
還記得文章開頭我提到的掙紮在學習React道路上的開發團隊嗎？他們很難找到指引"正確"做事方法的資源。Tyler指出了正確的方法。

如果這門課程不在你的預算之內，這裏有兩個免費的替代資源：

egghead.io上的React基礎 ，作者是Joe Maddalone
YouTube上的React JS 教程（學習前8章，暫時先略過Flux這部分），作者是LearnCode.academy
這兩個並不能完全代替Tyler課程，但他們能讓你學到80%的內容。

關鍵點: 通過這些課程，你需要學習這些內容：

加深理解React文檔裏的原理
學習React項目構建工具，特別是webpack
無狀態的功能組件
路由（如何從一個頁面導航到下一個頁面）
獲取異步數據
另一個選擇
關於Wes Bos創作的課程我只聽說過各種優點。如果你預算充足，可以考慮他的React Beginners課程。這個課程價格不便宜，根據不同的選項，需要花費89美金-127美金。如果你老板付錢，這本書也許會有所幫助。為了了解他的教學方式，可以嘗試一下他的免費課程，JavaScript 30

第三步：“身作方舟，魂渡彼岸” 學習ReactBits
下一步是學習ReactBits，這是WalmartLabs的Vasa提供的非常好的學習資源。它並不是一本書，更像是以一種非常有用的大綱格式呈現的一系列小建議，可以用來填補其他教程留下的知識缺口。

關鍵點: 這個文檔非常有用。而且它是個定期更新的資源，你可以隨著React的不斷發展時再次訪問。我再次建議閱讀所有的內容，但如果你難以做到，這兒是需要關註的重點：

設計模式和技術（最重要的建議應該在這裏）
反面模式（別的不說，一定要閱讀這一部分）
性能建議
ReactBits的另一個優點是它的每個建議都給出了引用，因此你可以對相應主題做出更深入的研究-至少可以讓你理解作者為什麽認為給出的建議是最佳實踐。

文章插曲

到目前為止，我們已經給出了一些教授如何創建簡單應用的資源。但在繼續學習之前，我們需要停下來思考一下在一個React應用變得更復雜的時候會發生什麽。隨著React應用的擴展，會出現一些常見問題。例如，如何在多個組件之間共享狀態？在添加了功能之後，如何清除已經分散在整個應用程序中的API調用？

Facebook給出了這些問題的答案-Flux架構。在Redux面世一段時間之後，Dan Abramov創建了Flux的一個實現叫做Redux。它在React社區和其他領域都有很大的影響力。Facebook很喜歡Dan的工作，聘請他成為React團隊的一員。

我推薦你學習Redux，但你應該知道還有其他的選擇，最著名的就是MobX。在本文我不會評述Redux vs. MobX的優缺點。我只給出普遍共識是MobX更易於學習，但是Redux更適用於大型項目。

Redux被為非常適合大型項目的原因之一在於，Redux就像React本身，而不僅僅是被宣稱的簡單的庫。它也是一種架構模式，可以為你的應用帶來很多可預見性。對於有很多靈活組件（和開發人員）的大型項目來說，這是一項巨大的資產。

Redux最後值得註意的一點是，它也一個非常強大的生態系統。Redux支持中間件，有大量的庫可用來添加調試、數據處理、用戶瀏覽、認證、路由等等功能。

我推薦學習Redux。如果你研究了一下覺得不適合你，那麽MobX也許會更合適。這些只是工具，使用最能幫助你的。

我推薦觀看Preethi Kasireddy 在React2017大會上的一個演講，主題是Redux vs. MobX，你可以從中知道他們各自的優缺點。

最後一點…… 如果Redux或MobX對你的應用來說太重了，考慮一下容器組件模式。它可以通過使邏輯和表現分離來優化性能。它可以幫助查看API調用和其他邏輯所在的位置，可能包含你改進應用所需要的全部內容。

第四步：“並非幸存者，而是贏家” Redux文檔 + Redux視頻系列
Redux的文檔很好，你應該從它開始學習。有一點需要註意的是，Redux是函數式編程風格，如果你之前是Java或C#開發，可能會有一些不熟悉的語法規則。別擔心，如果你看到什麽不明白的東西，就把它放到一邊。等完成了第四、五步的學習，你就能掌握這些內容了。

Dan Abramov有一系列學習視頻叫做Redux入門。他們可以在Egghead.io上免費觀看，是很好的學習資源。我的同事認為這個視頻使得React文檔易於理解。如果你更擅長從視頻教程裏學習，可以從這個視頻開始學習，但最後一定要看文檔內容。文檔裏有一些可以幫助你的只是在視頻裏是省略掉的。

關鍵點: 你不需要精通以下內容，但是應該對這些Redux的術語和概念有個基本了解：

Redux三原則
Actions
Reducers
數據流
搭配 React
異步 actions
異步數據流
中間件
如果你完成這些資源的學習後，感到稍微有些了解，那麽你已步入正軌。Redux開始學習的時候是一件既容易又困難的事情。容易的是理解每個獨立的概念。困難的是把每一部分綜合起來理解。下一步的學習內容會幫助你進行綜合理解。

第五步-：“旅途，永無止境” 完整的Redux書籍 + Redux視頻系列II
有一本關於Redux非常好的免費書籍，Redux全解。這是一本由開發過一系列React應用的開發人員寫的書。它會幫助你學習如何構架自己的應用程序，並能深入理解前面幾步提到的概念。它也能幫助你理解函數式編程的基本概念，以及更容易地使用Redux。

請註意，這本書在LeanPub網站上的建議價格是32美元，但是你可以免費得到它。如果你有足夠的錢，建議付費。作者做得很好，值得這筆錢。

下一個資源是來自Dan Abramov的第二個視頻教程-用Idiomatic Redux開發React應用程序。這個視頻和前面的書有重疊的部分。你可以根據自己的學習時間和學習風格選擇學習哪個資源。如果能夠做到的話，最好兩個都學。

另一個選擇有一本價格39美元的書叫FullStackReact。如果想要全套示例代碼和三小時的視頻教程，需要79美元。我沒有讀過這本書，但是這本書的作者之一是Tyler McGinnis。我在第二步學習內容中推薦過他。

如果你資金充裕的話，這本書或許值得一讀。關於本書我持謹慎態度的部分是它側重於GraphQL和Relay。這兩項技術-尤其是GraphQL-很有意思。他們值得學習。但是，如果你將使用REST API來開發APP，可能就要推遲購買了。

關鍵點: 恭喜-這是最後一步了！在這一步你應該：

加深理解Redux文檔/第一個視頻裏的概念
熟知基本的函數式編程概念
熟知創建和編寫Redux中間件
熟知如何構建一個React—+Redux的應用
當然，說到軟件，我們的學習永不會停……

其他事項

學習如何構建JS應用很難，尤其是當你要構建企業級軟件的時候。無論你是使用React，Angular，還是其他的框架或者庫都是如此。不過，如果你已經完整學習了以上五步，這大概需要專心學習一個星期的時間，你就掌握了構建應用的基本工具。

我還想分享一些React生態系統的其他內容，這些內容可以作為今後學習的主題。我不會詳細介紹這些內容，但要註意，根據你自己項目的情況，你早晚會遇到這些問題。

Webpack

Webpack是React應用的重要打包工具。它在React基礎課程中已經講過，但你還需要深入了解某些知識點。你可以找一些其他的學習資料，但是當你遇到困難時，可能很難找到相應例子。我推薦Emil Oberg做的一個很好的免費演講，它包含一個鏈接，裏面有視頻中提到的代碼。

另一個很好的但收費的資源是Stephen Grider的Webpack 2 the Complete Developer’s Guide。這是一個很好的課程，在Udemy上賣10-75美元。Udemy經常提供課程折扣，你應該能夠以合適的價格買下這個課程。

服務器渲染

大多數JS框架不直接支持服務器渲染。服務器渲染的app通常被叫做isomorphic或通用應用程序。在Lullabot，我們使用React開發很多網站，這使得服務端渲染至關重要。如果你不熟悉這個問題，大致可以理解為，服務器在給瀏覽器發送頁面之前，會在服務器上渲染構建最初的頁面。這麽做有很重要的兩點原因：

第一，搜索引擎不會渲染JS。如果沒有在服務器端渲染好頁面，通常會嚴重影響你的搜索引擎優化。Meta標簽和正文內容可能會丟失。如果你想讓自己的應用出現在搜索結果的前面，這會有不好的影響。

第二，服務器渲染會提升APP性能。如果你已經在服務器端完成了初始渲染，那麽頁面將加載渲染好的初始部分內容，其余部分會在後臺加載。在沒有服務器渲染的情況下，所有的JS必須全被加載到瀏覽器，然後才渲染。這樣頁面加載會慢一些。

關於利用Redux進行服務器渲染，這些文檔可以拿來作為良好的開端。另一個很有用的免費資源是Emil Ong在Hacker Noon上的帖子。當我第一次知道服務器渲染的時候，我從很多不同的渠道進行學習。有一本可以幫助我們的書是Konstantin Tarkus的用JS同構應用開發。這本書的Kindle版價格大概是32美元。

如果你需要瀏覽器渲染而且覺得有太多需要學習的東西，你可以考慮Next.js,我等下會簡短得介紹一下它。

Redux Saga

Redux Saga是Redux的中間件。它在你的應用程序中充當一個副作用的位置。副作用一般是異步的，像獲取數據和保存數據，它是函數式編程中的一個重要概念，也是React社區中很重要的內容。

使用Redux Saga這種中間件可以幫助應用程序的架構。它無疑會簡化編寫測試（參照Jest和Enzyme來學習如何測試React應用程序）。Redux Saga的缺點是增加了很多加載內容，尤其是當你不熟悉ES6生成器的時候。但從長遠來看，還是值得學習的。一旦掌握了之前五個步驟裏的內容，你就可以考慮學習Redux Saga和其他Redux中間件。

Reselect

Reselect是Redux的選擇器庫。它可以通過計算衍生數據來提高性能。例如，如果在Redux中有一個需要計算的項目，除非參數發生變化，它是不會重新計算的，這可以用來防止不必要的重新渲染。這對應用中的購物車、喜歡的內容、得分等部分都很有用。

App Scaffolders

在文字的開頭部分，我有提到Create React App。它是一個應用腳手架。它可以幫助你很快地構建一個應用。這部分內容留給你自己閱讀，但是它有個潛在缺點是沒有服務器渲染。如果你需要這個功能，就要自己添加。

“十步殺一人，千裏不留行” React的五步奪命詩