2019 年 React 学习线路指南图

2018-11-2908:27:26WEB前端开发Comments2,322 views字数 7356阅读模式

ReactJS 或简称 React 是用于开发 Web 应用程序的前端或 GUI 的领先 JavaScript 库之一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

在 Facebook 的支持下，React JS（也称为React）近年来实现了跨越式发展，并成为基于组件的 GUI 开发名副其实的库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

虽然还有其他前端框架，如 Angular 和 Vue.js ，但 React 与其他组件不同的是，它可能只专注于基于组件的 GUI 开发，而不涉及其他领域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

例如，Angular 是一个完整的框架，为您提供了许多开箱即用的功能，例如依赖注入，路由系统，表单处理，HTTP请求，动画，i18n支持以及一个简单强大且延迟加载的模块系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

所以，如果您还没有了熟悉的库来做这些事情，或者您可能并不完全使用库，那么 React 是一个很好的选择，但是学习 React 并不是那么容易，尤其是如果你刚刚进入 web 开发领域的话。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

当我今年开始学习 React 时，我有一些 Web 开发的背景，之前使用过 HTML ，CSS 和 JavaScript ，并且具备了前端开发的一些基本知识，但我学习 React JS 也碰到了一些问题。事实上，我现在还在继续学习它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

当我正在研究学习 React 的正确姿势时，我遇到了这个优秀的 React 开发者线路图，它概述了什么是必须要学的，什么是好的知识，以及你作为一名 React 开发人员需要学习的一些额外的知识。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

这个 React 开发者线路图是由 adam-golab 构建的，它概述了成为 React 开发人员可以采用的学习线路和库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

那么，如果您想知道接下来作为 React 开发人员应该学什么？然后这个路线图可以帮助你成为更好的 React 开发人员。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

但是，如果你想知道在哪里学习那些必修技能，那么别担心，我会分享了一些免费资源或者付费的在线课程，你可以学习这些技能。当然学习任何技能最好的开始都是其官网的技术文档。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2018 React 开发者线路图

这里是我正在谈论的 React 开发者线路图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

图谱来源: https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap-cn.png文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

现在，让我们一步一步地浏览线路图，了解如何在2018年学习成为 React 开发人员的基本技能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

1) 基础

无论你在 Web 开发中学习哪个框架或库，你都必须掌握基础知识，当我说基础知识时，我指的是 HTML ，CSS 和 JavaScript ，这三个是 Web 开发的三大支柱。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

HTML

它是 Web 开发人员的第一支柱和最重要的技能之一，因为它提供了网页的结构。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

HTML5 基本标签
HTML5 的标签属性
HTML 语义化的重要性
HTML5 中的一些新特性
head 元素中的一些标签及属性，写出满足自己需求的 <head> 头部标签，可以很有效的增强页面的可用性。

CSS

它是 Web 开发的第二个支柱，用于设置网页样式，使网页看起来很漂亮。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

如果你想学习 CSS ，你可以看看：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

css参考手册；
css 相关的教程文章；
CSS3 中的一些新特性；
当然还有现在炙手可热的 flexbox 布局教程；
以及grid 布局教程；
性能方面：重绘(repaints)与重排(reflows)

JavaScript

这是 Web 开发的第三个支柱，用于使您的网页具有交互性。这也是 React 框架背后的原因，因此在尝试学习 React JS 之前，您应该了解 JavaScript 并掌握它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

如果您想从头学习 JavaScript ，我建议：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

熟悉基本的语法，看看 JavaScript 完全手册（2018版）。
掌握 DOM 以及 BOM 相关的基本知识，建议买本书看看，系统学习；
掌握 JavaScript 中的一些术语以及经典机制，比如：
闭包
作用域和 this 上下文
原始值和引用值
变量和函数提升(Hoisting)
JavaScript 设计模式
JavaScript 中的原型
DOM事件模型（事件冒泡，捕获）
promises，async/await 函数
函数式编程
不可变数据结构（immutable）
继承
Modules（模块）
…
现在 JavaScript 基本都使用 ES6 规范写的，所以你必须了解 ES6 新特性；
AJAX (XHR) 请求；
基本的 JavaScript 调试

以上是入门基础，很多人虽然能做项目完成工作，但是对于这些基础肯能了解不多，这样往往很容易触碰到天花板。个人认为作为一个前端开发工程师，这些基础概念，基本知识都应该很好的掌握。虽然学习概念性东西有点枯燥，但是当你真正了解这些的时候，你会觉得学什么都得心应手，融汇贯通。前端的大门也随之为你敞开。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2）一般开发技能

无论您是前端开发人员还是后端开发人员，甚至是全栈软件工程师，都无关紧要。您必须了解一些在编程世界中生存的一般开发技能，以下是其中一些的列表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2.1）学习 GIT

您必须在 2018 年完全了解 Git。尝试在 GitHub 上创建一些仓库，与其他人共享您的代码，并学习如何从您喜欢的 IDE 下载Github 上的代码。这里有一份 git – 简明指南可以作为你最简入门。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2.2）了解 HTTP(S) 协议

