2019 年 React 学习路线图
爱爱爱爱伱亮
8
作者 | 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 开发的三大支柱。
HTMLHTML 是 Web 开发人员最重要的技能之一，因为它为网页提供了基本结构。
CSSCSS 用于设置网页样式，让网页看起来更好看。
JavaScriptJavaScript 让网页具备交互性。React 是基于 JavaScript 的，因此在学习 React 之前，你应该先了解 JavaScript。
通用的开发技能无论你是前端开发人员还是后端开发人员，甚至是全栈工程师，都必须了解一些能够让你在编程世界中生存下来的通用开发技能。
学习 GIT你必须在 2018 年完全了解 Git。尝试在 GitHub 上创建一些存储库，与其他人共享你的代码，并学习如何在你喜欢的 IDE 中克隆 Github 上的代码。
了解 HTTP(S) 协议如果你想成为一名 Web 开发人员，那么了解 HTTP 绝对是有必要的。
我不是要你去阅读 HTTP(S) 规范，但你至少应该熟悉常见的 HTTP 请求方法，如 GET、POST、PUT、PATCH、DELETE、OPTIONS 以及 HTTP/HTTPS 的工作原理。
学习终端虽然前端开发人员学习 Linux 或终端并不是强制性的，但我强烈建议你熟悉以下终端，了解如何配置你的 shell（bash、zsh、csh）等。
算法和数据结构好吧，这又是一个通用编程技能，成为 React 开发者不一定需要了解这些，但要成为真正的程序员，这是必备技能。
学习设计模式就像算法和数据结构一样，成为 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。
组件 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。
Type Checker由于 JavaScript 不是一种强类型语言，因此编译器不会捕获那些与类型相关的错误。
随着应用程序的增长，你可以通过类型检查捕获大量错误，尤其是如果你可以使用 Flow 或 TypeScript 等 JavaScript 扩展对整个应用程序进行类型检查。
React 也提供了一些内置的类型检查功能，可以用它们帮你尽早发现 bug。
由于 Angular 也使用了 TypeScript，我认为可以同时学习 JavaScript 和 TypeScript。
Form Helper除了 Type Checker 之外，还可以学习像 Redux Form 这样的 Form Helper，它提供了在 Redux 中管理表单状态的最佳方法。除了 Redux Form 之外，还有 Formik、Formsy 和 Final。
路由组件是 React 声明性编程模型的核心，而路由组件是应用程序的重要组成部分。
React Router 提供了一组导航组件，这些组件可以通过声明的方式与你的应用程序组合在一起。
除了 React Router 之外，你还可以看看 Router 5 和 Redux-First Router。
API 客户端在今天的世界中，你很少会构建独立的 GUI，相反，你将有更多机会使用 REST 和 GraphQL 等 API 构建与其他应用程序发生交互的东西。
值得庆幸的是，React 开发者可以使用很多 API 客户端：
REST Fetch
SuperAgent
axios
GraphQL Apollo
Relay
urql
Apollo 客户端是我的最爱，它提供了一种使用 GraphQL 构建客户端应用程序的简便方法。Apollo 可以帮你快速构建使用 GraphQL 获取数据的 UI，并可以与任意 JavaScript 前端一起使用。
辅助库这些库可以让你的工作变得更轻松。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
我这么用心，不给点个好看推荐下吗？
相关文章
-
React到底是什么？为什么它那么受欢迎？它到底解决了什么问题？答案：React是一个用于构建用户界面的、声明式、组件化的JavaScript库。 JavaScript库？声明式？组件化？不是说好了是小白秘籍吗？ 好吧，上面那行字是从官方网站拷过来拼凑的。接下来，让我用另一种方式为你讲解React。很负责任地说，只要你
天子手游5
5 0
0 条评论
-
创投圈大小事，你都能尽在掌握 腾讯创业|ID：qqchuangye 【腾讯编者按】布拉德·克里斯平（BradCrispin）原本是客户服务行业的一名从业人员，在30岁之后才开始学习编程，最后成为在线教育平台Udacity的高级工程师。他是怎么做到的？近日，克里斯平在社交网站Medium撰文讲述了自己从零开始学习编程到
fdgsfg3
7 2
0 条评论
-
FlutterWidget的设计灵感来源于React,是一款原生就立足于响应式的UI框架。本文基于Flutter特点，试图结合闲鱼在Flutter的工程应用来谈下我们对FlutterReact编程范式的思考和践行。 Reactive的诞生谈起UI总会讲到MVC，它出现的时间很早，那时候还没有普及现代GUI广泛使用的事件
Hi一斤染
7 6
0 条评论
-
作者|OvieOkeh 译者|王强 这个题目可能有点夸张，但不管怎样Svelte和它的理念就是这样的。如果你还没听说过Svelte的话就去了解一下吧--你会见证一场革命的，它将取得空前的成就（没有给Svelte团队增加压力的意思）。 本文不是Svelte的入门教程。Svelte团队已经做了一份很棒的交互式手把手入门教
蔡佳佳c
4 0
0 条评论
-
JavaScript每天都在出现大量的框架和工具，而React是除了上次我们提到的Vue和Ember之外另一款比较流行的框架。但因为新的工具每天都在不断的出现，开发者在尝试时总会有些不知所措。因此，当为你的新React项目选择合适的IDE，合适的可视化工具甚至是合适的样式时，你都会有很多选择，你该怎么选择合适的？这是
雁屋花子smile
5 0
0 条评论
-
React已经火到不行了，相信大家伙儿或多或少的看过或者自己动手实践过一些demo，所以关于一些基础的概念我这里就不再赘述，大家可以在km或者google上搜索"React入门"。网上的大多数demo都是静态渲染的例子，只是玩具，并不能很好的体现实际开发过程。兴趣部落PC版在生产环境采用了React，这里给大家分享一下
gZT82OQW4zFeN
4 1
0 条评论
-
但是我们知道，JavaScript作为一个动态语言，你想用静态的方式去分析它是非常复杂一件事情，我们只要稍微在刚才的例子中加入一点动态的写法，这些框架就可能编译失败。 下面是一个用react-reconciler这个包去实现一个迷你ReactDOM的例子，我们需要给ReactReconciler方法传入一个配置，这
葛启云123n胁
3 1
0 条评论
-
React是最热门的前端技术，这已不是什么秘密。越来越多的大厂，都优先考虑用React做项目，在面试中也经常会考察对React的理解。 React技术是开发Web应用的一把利器。不过在实际工作中，很多前端开发者都存在一个误区：过于关注和强调"最新框架""最新版本"，缺乏对前端发展历史的深度了解，也缺少对前端新技术新领域
心情不好吼力豪
8 6
0 条评论
-
作者：zhiqiang21 blog.csdn.net/yisuowushinian/article/details/78011330 前言： 虽然说是记录fis3+react的一次开发经历。但是在项目的上线前几天收到公司TC委员会的邮件，因为react的开源协议让找到react的替代方案，并且逐步下线线上的react
小情绪ZK涡
3 0
0 条评论
-
导读：如果你正在用React.js或ReactNative来开发用户界面的话，试试这些框架。本文字数：7739，阅读时长大约：9分钟 https://linux.cn/article-13796-1.html 作者：AmitDua 译者：zpl1025 React.js和ReactNative都是用来开发用户界面（U
顾俸虑凸雇
8 3
0 条评论
