(轉)2019年 React 新手學習指南 – 從 React 學習線路圖說開去

時間  2019-11-06
標籤 2019年 react 新手 學習 指南 線路 圖說 開去 欄目 React 简体版
原文   原文鏈接

原文：https://www.html.cn/archives/10111javascript

注：本文根據 React 開發者學習線路圖（2018） 結構編寫了不少新手如何學習 React 的建議。2019 年有標題黨的嫌疑，可是 2018 年剩下的時間很少，我相信文中提到的這些技術 2019 年也不會過期。因此本文徹底能夠做爲 2019 年 React 學習指南。文章中包含相關資源連接但願對你有所幫助。同時本文也大量引用了 The 2018 React JS RoadMap 文章內容和結構，不過該文章中推薦的大可能是英文收費視頻教程，因此我作了不少內容修改。css

本文 基礎 和 通常技能 部分也能夠做爲任何其餘前端框架或庫的學習基礎。html

ReactJS 或簡稱 React 是用於開發 Web 應用程序的前端或 GUI 的領先 JavaScript 庫之一。前端

在 Facebook 的支持下，React JS（也稱爲React）近年來實現了跨越式發展，併成爲基於組件的 GUI 開發名副其實的庫。java

雖然還有其餘前端框架，如 Angular 和 Vue.js ，但 React 與其餘組件不一樣的是，它可能只專一於基於組件的 GUI 開發，而不涉及其餘領域。node

例如，Angular 是一個完整的框架，爲您提供了許多開箱即用的功能，例如依賴注入，路由系統，表單處理，HTTP請求，動畫，i18n支持以及一個簡單強大且延遲加載的模塊系統。react

因此，若是您尚未了熟悉的庫來作這些事情，或者您可能並不徹底使用庫，那麼 React 是一個很好的選擇，可是學習 React 並非那麼容易，尤爲是若是你剛剛進入 web 開發領域的話。webpack

當我今年開始學習 React 時，我有一些 Web 開發的背景，以前使用過 HTML ，CSS 和 JavaScript ，而且具有了前端開發的一些基本知識，但我學習 React JS 也碰到了一些問題。 事實上，我如今還在繼續學習它。ios

當我正在研究學習 React 的正確姿式時，我遇到了這個優秀的 React 開發者線路圖，它概述了什麼是必需要學的，什麼是好的知識，以及你做爲一名 React 開發人員須要學習的一些額外的知識。git

這個 React 開發者線路圖是由 adam-golab 構建的，它概述了成爲 React 開發人員能夠採用的學習線路和庫。

那麼，若是您想知道接下來做爲 React 開發人員應該學什麼？ 而後這個路線圖能夠幫助你成爲更好的 React 開發人員。

可是，若是你想知道在哪裏學習那些必修技能，那麼別擔憂，我會分享了一些免費資源或者付費的在線課程，你能夠學習這些技能。固然學習任何技能最好的開始都是其官網的技術文檔。

2018 React 開發者線路圖

這裏是我正在談論的 React 開發者線路圖：

2018 React 開發者線路圖

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

如今，讓咱們一步一步地瀏覽線路圖，瞭解如何在2018年學習成爲 React 開發人員的基本技能：

1) 基礎

不管你在 Web 開發中學習哪一個框架或庫，你都必須掌握基礎知識，當我說基礎知識時，我指的是 HTML ，CSS 和 JavaScript ，這三個是 Web 開發的三大支柱。

HTML

它是 Web 開發人員的第一支柱和最重要的技能之一，由於它提供了網頁的結構。

CSS

它是 Web 開發的第二個支柱，用於設置網頁樣式，使網頁看起來很漂亮。

若是你想學習 CSS ，你能夠看看 ：

JavaScript

這是 Web 開發的第三個支柱，用於使您的網頁具備交互性。 這也是 React 框架背後的緣由，所以在嘗試學習 React JS 以前，您應該瞭解 JavaScript 並掌握它。

