2019年 React 新手學習指南 – 從 React 學習線路圖說開去
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
愚人碼頭注：本文根據 React 開發者學習線路圖（2018） 結構編寫了很多新手如何學習 React 的建議。2019 年有標題黨的嫌疑，但是 2018 年剩下的時間不多，我相信文中提到的這些技術 2019 年也不會過時。所以本文完全可以作為 2019 年 React 學習指南。文章中包含相關資源連結希望對你有所幫助。同時本文也大量引用了 The 2018 React JS RoadMap 文章內容和結構，不過該文章中推薦的大多是英文收費視訊教程，所以我做了很多內容修改。
本文 基礎 和 一般技能 部分也可以作為任何其他前端框架或庫的學習基礎。
ReactJS 或簡稱 React 是用於開發 Web 應用程式的前端或 GUI 的領先 JavaScript 庫之一。
在 Facebook 的支援下，React JS（也稱為React）近年來實現了跨越式發展，併成為基於元件的 GUI 開發名副其實的庫。
雖然還有其他前端框架，如 Angular 和 Vue.js ，但 React 與其他元件不同的是，它可能只專注於基於元件的 GUI 開發，而不涉及其他領域。
例如，Angular 是一個完整的框架，為您提供了許多開箱即用的功能，例如依賴注入，路由系統，表單處理，HTTP請求，動畫，i18n支援以及一個簡單強大且延遲載入的模組系統。
所以，如果您還沒有了熟悉的庫來做這些事情，或者您可能並不完全使用庫，那麼 React 是一個很好的選擇，但是學習 React 並不是那麼容易，尤其是如果你剛剛進入 web 開發領域的話。
當我今年開始學習 React 時，我有一些 Web 開發的背景，之前使用過 HTML ，CSS 和 JavaScript ，並且具備了前端開發的一些基本知識，但我學習 React JS 也碰到了一些問題。 事實上，我現在還在繼續學習它。
當我正在研究學習 React 的正確姿勢時，我遇到了這個優秀的 React 開發者線路圖，它概述了什麼是必須要學的，什麼是好的知識，以及你作為一名 React 開發人員需要學習的一些額外的知識。
這個 React 開發者線路圖是由 adam-golab 構建的，它概述了成為 React 開發人員可以採用的學習線路和庫。
那麼，如果您想知道接下來作為 React 開發人員應該學什麼？ 然後這個路線圖可以幫助你成為更好的 React 開發人員。
但是，如果你想知道在哪裡學習那些必修技能，那麼別擔心，我會分享了一些免費資源或者付費的線上課程，你可以學習這些技能。當然學習任何技能最好的開始都是其官網的技術文件。
2018 React 開發者線路圖
這裡是我正在談論的 React 開發者線路圖：
圖譜來源: https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png
現在，讓我們一步一步地瀏覽線路圖，瞭解如何在2018年學習成為 React 開發人員的基本技能：
1) 基礎
無論你在 Web 開發中學習哪個框架或庫，你都必須掌握基礎知識，當我說基礎知識時，我指的是 HTML ，CSS 和 JavaScript ，這三個是 Web 開發的三大支柱。
HTML
它是 Web 開發人員的第一支柱和最重要的技能之一，因為它提供了網頁的結構。
- HTML5 基本標籤
- HTML5 的標籤屬性
- HTML 語義化的重要性
- HTML5 中的一些新特性
- head 元素中的一些標籤及屬性 ，寫出滿足自己需求的
<head>頭部標籤，可以很有效的增強頁面的可用性。
CSS
它是 Web 開發的第二個支柱，用於設定網頁樣式，使網頁看起來很漂亮。
如果你想學習 CSS ，你可以看看 ：
- css參考手冊 ；
- css 相關的教程文章 ；
- CSS3 中的一些新特性；
- 當然還有現在炙手可熱的flexbox 佈局 教程；
- 以及grid 佈局 教程；
- 效能方面：重繪(repaints)與重排(reflows)
JavaScript
這是 Web 開發的第三個支柱，用於使您的網頁具有互動性。 這也是 React 框架背後的原因，因此在嘗試學習 React JS 之前，您應該瞭解 JavaScript 並掌握它。
如果您想從頭學習 JavaScript ，我建議：
- 熟悉基本的語法， 看看 JavaScript 完全手冊（2018版） 。
- 掌握 DOM 以及 BOM 相關的基本知識，建議買本書看看，系統學習；
- 掌握 JavaScript 中的一些術語以及經典機制，比如 ：
- 閉包
- 作用域和 this 上下文
- 原始值和引用值
- 變數和函式提升(Hoisting)
- JavaScript 設計模式
- JavaScript 中的原型
- DOM事件模型（事件冒泡，捕獲）
- promises，async/await 函式
- 函數語言程式設計
- 不可變資料結構（immutable）
- 繼承
- Modules（模組）
- 現在 JavaScript 基本都使用 ES6 規範寫的，所以你必須瞭解ES6 新特性；
- AJAX (XHR) 請求；
- 基本的JavaScript 除錯
以上是入門基礎，很多人雖然能做專案完成工作，但是對於這些基礎肯能瞭解不多，這樣往往很容易觸碰到天花板。個人認為作為一個前端開發工程師，這些基礎概念，基本知識都應該很好的掌握。雖然學習概念性東西有點枯燥，但是當你真正瞭解這些的時候，你會覺得學什麼都得心應手，融匯貫通。前端的大門也隨之為你敞開。
2）一般開發技能
無論您是前端開發人員還是後端開發人員，甚至是全棧軟體工程師，都無關緊要。 您必須瞭解一些在程式設計世界中生存的一般開發技能，以下是其中一些的列表：
2.1）學習 GIT
您必須在 2018 年完全瞭解 Git。嘗試在 GitHub 上建立一些倉庫，與其他人共享您的程式碼，並學習如何從您喜歡的 IDE 下載Github 上的程式碼。這裡有一份git – 簡明指南 可以作為你最簡入門。
2.2）瞭解 HTTP(S) 協議
如果您想成為一名 Web 開發人員，那麼瞭解 HTTP 並掌握它是絕對必要的。
我不是要求您閱讀規範，但您至少應該熟悉常見的 HTTP 請求方法，如 GET，POST，PUT，PATCH，DELETE，OPTIONS 以及 HTTP / HTTPS 的工作原理。
2.3）學習終端 terminal
雖然前端開發人員學習 Linux 或終端並不是強制性的，但我強烈建議你熟悉終端，配置你的shell（bash，zsh，csh）等。如果你想學習終端和 bash 那麼我建議你去看看終端使用初級教程。
2.4）演算法和資料結構
好吧，這又是一般程式設計技巧之一，不管是成為 React 開發人員或其他程式設計師都需要這個。
要學習資料結構和演算法，您可以閱讀一些書籍或加入一個好的課程，如 【專題課】前端面試防虐指南——演算法篇 。
而且，如果您喜歡的課程不僅僅是課程，那麼每個開發人員都應該閱讀 10本演算法書籍清單 。
2.5）學習設計模式
就像演算法和資料結構一樣，學習設計模式以成為 React Developer 並不是必須的，但是通過學習它將為自己創造一個美好的世界。
首先來看看什麼是設計模，式並 瞭解 JavaScript 中的常用的幾種設計模式 。 然後你可以再買書看看，這項技能是程式設計經驗總結，不會過時。
以上 基礎部分 和 一般開發技能 也可以作為任何其他前端框架或庫（如 Angular 和 Vue.js）的學習基礎。這些都是作為一名前端開發工程師的必備技能。
3）學習 React JS
現在，我們切入正題。 你必須學習 React ，學習它成為一名 React 開發人員。 學習React的最佳地點是官方網站，這裡有React 最新的中文文件 ，但作為初學者，它對您來說可能是至關重要的。
假如你看中文文件一下子摸不著頭腦，我建議你先看看這兩篇文章作為你最簡入門：
- React入門教程 – 概述和實際演練 （React官方推薦的入門教程）
- React 教程：2018年學習 React.js 的綜合指南 ，通過例項講解 React 最重要的部分和知識點。
入門後建議你看看 構建 React 應用的基礎知識，以及官方文件中的一些細節知識：
- React 教程：如何使用 webpack 4 和 Babel 構建 React 應用(2018)
- React 文件 中的一些細節以及 React 官方入門教程：簡介 React
再深入一點你必須學習：
- React 元件模式
- React 教程：函式作為子元件(Function as Child Components),即 渲染回撥(Render Callback)
- React 教程：深入理解 React 高階元件（Higher Order Component，簡稱：HOC）
當然 React 周邊一些非常有用的庫，比如：Redux，MobX，React-Router等等，也是非常必要的，我們將在後面詳細說明。
4）學習構建工具
如果你想成為一名專業的 React 開發人員，那麼你應該花一些時間熟悉一下你將作為 web 開發人員使用的工具，比如內建工具，單元測試工具，除錯工具等。
首先，本路線圖中提到了一些構建工具：
Package Managers
- npm
- yarn
- pnpm
- Task Runners
- npm scripts
- gulp
- Webpack , 中文文件
- Rollup
- Parcel
順便說一下，學習所有這些工具並不重要，對於初學者來說，只需學習 npm 和 Webpack 應該足夠了。 一旦您對 Web 開發和 React 生態有了更多的瞭解，您就可以探索其他工具了。
如果您想學習 Webpack ，那麼 【專題課】從0到1深度理解webpack 是一個很好的開始。
5）樣式（Styling）
如果您的目標是成為像 React 開發人員這樣的前端開發人員，那麼瞭解一些 樣式（Styling）相關的知識非常有必要。 線路圖中提到了很多東西，比如：
- CSS 預處理
- Sass/SCSS
- PostCSS
- Less
- Stylus
- CSS 框架
- Bootstrap
- Materialize 、 MaterialUI 、 Material Design Lite
- Bulma
- Semantic UI
- CSS 架構
- BEM
- CSS Modules
- Atomic
- OOCSS
- SMACSS
- SUITCSS
- CSS in JS
- Styled Components
- Radium
- Emotion
- JSS
- Aphrodite
看到蒙了是吧，這麼多東西？不用擔心，你不必學會每一樣技能，根據你團隊情況和個人喜好，每種學習一樣就好，其他都類似，掌握應該不難。
6）State(狀態) 管理
這是 React 開發人員關注的另一個重要領域。愚人碼頭注：很多人都說 React 其實很簡單，只要懂得 2 件事情，就是 Prop(屬性) 和 State(狀態)，可見 State(狀態) 管理 的重要性。 路線圖提到了要掌握的以下概念和框架：
- Component State /Context API
- Redux
- 非同步 actions (副作用)
- Redux Thunk
- Redux Better Promise
- Redux Saga
- Redux Observable
- 資料持久化
- Redux Persist
- Redux Phoenix
- Redux Form
- MobX
如果這對你來說太多了的話，我建議你首先只關注 Redux ，因為 Redux 是目前應用最廣泛的 React 狀態（State）管理庫，等有了一定的經驗之後再學習其他內容。
7）型別檢查
由於 JavaScript 是一種弱型別語言，弱（或鬆散）型別的語言不強制執行物件的型別。這允許更多的靈活性，但是又將型別安全和型別檢查拒之門外。所以編譯器無法捕捉這些與型別相關的 bug 。
隨著應用程式的增長，您可以通過型別檢查捕獲大量錯誤，特別是如果您可以使用 JavaScript 擴充套件語言(如 Flow 或TypeScript ) 來對整個應用程式進行型別檢查的話。
但即使你不使用它們，React 也有一些內建的型別檢查功能 ，學習它們可以幫助你儘早發現 bug 。
TypeScript 如今增長勢頭很猛，並且 TypeScript 也可以編寫 Angular 和 Vue 等應用，所以我認為 TypeScript 值得我們學習。
8）表單
除了型別檢查之外，還可以學習像 Redux Form 這樣的表單助手，它提供了在 Redux 中管理表單狀態的最佳方法。
除了Redux Form之外，您還可以檢視：
9）路由
元件是 React 功能強大的宣告性程式設計模型的核心，而路由元件是任何應用程式的重要組成部分。
React-Router 提供了一組導航元件，這些元件與您的應用程式以宣告方式組合。
無論您是希望為Web應用程式設定可收藏的 URL 還是在 React Native 中導航的可組合方式，React Router 都可以在 React 渲染的任何位置工作。
除了 React-Router 之外，您還可以檢視：
10）API 客戶端
當今，您很少會去構建一個獨立的 GUI ，相反，您將有更多機會使用 REST 和 GraphQL 等API構建與其他應用程式通訊的應用。
值得慶幸的是，React 開發人員可以使用許多API客戶端，以下是它們的列表：
REST API 方面，國內目前很多人使用 Axios，理由也很簡單，它確實簡單好用，再加上 Vue2.0之後，尤大大推薦大家用 axios 。Axios 本質上也是對原生 XHR 的封裝，和 jQuery Ajax 類似，只不過它是Promise 的實現版本，符合最新的 ES 規範，從它的官網上可以看到它有以下幾條特性：
- 從 node.js 建立 http 請求
- 支援 Promise API
- 客戶端支援防止CSRF
- 提供了一些併發請求的介面（重要，方便了很多的操作）
Fetch API（ES6+）執行對 REST API 的 HTTP請求，提供了一個獲取資源的介面（包括跨域）。任何使用過 XMLHttpRequest 的人都能輕鬆上手，但新的API提供了更強大和靈活的功能集。Fetch 提供了對 Request 和 Response （以及其他與網路請求有關的）物件的通用定義。使之今後可以被使用到更多地應用場景中：無論是service workers、Cache API、又或者是其他處理請求和響應的方式，甚至是任何一種需要你自己在程式中生成響應的方式。它還提供了一種定義，將 CORS 和 HTTP 原生的頭資訊結合起來，取代了原來那種分離的定義。實際工作中，很多前端開發工程師覺得 Fetch API 使用起來不是很方便，而且程式碼醜陋，其實只是我們平常沒用太多跟底層的東西。Fetch API 的優勢主要優勢也在於它更加底層：
- 更加底層，提供的API豐富（request, response）
- 脫離了XHR，是ES規範裡新的實現方式
GraphQL 方面推薦 Apollo 。Apollo 客戶端是我的最愛，它提供了一種使用GraphQL構建客戶端應用程式的簡便方法。 該客戶端旨在幫助您快速構建一個使用GraphQL獲取資料並可與任何JavaScript前端一起使用的 UI 。
11）實用程式庫（Utility Libraries）
這些庫使您的工作更輕鬆。 React 開發人員可以使用許多實用程式庫，如下所示：
我不建議你學習所有這些，線路圖也是如此建議的。如果你仔細觀察 Lodash ，Moment 和 Classnames 是用黃色的，說明你應該從這幾個開始學習。
12）測試
注意，這是 React 開發人員的一項重要技能，經常被忽視，但如果你想比其他開發人員更牛逼，那麼你應該學習一些測試庫。 此外，您還擁有用於單元測試，整合測試和端到端測試的庫。
以下是路線圖中提到的庫列表：
- 單元測試
- Jest
- Enzyme
- Sinon
- Mocha
- Chai
- AVA
- Tape
- 端到端測試
- Selenium , Webdriver
- Cypress
- Puppeteer/">Puppeteer
- Cucumber.js
- 整合測試
- Karma
您可以更具你們團隊或你個人喜好學習所需的庫，但是如果你剛開始學習這一塊內容的話，我建議你使用 Jest 。 當然 Mocha 也受到很多開發者的青睞，但是學習曲線相對較陡，但這也說明了它可以提供更好的靈活性和可擴充套件性。
13）國際化
這是開發前端的另一個重要主題，幫助你的應用可以在全球使用。 您可能需要支援 日本，中國，西班牙和其他歐洲國家的本地 GUI 版本和語言包。
線路圖建議您學習以下技術：
這兩個庫都提供了 React 元件和 API 來格式化日期，數字和字串，包括複數和處理翻譯。
14）伺服器端渲染
您應該知道伺服器端渲染和客戶端渲染之間的區別，在討論支援使用 React 的伺服器端渲染的庫之前，請先弄清楚他們直接的區別。
好吧，在客戶端渲染中，您的瀏覽器會下載一個最小的HTML頁面。 然後它渲染 JavaScript 並將內容填充到其中。
在伺服器端呈現的情況下，React元件在伺服器上呈現，輸出的HTML內容將傳遞到客戶端或瀏覽器。
線路圖建議遵循伺服器端渲染：
但是，我建議只學習 Next.js 應該足夠了。
15）靜態站點生成器
Gatsby.js 是一個現代靜態站點生成器。 您可以使用 Gatsby 建立個性化的網站。 它們將您的資料與 JavaScript 相結合，並建立格式良好的HTML內容。React 官網就是用 Gatsby.js 生成的。例如：React 中文文件
16）後端框架整合
React on Rails 將 Rails 與 Facebook 的 React 前端框架（伺服器渲染）整合在一起。 它提供 Server 渲染，通常用於SEO爬蟲索引和UX效能，而不是 rails/webpacker 提供的。
17）移動端應用
這是學習 React 真正有好處的另一個領域，因為 React Native 正迅速成為用 JavaScript 開發原生移動應用程式外觀和體驗的標準方法。
線路圖建議您學習以下庫：
但是，我認為，只要學習 React Native 就足夠了。
18）桌面端應用
還有一些基於 React 的框架來構建像 React Native Windows 這樣的桌面 GUI，它允許您使用 React 構建本機 UWP 和 WPF 應用程式。
線路圖建議使用以下庫：
我個人推薦使用 Electron ，還是比較簡單方便的，其他我也沒用過，還要進一步探索。 如果你已經掌握了 React ，你可以看一下它們。
19）虛擬現實
如果您有興趣構建基於虛擬現實的應用程式，那麼您還有一些像 360/" target="_blank" rel="nofollow,noindex">React 360 這樣的框架，它允許您使用React 建立 360° 全景體驗和VR體驗。 如果您對該領域感興趣，可以進一步探索 React 360 。
小結
這就是2018年的 React 學習線路圖。 它確實非常全面，很有可能你在2018年剩下的時間裡都不會學到所有這些，但不要擔心，所有的技術在2019年仍然有效，你可以放心地將它用作2018年的React 學習線路圖。
如果你有 React 新手學習方面好的資源或教程，甚至是收費課程都可以留言告訴我們，我會盡快將其加入到本文合適的地方。當然你有任何建議也可以留言。感謝！
如果你覺得本文對你有幫助，那就請分享給更多的朋友
關注「前端乾貨精選」加星星，每天都能獲取前端乾貨
