作者｜javinpaul

譯者｜無明

之前我們已經介紹了 2019 年 Vue 學習路線圖，而 React 作為當前應用最廣泛的前端框架，在 Facebook 的支援下，近年來實現了飛越式的發展，我們將在下文中介紹 2019 年 React 學習路線圖，希望給想學 React 的開發者一些借鑑。

下圖是2018 年的 React 路線圖，它非常全面，2018 年剩下的時間可能不夠你學會所有這些，但不要擔心，所有的技術在 2019 年仍然有效。

圖片來源：

https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png

1. 基礎知識

不管你要學習哪個 Web 開發框架或庫，都必須掌握基礎知識，如 HTML、CSS 和 JavaScript，這三個是 Web 開發的三大支柱。

 HTML

HTML 是 Web 開發人員最重要的技能之一，因為它為網頁提供了基本結構。

 CSS

CSS 用於設定網頁樣式，讓網頁看起來更好看。

 JavaScript

JavaScript 讓網頁具備互動性。React 是基於 JavaScript 的，因此在學習 React 之前，你應該先了解 JavaScript。

2. 通用的開發技能

無論你是前端開發人員還是後端開發人員，甚至是全棧工程師，都必須瞭解一些能夠讓你在程式設計世界中生存下來的通用開發技能。

 學習 GIT

你必須在 2018 年完全瞭解 Git。嘗試在 GitHub 上建立一些儲存庫，與其他人共享你的程式碼，並學習如何在你喜歡的 IDE 中克隆 Github 上的程式碼。

 瞭解 HTTP(S) 協議

如果你想成為一名 Web 開發人員，那麼瞭解 HTTP 絕對是有必要的。

我不是要你去閱讀 HTTP(S) 規範，但你至少應該熟悉常見的 HTTP 請求方法，如 GET、POST、PUT、PATCH、DELETE、OPTIONS 以及 HTTP/HTTPS 的工作原理。

 學習終端

雖然前端開發人員學習 Linux 或終端並不是強制性的，但我強烈建議你熟悉以下終端，瞭解如何配置你的 shell（bash、zsh、csh）等。

 演算法和資料結構

好吧，這又是一個通用程式設計技能，成為 React 開發者不一定需要了解這些，但要成為真正的程式設計師，這是必備技能。

 學習設計模式

就像演算法和資料結構一樣，成為 React 開發者並不一定要學習設計模式，但學好設計模式會讓你變得更好。瞭解設計模式將幫你找到能夠經受住時間考驗的解決方案。

3. 學習 React

你必須學好 React 才能成為一名 React 開發者。學習 React 最好的資源是它的官方網站，但作為初學者，它對你來說可能有點難。

 3.1 學習構建工具

如果你想成為一名專業的 React 開發者，那麼你應該花一些時間熟悉一下你將作為 Web 開發者需要使用的工具，比如構建工具、單元測試工具、除錯工具等。

以下是路線圖中列出的構建工具：

包管理器：

• npm

• yarn

• pnpm

• 任務執行器

• npm 指令碼

• gulp

• WebPack

• Rollup

• Parcel

順便說一句，並非要學習所有這些工具，對於初學者來說，學習 npm 和 Webpack 應該足夠了。在你對 Web 開發和 React 生態系統有了更多的瞭解後，你就可以學習其他工具。

 3.2 樣式

如果你的目標是成為 React 開發者，瞭解一些樣式相關的知識只會有益無害。路線圖中提到了很多 CSS 相關的東西，比如 CSS 前處理器、CSS 框架、CSS 架構和 JS 中的 CSS。

我建議你至少學習一下 Bootstrap，這是你經常會用到的 CSS 框架。

如果你想進一步學習 bootstrap，也可以學習 Materialise 或 Material UI。

 3.3 狀態管理

這是 React 開發者應該關注的另一個重要領域。路線圖中提到了以下一些需要掌握的概念和框架：

• 元件 State/ContextAPI

• Redux

• 非同步操作（副作用）

• Redux Thunk

• Redux Better Promise

• Redux Saga

• Redux Observable

• Helpers

• Rematch

• Reselect

• Data persistence

• Redux Persist

• Redux Phoenix

• Redux Form

• MobX

如果東西太多，我建議你只關注 Redux。

 3.4 Type Checker

由於 JavaScript 不是一種強型別語言，因此編譯器不會捕獲那些與型別相關的錯誤。

隨著應用程式的增長，你可以通過型別檢查捕獲大量錯誤，尤其是如果你可以使用 Flow 或 TypeScript 等 JavaScript 擴充套件對整個應用程式進行型別檢查。

