(转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

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

注：本文根据 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-cn.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 周边一些非常有用的库，比如：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(状态) 管理的重要性。路线图提到了要掌握的以下概念和框架：

如果这对你来说太多了的话，我建议你首先只关注 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
Fetch
SuperAgent
axios
GraphQL
Apollo
Relay
urql

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
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）虚拟现实

如果您有兴趣构建基于虚拟现实的应用程序，那么您还有一些像 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 数据结构服务端渲染算法终端设计模式