2019年React 學習路線圖

作者 | javinpaul

譯者 | 無明

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

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

圖片來源：

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

基礎知識

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

HTML

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

CSS

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

JavaScript

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

通用的開發技能

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

學習 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 開發者並不一定要學習設計模式，但學好設計模式會讓你變得更好。了解設計模式將幫你找到能夠經受住時間考驗的解決方案。

學習 React

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

學習構建工具

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

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

包管理器：

npm

yarn

pnpm

任務執行器

npm 腳本

gulp

WebPack

Rollup

Parcel

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

樣式

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

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

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

狀態管理

這是 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。

Type Checker

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

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

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

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

Form Helper

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

路由

組件是 React 聲明性編程模型的核心，而路由組件是應用程序的重要組成部分。

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

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

API 客戶端

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

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

REST

Fetch

SuperAgent

axios

GraphQL

Apollo

Relay

urql

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

輔助庫

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

Lodash

Moment

classnames

Numeral

RxJS

Ramda

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

測試

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

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

單元測試

Jest

Enzyme

Sinon

Mocha

Chai

AVA

Tape

端到端測試

Selenium, Webdriver

Cypress

Puppeteer

Cucumber.js

Nightwatch.js

集成測試

Karma

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

國際化

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

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

React Intl

React i18next

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

伺服器端渲染

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

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

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

Next.js

After.js

Rogue

不過我建議學習 Next.js 應該足夠了，Max 的「 React 16?—?The Complete Guide」也涵蓋了 Next.js 的基礎知識。

靜態站點生成器

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

後端框架集成

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

移動端

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

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

React Native

Cordova/PhoneGap

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

桌面端

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

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

Proton Native

Electron

React Native Windows

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

虛擬現實

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

英文原文

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

我這麼用心，不給點個好看推薦下嗎？

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！