作者 | javinpaul

譯者 | 無明

之前我們已經(jīng)介紹了 2019 年 Vue 學(xué)習(xí)路線圖，而 React 作為當(dāng)前應(yīng)用最廣泛的前端框架，在 Facebook 的支持下，近年來實現(xiàn)了飛越式的發(fā)展，所以，我們將在下文中介紹 2019 年 React 學(xué)習(xí)路線圖，希望給想學(xué) React 的開發(fā)者一些借鑒。

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

圖片來源：
https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png

?

基礎(chǔ)知識

不管你要學(xué)習(xí)哪個 Web 開發(fā)框架或庫，都必須掌握基礎(chǔ)知識，如 HTML、CSS 和 JavaScript，這三個是 Web 開發(fā)的三大支柱。

HTML

HTML 是 Web 開發(fā)人員最重要的技能之一，因為它為網(wǎng)頁提供了基本結(jié)構(gòu)。

CSS

CSS 用于設(shè)置網(wǎng)頁樣式，讓網(wǎng)頁看起來更好看。

JavaScript

JavaScript 讓網(wǎng)頁具備交互性。React 是基于 JavaScript 的，因此在學(xué)習(xí) React 之前，你應(yīng)該先了解 JavaScript。

通用的開發(fā)技能

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

學(xué)習(xí) GIT

你必須在 2018 年完全了解 Git。嘗試在 GitHub 上創(chuàng)建一些存儲庫，與其他人共享你的代碼，并學(xué)習(xí)如何在你喜歡的 IDE 中克隆 Github 上的代碼。

了解 HTTP(S) 協(xié)議

如果你想成為一名 Web 開發(fā)人員，那么了解 HTTP 絕對是有必要的。

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

學(xué)習(xí)終端

雖然前端開發(fā)人員學(xué)習(xí) Linux 或終端并不是強制性的，但我強烈建議你熟悉以下終端，了解如何配置你的 shell（bash、zsh、csh）等。

算法和數(shù)據(jù)結(jié)構(gòu)

好吧，這又是一個通用編程技能，成為 React 開發(fā)者不一定需要了解這些，但要成為真正的程序員，這是必備技能。

學(xué)習(xí)設(shè)計模式

就像算法和數(shù)據(jù)結(jié)構(gòu)一樣，成為 React 開發(fā)者并不一定要學(xué)習(xí)設(shè)計模式，但學(xué)好設(shè)計模式會讓你變得更好。了解設(shè)計模式將幫你找到能夠經(jīng)受住時間考驗的解決方案。

學(xué)習(xí) React

你必須學(xué)好 React 才能成為一名 React 開發(fā)者。學(xué)習(xí) React 最好的資源是它的官方網(wǎng)站，但作為初學(xué)者，它對你來說可能有點難。

學(xué)習(xí)構(gòu)建工具

如果你想成為一名專業(yè)的 React 開發(fā)者，那么你應(yīng)該花一些時間熟悉一下你將作為 Web 開發(fā)者需要使用的工具，比如構(gòu)建工具、單元測試工具、調(diào)試工具等。

以下是路線圖中列出的構(gòu)建工具：

包管理器：

• npm

• yarn

• pnpm

• 任務(wù)執(zhí)行器

• npm 腳本

• gulp

• WebPack

• Rollup

• Parcel

順便說一句，并非要學(xué)習(xí)所有這些工具，對于初學(xué)者來說，學(xué)習(xí) npm 和 Webpack 應(yīng)該足夠了。在你對 Web 開發(fā)和 React 生態(tài)系統(tǒng)有了更多的了解后，你就可以學(xué)習(xí)其他工具。

樣式

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

我建議你至少學(xué)習(xí)一下 Bootstrap，這是你經(jīng)常會用到的 CSS 框架。

如果你想進一步學(xué)習(xí) bootstrap，也可以學(xué)習(xí) Materialise 或 Material UI。

狀態(tài)管理

這是 React 開發(fā)者應(yīng)該關(guān)注的另一個重要領(lǐng)域。路線圖中提到了以下一些需要掌握的概念和框架：

• 組件 State/ContextAPI

• Redux

• 異步操作（副作用）

• Redux Thunk

• Redux Better Promise

• Redux Saga

• Redux Observable

• Helpers

• Rematch

• Reselect

• Data persistence

