2019 年 React 學習路線圖(轉)

轉自：https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc

 

以前咱們已經介紹了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 應該足夠了，Max 的「 React 16 — The Complete Guide」也涵蓋了 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。