React 作為當(dāng)前應(yīng)用最廣泛的前端框架，在 Facebook 的支持下，近年來(lái)實(shí)現(xiàn)了飛越式的發(fā)展，所以，我們將在下文中介紹 2019 年 React 學(xué)習(xí)路線圖，希望給想學(xué) React 的開(kāi)發(fā)者一些借鑒。
這就是 2018 年的 React 路線圖。它非常全面，2018 年剩下的時(shí)間可能不夠你學(xué)會(huì)所有這些，但不要擔(dān)心，所有的技術(shù)在 2019 年仍然有效。
圖片來(lái)源：https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png
1. 基礎(chǔ)知識(shí)
不管你要學(xué)習(xí)哪個(gè) Web 開(kāi)發(fā)框架或庫(kù)，都必須掌握基礎(chǔ)知識(shí)，如 HTML、CSS 和 JavaScript，這三個(gè)是 Web 開(kāi)發(fā)的三大支柱。
HTML
HTML 是 Web 開(kāi)發(fā)人員最重要的技能之一，因?yàn)樗鼮榫W(wǎng)頁(yè)提供了基本結(jié)構(gòu)。
CSS
CSS 用于設(shè)置網(wǎng)頁(yè)樣式，讓網(wǎng)頁(yè)看起來(lái)更好看。
JavaScript
JavaScript 讓網(wǎng)頁(yè)具備交互性。React 是基于 JavaScript 的，因此在學(xué)習(xí) React 之前，你應(yīng)該先了解 JavaScript。
2. 通用的開(kāi)發(fā)技能
無(wú)論你是前端開(kāi)發(fā)人員還是后端開(kāi)發(fā)人員，甚至是全棧工程師，都必須了解一些能夠讓你在編程世界中生存下來(lái)的通用開(kāi)發(fā)技能。
學(xué)習(xí) GIT
你必須在 2018 年完全了解 Git。嘗試在 GitHub 上創(chuàng)建一些存儲(chǔ)庫(kù)，與其他人共享你的代碼，并學(xué)習(xí)如何在你喜歡的 IDE 中克隆 Github 上的代碼。
了解 HTTP(S) 協(xié)議
如果你想成為一名 Web 開(kāi)發(fā)人員，那么了解 HTTP 絕對(duì)是有必要的。
我不是要你去閱讀 HTTP(S) 規(guī)范，但你至少應(yīng)該熟悉常見(jiàn)的 HTTP 請(qǐng)求方法，如 GET、POST、PUT、PATCH、DELETE、OPTIONS 以及 HTTP/HTTPS 的工作原理。
學(xué)習(xí)終端
雖然前端開(kāi)發(fā)人員學(xué)習(xí) Linux 或終端并不是強(qiáng)制性的，但我強(qiáng)烈建議你熟悉以下終端，了解如何配置你的 shell（bash、zsh、csh）等。
算法和數(shù)據(jù)結(jié)構(gòu)
好吧，這又是一個(gè)通用編程技能，成為 React 開(kāi)發(fā)者不一定需要了解這些，但要成為真正的程序員，這是必備技能。
學(xué)習(xí)設(shè)計(jì)模式
就像算法和數(shù)據(jù)結(jié)構(gòu)一樣，成為 React 開(kāi)發(fā)者并不一定要學(xué)習(xí)設(shè)計(jì)模式，但學(xué)好設(shè)計(jì)模式會(huì)讓你變得更好。了解設(shè)計(jì)模式將幫你找到能夠經(jīng)受住時(shí)間考驗(yàn)的解決方案。
3. 學(xué)習(xí) React
你必須學(xué)好 React 才能成為一名 React 開(kāi)發(fā)者。學(xué)習(xí) React 最好的資源是它的官方網(wǎng)站，但作為初學(xué)者，它對(duì)你來(lái)說(shuō)可能有點(diǎn)難。
3.1 學(xué)習(xí)構(gòu)建工具
如果你想成為一名專業(yè)的 React 開(kāi)發(fā)者，那么你應(yīng)該花一些時(shí)間熟悉一下你將作為 Web 開(kāi)發(fā)者需要使用的工具，比如構(gòu)建工具、單元測(cè)試工具、調(diào)試工具等。
以下是路線圖中列出的構(gòu)建工具：
包管理器：
- npm
- yarn
- pnpm
- 任務(wù)執(zhí)行器
- npm 腳本
- gulp
- WebPack
- Rollup
- Parcel
順便說(shuō)一句，并非要學(xué)習(xí)所有這些工具，對(duì)于初學(xué)者來(lái)說(shuō)，學(xué)習(xí) npm 和 Webpack 應(yīng)該足夠了。在你對(duì) Web 開(kāi)發(fā)和 React 生態(tài)系統(tǒng)有了更多的了解后，你就可以學(xué)習(xí)其他工具。
3.2 樣式
如果你的目標(biāo)是成為 React 開(kāi)發(fā)者，了解一些樣式相關(guān)的知識(shí)只會(huì)有益無(wú)害。路線圖中提到了很多 CSS 相關(guān)的東西，比如 CSS 預(yù)處理器、CSS 框架、CSS 架構(gòu)和 JS 中的 CSS。
我建議你至少學(xué)習(xí)一下 Bootstrap，這是你經(jīng)常會(huì)用到的 CSS 框架。
如果你想進(jìn)一步學(xué)習(xí) bootstrap，也可以學(xué)習(xí) Materialise 或 Material UI。
3.3 狀態(tài)管理
這是 React 開(kāi)發(fā)者應(yīng)該關(guān)注的另一個(gè)重要領(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。
3.4 Type Checker
由于 JavaScript 不是一種強(qiáng)類型語(yǔ)言，因此編譯器不會(huì)捕獲那些與類型相關(guān)的錯(cuò)誤。
隨著應(yīng)用程序的增長(zhǎng)，你可以通過(guò)類型檢查捕獲大量錯(cuò)誤，尤其是如果你可以使用 Flow 或 TypeScript 等 JavaScript 擴(kuò)展對(duì)整個(gè)應(yīng)用程序進(jìn)行類型檢查。
React 也提供了一些內(nèi)置的類型檢查功能，可以用它們幫你盡早發(fā)現(xiàn) bug。
由于 Angular 也使用了 TypeScript，我認(rèn)為可以同時(shí)學(xué)習(xí) JavaScript 和 TypeScript。
3.5 Form Helper
除了 Type Checker 之外，還可以學(xué)習(xí)像 Redux Form 這樣的 Form Helper，它提供了在 Redux 中管理表單狀態(tài)的最佳方法。除了 Redux Form 之外，還有 Formik、Formsy 和 Final。
3.6 路由
組件是 React 聲明性編程模型的核心，而路由組件是應(yīng)用程序的重要組成部分。
React Router 提供了一組導(dǎo)航組件，這些組件可以通過(guò)聲明的方式與你的應(yīng)用程序組合在一起。
除了 React Router 之外，你還可以看看 Router 5 和 Redux-First Router。
3.7 API 客戶端
在今天的世界中，你很少會(huì)構(gòu)建獨(dú)立的 GUI，相反，你將有更多機(jī)會(huì)使用 REST 和 GraphQL 等 API 構(gòu)建與其他應(yīng)用程序發(fā)生交互的東西。
值得慶幸的是，React 開(kāi)發(fā)者可以使用很多 API 客戶端：
REST
- Fetch
- SuperAgent
- axios
GraphQL
- Apollo
- Relay
- urql
Apollo 客戶端是我的最愛(ài)，它提供了一種使用 GraphQL 構(gòu)建客戶端應(yīng)用程序的簡(jiǎn)便方法。Apollo 可以幫你快速構(gòu)建使用 GraphQL 獲取數(shù)據(jù)的 UI，并可以與任意 JavaScript 前端一起使用。
3.8 輔助庫(kù)
這些庫(kù)可以讓你的工作變得更輕松。React 開(kāi)發(fā)人員可以使用很多輔助庫(kù)，如下所示：
- Lodash
- Moment
- classnames
- Numeral
- RxJS
- Ramda
這些不一定都要學(xué)，路線圖中的 Lodash、Moment 和 Classnames 是用黃色標(biāo)注的，所以應(yīng)該先從它們開(kāi)始學(xué)習(xí)。
3.9 測(cè)試
測(cè)試是 React 開(kāi)發(fā)者的一項(xiàng)重要技能，但經(jīng)常被忽視，如果你想在競(jìng)爭(zhēng)中保持領(lǐng)先，就要學(xué)習(xí)一些用于測(cè)試的庫(kù)。這些庫(kù)可用于單元測(cè)試、集成測(cè)試和端到端測(cè)試。
以下是路線圖中提到的庫(kù)：
單元測(cè)試
- Jest
- Enzyme
- Sinon
- Mocha
- Chai
- AVA
- Tape
端到端測(cè)試
- Selenium, Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js
集成測(cè)試
- Karma
你可以學(xué)習(xí)你想學(xué)習(xí)的庫(kù)，但建議一定要學(xué)習(xí) Jest 和 Enzyme。
3.10 國(guó)際化
這是前端開(kāi)發(fā)的另一個(gè)重要主題。你可能需要支持日本、中國(guó)、西班牙和其他歐洲國(guó)家的本地 GUI 版本。
路線圖中建議你學(xué)習(xí)以下技術(shù)，它們都很好理解：
- React Intl
- React i18next
這兩個(gè)庫(kù)都提供了 React 組件和 API 來(lái)格式化日期、數(shù)字和字符串，包括復(fù)數(shù)和處理翻譯。
3.11 服務(wù)器端渲染
你可能會(huì)想，服務(wù)器端渲染和客戶端渲染之間有什么區(qū)別。在使用客戶端渲染時(shí)，你的瀏覽器會(huì)下載一個(gè)最小的 HTML 頁(yè)面，然后通過(guò) JavaScript 并將內(nèi)容填充到頁(yè)面中。
在使用服務(wù)器端渲染時(shí)，React 組件是在服務(wù)器上進(jìn)行渲染的，將輸出的 HTML 內(nèi)容傳到客戶端或?yàn)g覽器。
路線圖推薦了以下的服務(wù)器端渲染：
- Next.js
- After.js
- Rogue
不過(guò)我建議學(xué)習(xí) Next.js 應(yīng)該足夠了，Max 的“ React 16?—?The Complete Guide”也涵蓋了 Next.js 的基礎(chǔ)知識(shí)。
3.12 靜態(tài)站點(diǎn)生成器
Gatsby.js 是一個(gè)現(xiàn)代靜態(tài)站點(diǎn)生成器。你可以使用 Gatsby 創(chuàng)建個(gè)性化的登錄網(wǎng)站體驗(yàn)。它將你的數(shù)據(jù)與 JavaScript 相結(jié)合，并創(chuàng)建格式良好的 HTML 內(nèi)容。
3.13 后端框架集成
React on Rails 將 Rails 與 Facebook 的 React 前端框架（服務(wù)器渲染）集成在一起。它提供了服務(wù)器渲染，通常用于 SEO 爬蟲(chóng)索引和 UX。
4. 移動(dòng)端
React Native 正迅速成為使用 JavaScript 開(kāi)發(fā)具有原生外觀的移動(dòng)應(yīng)用程序的標(biāo)準(zhǔn)方法。
路線圖中建議你學(xué)習(xí)以下庫(kù)：
- React Native
- Cordova/PhoneGap
但我認(rèn)為只要學(xué)習(xí) React Native 就足夠了。
5. 桌面端
還有一些基于 React 的框架可用于構(gòu)建像 React Native Windows 這樣的桌面 GUI，讓你可以使用 React 構(gòu)建原生 UWP 和 WPF 應(yīng)用程序。
路線圖建議使用以下幾個(gè)庫(kù)：
- Proton Native
- Electron
- React Native Windows
它們都是進(jìn)階的內(nèi)容，如果你已經(jīng)掌握了 React，可以看一下它們。
6. 虛擬現(xiàn)實(shí)
如果你對(duì)構(gòu)建基于虛擬現(xiàn)實(shí)的應(yīng)用程序感興趣，還可以了解以下像 React 360 這樣的框架，讓你可以通過(guò) React 開(kāi)發(fā) VR 體驗(yàn)。如果你對(duì)這個(gè)領(lǐng)域感興趣，可以進(jìn)一步了解 React 360。
英文原文：
https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02
