React 作爲當前應用最廣泛的前端框架，在 Facebook 的支持下，近年來實現了飛越式的發展。2019 年 React 學習路線圖，希望給想學 React 的開發者一些借鑑。
1. 基礎知識
不管你要學習哪個 Web 開發框架或庫，都必須掌握基礎知識，如 HTML、CSS 和 JavaScript，這三個是 Web 開發的三大支柱。
HTML
HTML 是 Web 開發人員最重要的技能之一，因爲它爲網頁提供了基本結構。
CSS
CSS 用於設置網頁樣式，讓網頁看起來更好看。
JavaScript
JavaScript 讓網頁具備交互性。React 是基於 JavaScript 的，因此在學習 React 之前，你應該先了解 JavaScript。
這裏推薦一下我的前端學習交流羣：731771211，裏面都是學習前端的，如果你想製作酷炫的網頁，想學習編程。從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。
點擊：加入
2. 通用的開發技能
無論你是前端開發人員還是後端開發人員，甚至是全棧工程師，都必須瞭解一些能夠讓你在編程世界中生存下來的通用開發技能。
瞭解 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
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
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 應該足夠了。
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，可以看一下它們。
如果你也是一個前端黨，無論是在學習前端開發，還是已經工作的，這裏推薦一下我們的前端學習交流羣：731771211 ，這裏是把夢想照亮的地方，同爲了生活而拼搏奮鬥，大家互相幫助。新手加入即可獲得經過整理的最前沿的前端技術資料，不定時更新技術，與企業需求同步。好友都在裏面交流，每天都會有大牛定時講解前端技術!知識改變命運
點擊：加入