2019 年 React 学习路线图

译者 | javinpaul 翻译者 | 邪见

以后他们早已如是说了 2019 年 Vue 自学蓝图，而 React 做为现阶段应用领域最广为的后端架构，在 Facebook 的全力支持下，近几年同时实现了横越式的产业发展，因而，他们将下述中如是说 2019 年 React 自学蓝图，期望给先挑 React 的合作开发相关人员许多先进经验。

这是 2018 年的 React 蓝图。它十分全面性，2018 年剩的天数可能将不如你专业委员会大部份那些，但千万别害怕，大部份的控制技术在 2019 年依然有效率。

https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png

无论你要自学别的 Web 合作开发架构或库，都要掌控基本上知识，如 HTML、CSS 和 JavaScript，这四个是 Web 合作开发的五大支撑点。

HTML 是 Web 合作开发相关人员最重要的专业技能众所周知，即使它为页面提供更多了基本上内部结构。

CSS 用作增设页面式样，让页面看上去更快看。

JavaScript 让页面具有互动性。React 是如前所述 JavaScript 的，因而在自学 React 以后，你如果先介绍 JavaScript。

不论你是后端合作开发相关人员却是后端合作开发相关人员，即使是全栈技师，都要介绍许多能够让你在编程世界中生存下来的通用型合作开发专业技能。

你要在 2018 年完全介绍 Git。尝试在 GitHub 上创建许多存储库，与其他人共享你的代码，并自学如何在你喜欢的 IDE 中克隆 Github 上的代码。

如果你想成为一名 Web 合作开发相关人员，那么介绍 HTTP 绝对是有必要的。

我不是要你去阅读 HTTP(S) 规范，但你至少如果熟悉常见的 HTTP 请求方法，如 GET、POST、PUT、PATCH、DELETE、OPTIONS 以及 HTTP/HTTPS 的工作原理。

虽然后端合作开发相关人员自学 Linux 或终端并不是强制性的，但我强烈建议你熟悉以下终端，介绍如何配置你的 shell（bash、zsh、csh）等。

好吧，这又是一个通用型编程专业技能，成为 React 合作开发相关人员不一定需要介绍那些，但要成为真正的程序员，这是必备专业技能。

就像算法和数据内部结构一样，成为 React 合作开发相关人员并不一定要自学设计模式，但学好设计模式会让你变得更快。介绍设计模式将帮你找到能够经受住天数考验的解决方案。

你要学好 React 才能成为一名 React 合作开发相关人员。自学 React 最好的资源是它的官方网站，但做为初学者，它对你来说可能将有点难。

如果你想成为一名专业的 React 合作开发相关人员，那么你如果花许多天数熟悉一下你将做为 Web 合作开发相关人员需要使用的工具，比如构建工具、单元测试工具、调试工具等。

以下是蓝图中列出的构建工具：

包管理器：

npm

yarn

pnpm

任务执行器

npm 脚本

gulp

WebPack

Rollup

Parcel

顺便说一句，并非要自学大部份那些工具，对于初学者来说，自学 npm 和 Webpack 如果足够了。在你对 Web 合作开发和 React 生态系统有了更多的介绍后，你就可以自学其他工具。

如果你的目标是成为 React 合作开发相关人员，介绍许多式样相关的知识只会有益无害。蓝图中提到了很多 CSS 相关的东西，比如 CSS 预处理器、CSS 架构、CSS 架构和 JS 中的 CSS。

我建议你至少自学一下 Bootstrap，这是你经常会用到的 CSS 架构。

如果你想进一步自学 bootstrap，也可以自学 Materialise 或 Material UI。

这是 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

如果东西太多，我建议你只关注 Redux。

由于 JavaScript 不是一种强类型语言，因而编译器不会捕获那些与类型相关的错误。

随着应用领域程序的增长，你可以通过类型检查捕获大量错误，尤其是如果你可以使用 Flow 或 TypeScript 等 JavaScript 扩展对整个应用领域程序进行类型检查。

React 也提供更多了许多内置的类型检查功能，可以用它们帮你尽早发现 bug。