如果您想成为一名 Web 开发人员，那么了解 HTTP 并掌握它是绝对必要的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

我不是要求您阅读规范，但您至少应该熟悉常见的 HTTP 请求方法，如 GET，POST，PUT，PATCH，DELETE，OPTIONS 以及 HTTP / HTTPS 的工作原理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2.3）学习终端 terminal

虽然前端开发人员学习 Linux 或终端并不是强制性的，但我强烈建议你熟悉终端，配置你的shell（bash，zsh，csh）等。如果你想学习终端和 bash 那么我建议你去看看终端使用初级教程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2.4）算法和数据结构

好吧，这又是一般编程技巧之一，不管是成为 React 开发人员或其他程序员都需要这个。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

要学习数据结构和算法，您可以阅读一些书籍或加入一个好的课程，如【专题课】前端面试防虐指南——算法篇。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

而且，如果您喜欢的课程不仅仅是课程，那么每个开发人员都应该阅读 10本算法书籍清单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

2.5）学习设计模式

就像算法和数据结构一样，学习设计模式以成为 React Developer 并不是必须的，但是通过学习它将为自己创造一个美好的世界。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

首先来看看什么是设计模，式并了解 JavaScript 中的常用的几种设计模式。然后你可以再买书看看，这项技能是编程经验总结，不会过时。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

以上基础部分和一般开发技能也可以作为任何其他前端框架或库（如 Angular 和 Vue.js）的学习基础。这些都是作为一名前端开发工程师的必备技能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

3）学习 React JS

现在，我们切入正题。你必须学习 React ，学习它成为一名 React 开发人员。学习React的最佳地点是官方网站，这里有 React 最新的中文文档，但作为初学者，它对您来说可能是至关重要的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

假如你看中文文档一下子摸不着头脑，我建议你先看看这两篇文章作为你最简入门：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

React入门教程 – 概述和实际演练（React官方推荐的入门教程）
React 教程：2018年学习 React.js 的综合指南，通过实例讲解 React 最重要的部分和知识点。

入门后建议你看看构建 React 应用的基础知识，以及官方文档中的一些细节知识：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

React 教程：如何使用 webpack 4 和 Babel 构建 React 应用(2018)
React 文档中的一些细节以及 React 官方入门教程：简介 React

再深入一点你必须学习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

React 组件模式
React 教程：函数作为子组件(Function as Child Components),即渲染回调(Render Callback)
React 教程：深入理解 React 高阶组件（Higher Order Component，简称：HOC）

当然 React 周边一些非常有用的库，比如：Redux，MobX，React-Router等等，也是非常必要的，我们将在后面详细说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

4）学习构建工具

如果你想成为一名专业的 React 开发人员，那么你应该花一些时间熟悉一下你将作为 web 开发人员使用的工具，比如内置工具，单元测试工具，调试工具等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

首先，本路线图中提到了一些构建工具：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

Package Managers文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

npm
yarn
pnpm
Task Runners
npm scripts
gulp
Webpack, 中文文档
Rollup
Parcel

顺便说一下，学习所有这些工具并不重要，对于初学者来说，只需学习 npm 和 Webpack 应该足够了。一旦您对 Web 开发和 React 生态有了更多的了解，您就可以探索其他工具了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

如果您想学习 Webpack ，那么【专题课】从0到1深度理解webpack 是一个很好的开始。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

5）样式（Styling）

如果您的目标是成为像 React 开发人员这样的前端开发人员，那么了解一些样式（Styling）相关的知识非常有必要。线路图中提到了很多东西，比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

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

看到蒙了是吧，这么多东西？不用担心，你不必学会每一样技能，根据你团队情况和个人喜好，每种学习一样就好，其他都类似，掌握应该不难。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

6）State(状态) 管理

这是 React 开发人员关注的另一个重要领域。愚人码头注：很多人都说 React 其实很简单，只要懂得 2 件事情，就是 Prop(属性) 和 State(状态)，可见 State(状态) 管理的重要性。路线图提到了要掌握的以下概念和框架：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

如果这对你来说太多了的话，我建议你首先只关注 Redux ，因为 Redux 是目前应用最广泛的 React 状态（State）管理库，等有了一定的经验之后再学习其他内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

7）类型检查

由于 JavaScript 是一种弱类型语言，弱（或松散）类型的语言不强制执行对象的类型。这允许更多的灵活性，但是又将类型安全和类型检查拒之门外。所以编译器无法捕捉这些与类型相关的 bug 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

随着应用程序的增长，您可以通过类型检查捕获大量错误，特别是如果您可以使用 JavaScript 扩展语言(如 Flow 或 TypeScript ) 来对整个应用程序进行类型检查的话。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

但即使你不使用它们，React 也有一些内置的类型检查功能，学习它们可以帮助你尽早发现 bug 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

TypeScript 如今增长势头很猛，并且 TypeScript 也可以编写 Angular 和 Vue 等应用，所以我认为 TypeScript 值得我们学习。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

8）表单

除了类型检查之外，还可以学习像 Redux Form 这样的表单助手，它提供了在 Redux 中管理表单状态的最佳方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

