之前我們已經介紹了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。
英文原文：
https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02