• Redux Persist

• Redux Phoenix

• Redux Form

• MobX

如果東西太多，我建議你只關(guān)注 Redux。

Type Checker

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

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

React 也提供了一些內(nèi)置的類型檢查功能，可以用它們幫你盡早發(fā)現(xiàn) bug。

由于 Angular 也使用了 TypeScript，我認為可以同時學(xué)習(xí) JavaScript 和 TypeScript。

Form Helper

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

路由

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

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

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

API 客戶端

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

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

?REST

• Fetch

• SuperAgent

• axios

?GraphQL

• Apollo

• Relay

• urql

Apollo 客戶端是我的最愛，它提供了一種使用 GraphQL 構(gòu)建客戶端應(yīng)用程序的簡便方法。Apollo 可以幫你快速構(gòu)建使用 GraphQL 獲取數(shù)據(jù)的 UI，并可以與任意 JavaScript 前端一起使用。

輔助庫

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

• Lodash

• Moment

• classnames

• Numeral

• RxJS

• Ramda

這些不一定都要學(xué)，路線圖中的 Lodash、Moment 和 Classnames 是用黃色標注的，所以應(yīng)該先從它們開始學(xué)習(xí)。

測試

測試是 React 開發(fā)者的一項重要技能，但經(jīng)常被忽視，如果你想在競爭中保持領(lǐng)先，就要學(xué)習(xí)一些用于測試的庫。這些庫可用于單元測試、集成測試和端到端測試。

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

?單元測試

• Jest

• Enzyme

• Sinon

• Mocha

• Chai

• AVA

• Tape

?端到端測試

• Selenium, Webdriver

• Cypress

• Puppeteer

• Cucumber.js

• Nightwatch.js

?集成測試

• Karma

你可以學(xué)習(xí)你想學(xué)習(xí)的庫，但建議一定要學(xué)習(xí) Jest 和 Enzyme。

國際化

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

路線圖中建議你學(xué)習(xí)以下技術(shù)，它們都很好理解：

• React Intl

• React i18next

這兩個庫都提供了 React 組件和 API 來格式化日期、數(shù)字和字符串，包括復(fù)數(shù)和處理翻譯。

服務(wù)器端渲染

你可能會想，服務(wù)器端渲染和客戶端渲染之間有什么區(qū)別。在使用客戶端渲染時，你的瀏覽器會下載一個最小的 HTML 頁面，然后通過 JavaScript 并將內(nèi)容填充到頁面中。

在使用服務(wù)器端渲染時，React 組件是在服務(wù)器上進行渲染的，將輸出的 HTML 內(nèi)容傳到客戶端或瀏覽器。

路線圖推薦了以下的服務(wù)器端渲染：

• Next.js

• After.js

• Rogue

不過我建議學(xué)習(xí) Next.js 應(yīng)該足夠了，Max 的“ React 16?—?The Complete Guide”也涵蓋了 Next.js 的基礎(chǔ)知識。

靜態(tài)站點生成器

Gatsby.js 是一個現(xiàn)代靜態(tài)站點生成器。你可以使用 Gatsby 創(chuàng)建個性化的登錄網(wǎng)站體驗。它將你的數(shù)據(jù)與 JavaScript 相結(jié)合，并創(chuàng)建格式良好的 HTML 內(nèi)容。

后端框架集成

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

移動端

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

路線圖中建議你學(xué)習(xí)以下庫：

• React Native

• Cordova/PhoneGap

但我認為只要學(xué)習(xí) React Native 就足夠了。

桌面端

還有一些基于 React 的框架可用于構(gòu)建像 React Native Windows 這樣的桌面 GUI，讓你可以使用 React 構(gòu)建原生 UWP 和 WPF 應(yīng)用程序。

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

• Proton Native

• Electron

• React Native Windows

它們都是進階的內(nèi)容，如果你已經(jīng)掌握了 React，可以看一下它們。

虛擬現(xiàn)實

如果你對構(gòu)建基于虛擬現(xiàn)實的應(yīng)用程序感興趣，還可以了解以下像 React 360 這樣的框架，讓你可以通過 React 開發(fā) VR 體驗。如果你對這個領(lǐng)域感興趣，可以進一步了解 React 360。

?英文原文

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

總結(jié)

以上是生活随笔為你收集整理的2019 年 React 学习路线图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。