React 也提供了一些內建的型別檢查功能，可以用它們幫你儘早發現 bug。

由於 Angular 也使用了 TypeScript，我認為可以同時學習 JavaScript 和 TypeScript。

 3.5 Form Helper

除了 Type Checker 之外，還可以學習像 Redux Form 這樣的 Form Helper，它提供了在 Redux 中管理表單狀態的最佳方法。除了 Redux Form 之外，還有 Formik、Formsy 和 Final。

 3.6 路由

元件是 React 宣告性程式設計模型的核心，而路由元件是應用程式的重要組成部分。

React Router 提供了一組導航元件，這些元件可以通過宣告的方式與你的應用程式組合在一起。

除了 React Router 之外，你還可以看看 Router 5 和 Redux-First Router。

 3.7 API 客戶端

在今天的世界中，你很少會構建獨立的 GUI，相反，你將有更多機會使用 REST 和 GraphQL 等 API 構建與其他應用程式發生互動的東西。

值得慶幸的是，React 開發者可以使用很多 API 客戶端：

REST

• Fetch

• SuperAgent

• axios

GraphQL

• Apollo

• Relay

• urql

Apollo 客戶端是我的最愛，它提供了一種使用 GraphQL 構建客戶端應用程式的簡便方法。Apollo 可以幫你快速構建使用 GraphQL 獲取資料的 UI，並可以與任意 JavaScript 前端一起使用。

 3.8 輔助庫

這些庫可以讓你的工作變得更輕鬆。React 開發人員可以使用很多輔助庫，如下所示：

• Lodash

• Moment

• classnames

• Numeral

• RxJS

• Ramda

這些不一定都要學，路線圖中的 Lodash、Moment 和 Classnames 是用黃色標註的，所以應該先從它們開始學習。

 3.9 測試

測試是 React 開發者的一項重要技能，但經常被忽視，如果你想在競爭中保持領先，就要學習一些用於測試的庫。這些庫可用於單元測試、整合測試和端到端測試。

以下是路線圖中提到的庫：

 單元測試

• Jest

• Enzyme

• Sinon

• Mocha

• Chai

• AVA

• Tape

 端到端測試

• Selenium, Webdriver

• Cypress

• Puppeteer

• Cucumber.js

• Nightwatch.js

 整合測試

• Karma

你可以學習你想學習的庫，但建議一定要學習 Jest 和 Enzyme。

 3.10 國際化

這是前端開發的另一個重要主題。你可能需要支援日本、中國、西班牙和其他歐洲國家的本地 GUI 版本。

路線圖中建議你學習以下技術，它們都很好理解：

• React Intl

• React i18next

這兩個庫都提供了 React 元件和 API 來格式化日期、數字和字串，包括複數和處理翻譯。

 3.11 伺服器端渲染

你可能會想，伺服器端渲染和客戶端渲染之間有什麼區別。在使用客戶端渲染時，你的瀏覽器會下載一個最小的 HTML 頁面，然後通過 JavaScript 並將內容填充到頁面中。

在使用伺服器端渲染時，React 元件是在伺服器上進行渲染的，將輸出的 HTML 內容傳到客戶端或瀏覽器。

路線圖推薦了以下的伺服器端渲染：

• Next.js

• After.js

• Rogue

不過我建議學習 Next.js 應該足夠了。

 3.12 靜態站點生成器

Gatsby.js 是一個現代靜態站點生成器。你可以使用 Gatsby 建立個性化的登入網站體驗。它將你的資料與 JavaScript 相結合，並建立格式良好的 HTML 內容。

 3.13 後端框架整合

React on Rails 將 Rails 與 Facebook 的 React 前端框架（伺服器渲染）整合在一起。它提供了伺服器渲染，通常用於 SEO 爬蟲索引和 UX。

4. 移動端

React Native 正迅速成為使用 JavaScript 開發具有原生外觀的移動應用程式的標準方法。

路線圖中建議你學習以下庫：

• React Native

• Cordova/PhoneGap

但我認為只要學習 React Native 就足夠了。

5. 桌面端

還有一些基於 React 的框架可用於構建像 React Native Windows 這樣的桌面 GUI，讓你可以使用 React 構建原生 UWP 和 WPF 應用程式。

路線圖建議使用以下幾個庫：

• Proton Native

• Electron

• React Native Windows

它們都是進階的內容，如果你已經掌握了 React，可以看一下它們。

6. 虛擬現實

如果你對構建基於虛擬現實的應用程式感興趣，還可以瞭解以下像 React 360 這樣的框架，讓你可以通過 React 開發 VR 體驗。如果你對這個領域感興趣，可以進一步瞭解 React 360。

英文原文：

https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02