1. 程式人生 > >“十步殺一人,千裏不留行” 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#開發,可能會有一些不熟悉的語法規則。別擔心,如果你看到什麽不明白的東西,就把它放到一邊。等完成了第四、五步的學習,你就能掌握這些內容了。

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的五步奪命詩