如何入門 React？你應該跟著這八步走

• 原文鏈接 : Your Timeline for Learning React

• 原文作者 : DAVE CEDDIA

• 譯文出自 : 掘金翻譯計劃

• 譯者 : aleen42

• 校對者: llp0574, jiaowoyongqi

• 本譯文已得到原作者 DAVE CEDDIA 授權

以下所談及的，就是為你定製的 React 學習路線。

為了能穩固基礎，我們一定要逐步地來進行學習。

倘若你正在建造一間房子，那麼為了能快點完成，你是否會跳過建造過程中的部分步驟？如在具體建設前先鋪設好部分石頭？或直接在一塊裸露的土地上先建立起牆面？

又假如你是在堆砌一個結婚蛋糕：能因為上半部分裝飾起來更有趣，而直接忽略了下半部分？

不行嗎？

當然不行。眾所周知，這些做法只會導致失敗。

因此，不要想著通過接觸 React 來將 ES6 + Webpack + Babel + React + Routing + AJAX 這些知識一次性學好。因為想一下，就能明白這難道不正是導致學習失敗的原因嗎？

既然我把該文章稱作是一條學習路線，那麼每一次都應該走好每一步。既不要嘗試去跨越，也不要貪步。

一步一腳印。若把其置身於每一天的那麼一點時間，那麼也許幾周就能把整個學習完成。

制定該路線的主要目的在於：使你在學習過程中避免頭腦不堪重負。因此，請腳踏實地地去學習 React 吧。

當然，你也可以為整個學習過程制定一個可列印的 PDF 文件，以便在學習過程中能夠查記。

第零步：JavaScript

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

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

第半步：NPM

NPM 在 JavaScript 世界中，可謂是軟體管理方的王者。然而，在這裡你卻並不需要學習太多關於 NPM 自身的東西。只要在安裝好後 （連同 Node.js），學習如何使用其安裝軟體即可。（`npm install

`）

第一步：React

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

嘗試一下該三分鐘運行起 Hello World 的教程。

第二步：構建後摒棄

由於這一步是一個棘手的中間過程，所以往往會有大量的人忽略了該步。

謹記，請勿犯這樣的錯誤。因為，倘若對 React 的概念沒有一個穩固的掌握而擅自前行，那麼，最後只會對自己的大腦搪塞過多的知識，以致遺忘。

當然，該步需要一定時間的斟酌：該構建什麼呢？是工作中的一個原型項目？還是能貼合於整個框架的一些 Facebook 克隆項目呢？

其實，我們應該構建的都不是這些項目。因為，它們要不是包裹過甚，以致無甚可學；要不是過於龐大，以致成本過高。

尤其是工作中的「原型項目」，它們更為糟糕。因為在你心目中，早已明白這些項目並不會佔有一席之地。況且，該類項目往往會長期駐留在原型階段，或變成線上的軟體。最終，你將無法摒棄或重寫。

此外，把原型項目當作學習的項目將會為帶來大量的煩惱。對於你來說，你可能會就未來的因素考慮一切可能發生的事情。而當你認為這不僅僅是一個原型的時候，你就會產生疑惑 —— 是否要測試一下呢？我應該要保證架構能延伸擴展……我需要延後重構的工作嗎？還是不進行測試呢？

為了解決該問題，我希望能用上我所寫的一篇指引《為 Augular 開發者所準備的 React》：一旦你完成了 「Hello World」 的基礎課程，你將如何去學習 」think in React」 的課程。

在這裡，我有一些個人的提議給到大家：那就是，理想的項目是介乎於 「Hello World」 和 」All of Twitter「 之間。

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

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

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

值得提醒的是，如果你曾經訂閱於我，那麼當《為 Angular 開發者準備的 React》發布的時候，你將會第一時間收到通知。

第三步：Webpack

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

在這裡，我推薦一篇名為《Webpack —— 令人疑惑的地方》的文章，作為對 Webpack 的簡介。此外，該文章還講述了 Webpack 本身所具有的一些思考方式。

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

第四步：ES6

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

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

第五步：Routing

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

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

第六步：Redux

Dan Abramov，作為 Redux 的創造人，他會告訴你們不要過早地接觸 Redux。其實，這是有緣由的 —— Redux 其複雜度在早期的學習過程中，將會帶來災難性的影響。

雖然，在 Redux 背後所隱藏著的原理相當簡單，但想要從理解躍至實踐，卻是一個很大的跨度。

因此，重複第二步所做的：構建一次性的應用程序。通過些許的 Redux 經驗，去逐漸理解其背後的工作原理。

非步驟

在前面列出的步驟中，你曾否看見過」選擇一個模板項目「的字眼嗎？並沒有。

若僅通過挑選大量模板項目中的其中一個，去深入學習 React。那麼，後面將只會帶來大量的疑惑。雖然這些項目會含有一切可能的庫，且規定要求一定的目錄結構 —— 但對於小型的應用程序，或開始入門的我們來說，並不需要。

也許你會說，「Dave，我可並不是在構建一個小應用。我所構建的，是一個服務於上萬用戶級別的複雜應用！」……那麼，請你重新閱讀一下關於原型的理解

該如何應對

對於 React 來說，雖然有大量的學習計劃需要採取，且有大量的東西需要學習 —— 但一切需要循規蹈矩，一步一腳印。

雖說我已提供了一系列的步驟，那如果你在學習的過程中會忘記了步驟的順序或跳過了某一步，那怎麼辦？

你會想，要是有一個能監督的方式就最好了……

的確是有：我已經把上述的學習路線整理成一個可列印的 PDF 文件，你可以訪問原文獲取。

---

近期熱門文章：

• 《如何在前端開發中增加編碼效率，這裡有十款 Chrome 擴展可以幫你》

• 《如何將 Chrome 變成開發利器，掘金的開發者們在用這些插件》
• 《掘金上的開發者，都在用哪些插件？》
• 《掘金 Chrome 插件發布，開發者、設計師還是產品經理？快來發現乾貨吧》