[前端工坊]如何學習React:一個五步計劃

文章來自微信公衆號：前端工坊(fe_workshop)，不按期更新有趣、好玩的前端相關原創技術文章。若是喜歡，請關注公衆號：前端工坊
版權歸公衆號全部，轉載請註明出處。
譯者:田騰

我最近查看郵箱的時候注意到一封郵件。郵件內容是關於.NET的開發人員學習Node.js和React構建產品。郵件中的如下內容吸引了個人注意：

React的特性和咱們以前用到的技術徹底不一樣。咱們一直在和它戰鬥。其中的一個難點是找到優質的學習資源。網上有太多不一樣的文章和教程，其中一些內容已經沒有學習價值。React文檔是不錯的，可是咱們不想在它上面花太多時間，咱們但願能有快速入手的資料。
在過去的兩年多的時間裏，我一直致力於React項目的開發，有着豐富的React學習經驗。在這個過程當中，我造成了如何學習React的一些建議，包括學習資源、學習順序以及學習要點。

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

本文最終會以「其餘須要考慮的事項」一節做爲結尾。你可能常常聽人說React只是一個視圖庫。雖然在某種程度上是這樣的，但它更是一個龐大而充滿活力的生態系統。最後一節將介紹五個主要步驟中沒有涉及的重要事項。這些東西對於構建一個項目並非必須的，但當你深刻研究如何利用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#開發，可能會有一些不熟悉的語法規則。別擔憂，若是你看到什麼不明白的東西，就把它放到一邊。等完成了第4、五步的學習，你就能掌握這些內容了。

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。它是一個應用腳手架。它能夠幫助你很快地構建一個應用。這部份內容留給你本身閱讀，可是它有個潛在缺點是沒有服務器渲染。若是你須要這個功能，就要本身添加。

另外一個選擇是Zeit的Next.js。我沒有用過它，但它看起來頗有趣。也許它能夠幫助你開始。它能夠說是（React）框架內的一個框架。它作了不少以至於自成體系，但好在它有很好的文檔。我關注的是它的「黑盒」特性。在我確信能夠在項目上使用它以前，我須要瞭解它的內部狀況。我很樂意聽取任何有經驗人的見解。

最後……

感謝看到這裏。這是一篇很長的文章。我但願本身寫的文章是「如何經過簡單五步快速學習React」，但本文不是這樣的。有不少須要學習的內容，而且學習永不會中止。我喜歡軟件開發，但有時也會有壓力。

若是你在作一個React項目，感到深深的無助，堅持住。React社區是一個大規模，活躍並樂於助人的社區。React比其餘JS框架更有助於你的職業發展。堅持下去，樂在其中。

原文做者：John Hannah
原文地址：https://www.lullabot.com/arti...