由于 Angular 也使用了 TypeScript，我认为可以同时自学 JavaScript 和 TypeScript。

除了 Type Checker 之外，还可以自学像 Redux Form 这样的 Form Helper，它提供更多了在 Redux 中管理表单状态的最佳方法。除了 Redux Form 之外，还有 Formik、Formsy 和 Final。

组件是 React 声明性编程模型的核心，而路由组件是应用领域程序的重要组成部分。

React Router 提供更多了一组导航组件，那些组件可以通过声明的方式与你的应用领域程序组合在一起。

除了 React Router 之外，你还可以看看 Router 5 和 Redux-First Router。

在今天的世界中，你很少会构建独立的 GUI，相反，你将有更多机会使用 REST 和 GraphQL 等 API 构建与其他应用领域程序发生交互的东西。

值得庆幸的是，React 合作开发相关人员可以使用很多 API 客户端：

Fetch

SuperAgent

axios

Apollo

Relay

urql

Apollo 客户端是我的最爱，它提供更多了一种

那些库可以让你的工作变得更轻松。React 合作开发相关人员可以使用很多辅助库，如下所示：

Lodash

Moment

classnames

Numeral

RxJS

Ramda

那些不一定都要学，蓝图中的 Lodash、Moment 和 Classnames 是用黄色标注的，因而如果先从它们开始自学。

测试是 React 合作开发相关人员的一项重要专业技能，但经常被忽视，如果你想在竞争中保持领先，就要自学许多用作测试的库。那些库可用作单元测试、集成测试和端到端测试。

以下是蓝图中提到的库：

Jest

Enzyme

Sinon

Mocha

Chai

AVA

Tape

Selenium, Webdriver

Cypress

Puppeteer

Cucumber.js

Nightwatch.js

Karma

你可以自学你想自学的库，但建议一定要自学 Jest 和 Enzyme。

这是后端合作开发的另一个重要主题。你可能将需要全力支持日本、中国、西班牙和其他欧洲国家的本地 GUI 版本。

蓝图中建议你自学以下控制技术，它们都很好理解：

React Intl

React i18next

这两个库都提供更多了 React 组件和 API 来格式化日期、数字和字符串，包括复数和处理翻译。

你可能将会想，服务器端渲染和客户端渲染之间有什么区别。在使用客户端渲染时，你的浏览器会下载一个最小的 HTML 页面，然后通过 JavaScript 并将内容填充到页面中。

在使用服务器端渲染时，React 组件是在服务器上进行渲染的，将输出的 HTML 内容传到客户端或浏览器。

蓝图推荐了以下的服务器端渲染：

Next.js

After.js

Rogue

不过我建议自学 Next.js 如果足够了，Max 的“ React 16 — The Complete Guide”也涵盖了 Next.js 的基本上知识。

Gatsby.js 是一个现代静态站点生成器。你可以使用 Gatsby 创建个性化的登录网站体验。它将你的数据与 JavaScript 相结合，并创建格式良好的 HTML 内容。

React on Rails 将 Rails 与 Facebook 的 React 后端架构（服务器渲染）集成在一起。它提供更多了服务器渲染，通常用作 SEO 爬虫索引和 UX。

React Native 正迅速成为使用 JavaScript 合作开发具有原生外观的移动应用领域程序的标准方法。

蓝图中建议你自学以下库：

React Native

Cordova/PhoneGap

但我认为只要自学 React Native 就足够了。

还有许多如前所述 React 的架构可用于构建像 React Native Windows 这样的桌面 GUI，让你可以使用 React 构建原生 UWP 和 WPF 应用领域程序。

蓝图建议使用以下几个库：

Proton Native

Electron

React Native Windows

它们都是进阶的内容，如果你早已掌控了 React，可以看一下它们。

如果你对构建如前所述虚拟现实的应用领域程序感兴趣，还可以介绍以下像 React 360 这样的架构，让你可以通过 React 合作开发 VR 体验。如果你对这个领域感兴趣，可以进一步介绍 React 360。

https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02

我这么用心，不给点个好看推荐下吗？👇