若是您想從頭學習 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 周邊一些很是有用的庫，好比：Redux，MobX，React-Router等等，也是很是必要的，咱們將在後面詳細說明。

4）學習構建工具

若是你想成爲一名專業的 React 開發人員，那麼你應該花一些時間熟悉一下你將做爲 web 開發人員使用的工具，好比內置工具，單元測試工具，調試工具等。

首先，本路線圖中提到了一些構建工具：

Package Managers

順便說一下，學習全部這些工具並不重要，對於初學者來講，只需學習 npm 和 Webpack 應該足夠了。 一旦您對 Web 開發和 React 生態有了更多的瞭解，您就能夠探索其餘工具了。

若是您想學習 Webpack ，那麼 【專題課】從0到1深度理解webpack 是一個很好的開始。

5）樣式（Styling）

若是您的目標是成爲像 React 開發人員這樣的前端開發人員，那麼瞭解一些 樣式（Styling）相關的知識很是有必要。 線路圖中提到了不少東西，好比：

看到蒙了是吧，這麼多東西？不用擔憂，你沒必要學會每同樣技能，根據你團隊狀況和我的喜愛，每種學習同樣就好，其餘都相似，掌握應該不難。

6）State(狀態) 管理

這是 React 開發人員關注的另外一個重要領域。注：不少人都說 React 其實很簡單，只要懂得 2 件事情，就是 Prop(屬性) 和 State(狀態)，可見 State(狀態) 管理 的重要性。 路線圖提到了要掌握的如下概念和框架：

若是這對你來講太多了的話，我建議你首先只關注 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 。 固然 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）虛擬現實

若是您有興趣構建基於虛擬現實的應用程序，那麼您還有一些像 React 360 這樣的框架，它容許您使用React 建立 360° 全景體驗和VR體驗。 若是您對該領域感興趣，能夠進一步探索 React 360 。

小結

這就是2018年的 React 學習線路圖。 它確實很是全面，頗有可能你在2018年剩下的時間裏都不會學到全部這些，但不要擔憂，全部的技術在2019年仍然有效，你能夠放心地將它用做2018年的React 學習線路圖。

若是你有 React 新手學習方面好的資源或教程，甚至是收費課程均可以留言告訴咱們，我會盡快將其加入到本文合適的地方。固然你有任何建議也能夠留言。感謝！

贊(19)   打賞
未經容許不得轉載： WEB前端開發 »  2019年 React 新手學習指南 – 從 React 學習線路圖說開去
標籤： API Clients After.js Aphrodite Apollo Async actions (Side Effects) Atomic Ava BEM Bootstrap Bulma CSS Architecture CSS Frameworks CSS Modules CSS Preprocessor CSS-in-JS Chai Component State/Context API Cordova/Phonegap Cucumber.js Cypress Data persistence Electron Emotion End to End Testing Enzyme Final Form Flow Form Helpers Formik Formsy GET Gatsby Git GraphQL HTTP HTTPS Helpers ImmutableJS Integration Testing Internationalization JSS JavaScript Jest Karma Less Material Design Lite Material UI Materialize MobX Mocha Moment Next.js Nightwatch.js Numeral OOCSS OPTIONS PATCH POST PUT Parcel PostCSS Proton Native Puppeteer Radium Ramda Reach Router React React 360 React Intl React Native React Native Windows React i18next React on Rails Redux Redux Better Promise Redux Form Redux Observable Redux Persist Redux Phoenix Redux Saga Redux Thunk Redux-First Router Relay Rematch Reselect Rest Rogue Rollup Router5 Routing RxJS SMACSS SUITCSS Sass/CSS Selenium Semantic UI Server Side Rendering Sinon State Management Styled Components Styling Stylus SuperAgent Tape Task Runners Terminal Type Checkers TypeScript Unit Testing Utility Libraries Webdriver Yarn axios classnames css delete fetch gulp html lodash npm npm Scripts pnpm propTypes react-router shell testing urql webpack 數據結構 服務端渲染 算法 終端 設計模式
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程