作者｜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