除了Redux Form之外，您还可以查看：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

9）路由

组件是 React 功能强大的声明性编程模型的核心，而路由组件是任何应用程序的重要组成部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

React-Router 提供了一组导航组件，这些组件与您的应用程序以声明方式组合。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

无论您是希望为Web应用程序设置可收藏的 URL 还是在 React Native 中导航的可组合方式，React Router 都可以在 React 渲染的任何位置工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

除了 React-Router 之外，您还可以查看：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

10）API 客户端

当今，您很少会去构建一个独立的 GUI ，相反，您将有更多机会使用 REST 和 GraphQL 等API构建与其他应用程序通信的应用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

值得庆幸的是，React 开发人员可以使用许多API客户端，以下是它们的列表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

REST API 方面，国内目前很多人使用 Axios，理由也很简单，它确实简单好用，再加上 Vue2.0之后，尤大大推荐大家用 axios 。Axios 本质上也是对原生 XHR 的封装，和 jQuery Ajax 类似，只不过它是Promise 的实现版本，符合最新的 ES 规范，从它的官网上可以看到它有以下几条特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

从 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 的优势主要优势也在于它更加底层：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式

GraphQL 方面推荐 Apollo 。Apollo 客户端是我的最爱，它提供了一种使用GraphQL构建客户端应用程序的简便方法。该客户端旨在帮助您快速构建一个使用GraphQL获取数据并可与任何JavaScript前端一起使用的 UI 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

11）实用程序库（Utility Libraries）

这些库使您的工作更轻松。 React 开发人员可以使用许多实用程序库，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

我不建议你学习所有这些，线路图也是如此建议的。如果你仔细观察 Lodash ，Moment 和 Classnames 是用黄色的，说明你应该从这几个开始学习。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

12）测试

注意，这是 React 开发人员的一项重要技能，经常被忽视，但如果你想比其他开发人员更牛逼，那么你应该学习一些测试库。此外，您还拥有用于单元测试，集成测试和端到端测试的库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

以下是路线图中提到的库列表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

单元测试
Jest
Enzyme
Sinon
Mocha
Chai
AVA
Tape
端到端测试
Selenium, Webdriver
Cypress
Puppeteer
Cucumber.js
集成测试
Karma

您可以更具你们团队或你个人喜好学习所需的库，但是如果你刚开始学习这一块内容的话，我建议你使用 Jest 。当然 Mocha 也受到很多开发者的青睐，但是学习曲线相对较陡，但这也说明了它可以提供更好的灵活性和可扩展性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

13）国际化

这是开发前端的另一个重要主题，帮助你的应用可以在全球使用。您可能需要支持日本，中国，西班牙和其他欧洲国家的本地 GUI 版本和语言包。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

线路图建议您学习以下技术：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

这两个库都提供了 React 组件和 API 来格式化日期，数字和字符串，包括复数和处理翻译。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

14）服务器端渲染

您应该知道服务器端渲染和客户端渲染之间的区别，在讨论支持使用 React 的服务器端渲染的库之前，请先弄清楚他们直接的区别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

好吧，在客户端渲染中，您的浏览器会下载一个最小的HTML页面。然后它渲染 JavaScript 并将内容填充到其中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

在服务器端呈现的情况下，React组件在服务器上呈现，输出的HTML内容将传递到客户端或浏览器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

线路图建议遵循服务器端渲染：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

但是，我建议只学习 Next.js 应该足够了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

15）静态站点生成器

Gatsby.js 是一个现代静态站点生成器。您可以使用 Gatsby 创建个性化的网站。它们将您的数据与 JavaScript 相结合，并创建格式良好的HTML内容。React 官网就是用 Gatsby.js 生成的。例如：React 中文文档文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

16）后端框架集成

React on Rails 将 Rails 与 Facebook 的 React 前端框架（服务器渲染）集成在一起。它提供 Server 渲染，通常用于SEO爬虫索引和UX性能，而不是 rails/webpacker 提供的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

17）移动端应用

这是学习 React 真正有好处的另一个领域，因为 React Native 正迅速成为用 JavaScript 开发原生移动应用程序外观和体验的标准方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

线路图建议您学习以下库：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

但是，我认为，只要学习 React Native 就足够了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

18）桌面端应用

还有一些基于 React 的框架来构建像 React Native Windows 这样的桌面 GUI，它允许您使用 React 构建本机 UWP 和 WPF 应用程序。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

线路图建议使用以下库：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

我个人推荐使用 Electron ，还是比较简单方便的，其他我也没用过，还要进一步探索。如果你已经掌握了 React ，你可以看一下它们。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

19）虚拟现实

如果您有兴趣构建基于虚拟现实的应用程序，那么您还有一些像 React 360 这样的框架，它允许您使用React 创建 360° 全景体验和VR体验。如果您对该领域感兴趣，可以进一步探索 React 360 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html

小结

这就是2018年的 React 学习线路图。它确实非常全面，很有可能你在2018年剩下的时间里都不会学到所有这些，但不要担心，所有的技术在2019年仍然有效，你可以放心地将它用作2018年的React 学习线路图。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8180.html