后端开发教程 - Java、Spring Boot 实战 - msg200.com
全栈 React.js 开发人员路线图
披露：本篇文章包含附属链接；如果您通过本文提供的不同链接购买产品或服务，我可能会收到报酬。
React JS或简称React是用于开发 Web 应用程序前端或 GUI 的领先 JavaScript 库之一。
在 Facebook 的支持下，React.js 近年来突飞猛进，成为基于组件的 GUI 开发的事实上的库。
虽然还有其他可用的前端框架，例如Angular和Vue.js，但 React 与其他框架的不同之处可能在于它只专注于基于组件的 GUI 开发，而不会侵犯其他领域。
例如，Angular是一个完整的框架，为您提供了许多开箱即用的功能，例如依赖注入、路由系统、表单处理、HTTP 请求、动画、i18n 支持以及具有简单延迟加载的强大模块系统。
因此，如果您已经拥有可以完成这些工作的库，或者您可能不需要它们全部在一起，那么 React.js 是一个不错的选择，但学习 React 并不那么容易，特别是如果您刚开始从事 Web 开发。
今年我开始学习React JS 的时候，我有一些 Web 开发的背景，之前用过HTML、CSS和JavaScript，对前端开发也略知一二，但学习 React JS 仍然很吃力。事实上，我还在学习中。
当我研究学习 React JS 的正确方法时，我偶然发现了这个优秀的 React 开发者路线图，它概述了什么是强制性的，什么是值得了解的，以及作为 React 开发人员可以学习的一些额外内容。
此 React 开发者路线图由adam-golab构建 它概述了成为 React 开发人员可以选择的路径和想要学习的库。
那么，如果你想知道作为一名 React 开发人员下一步应该学习什么？那么这份路线图可以帮助你。
与出色的Web 开发人员路线图和DevOps 路线图类似，这个 React JS 路线图也非常适合探索 React，您可以使用它来成为更好的 React 开发人员。
但是，如果您想知道在哪里学习这些必备技能，那么不用担心，我还分享了一些免费和付费的在线课程，您可以通过这些课程来学习这些技能。
React 开发者路线图
无论如何，以下是我正在谈论的 React 开发者路线图：
图片来源：https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png
现在，让我们逐步浏览路线图，了解如何学习成为 React 开发人员的基本技能：
1.基础知识
无论您学习哪个框架或库进行 Web 开发，您都必须了解基础知识，当我说基础知识时，我指的是HTML、CSS和JavaScript，这三个是 Web 开发的三大支柱。
HTML \
它是 Web 开发人员的第一支柱之一，也是最重要的技能，因为它为网页提供了结构。
如果您想学习 HTML，可以查看Udemy 上的使用 HTML5 和 CSS3 构建响应式真实世界网站课程。
如果您不介意从免费资源中学习，那么您也可以查看我的免费 HTML 课程列表。
CSS \它是 Web 开发的第二大支柱，用于设置网页样式，使其美观。如果您想学习 CSS，可以在我的免费 Web 开发课程
列表中找到一些免费的 CSS 课程。
JavaScript \
这是 Web 开发的第三大支柱，用于使网页具有交互性。它也是 React 框架背后的原因，因此在尝试学习 React JS 之前，你应该了解并熟练掌握 JavaScript。
如果你想从零开始学习 JavaScript，我建议你参加“完整的 JavaScript 课程：构建真实项目！”课程。这门课程真的太棒了。
首先，您还可以查看我的免费 JavaScript 课程列表。
顺便说一句，与其单独学习这些技术，不如参加一个完整的 Web 开发课程，例如Colt Steele 的Web Developer Bootcamp，它将教您成为 Web 开发人员所需的所有基本技能。
2. 通用开发技能
无论你是前端开发人员、后端开发人员，还是全栈软件工程师，你都必须掌握一些通用的开发技能才能在编程世界中生存，以下列出了其中一些技能。
2.1 学习 GIT \如果你想成为一名软件开发者，
你必须掌握Git。尝试在 GitHub 上创建几个代码仓库，与其他人分享你的代码，并学习如何在你最喜欢的 IDE 上从 GitHub 下载代码。
如果您想学习，那么Git Complete：Git 的权威、分步指南是一门很棒的课程。
如果您需要更多选择并且不介意从免费资源中学习，那么您还可以浏览我的免费课程列表来学习 Git。
2.2 了解 HTTP(S) 协议\
如果您想成为一名 Web 开发人员，那么了解 HTTP 并熟悉它是绝对必要的。
我并不是要求你阅读规范，但你至少应该熟悉常见的 HTTP 请求方法，如GET、POST、PUT、PATCH、DELETE、OPTIONS，以及 HTTP/HTTPS 的一般工作原理。
2.3. 学习终端\
虽然前端开发人员不强制学习 Linux 或终端，但我强烈建议你熟悉终端，配置你的 shell（bash、zsh、csh）等。如果你想学习终端和 bash，我建议你看看 Udemy 上的这门Linux 命令行基础课程。
如果您需要更多选择，您还可以浏览我为开发人员提供的免费 Linux 课程列表。
2.4. 算法和数据结构\
好吧，这又是一项通用编程技能，对于成为 React 开发人员来说并不是必需的，但对于成为程序员来说绝对是必需的。
要学习数据结构和算法，您可以阅读几本书或参加一些好的课程，例如算法和数据结构第 1 部分和第 2 部分。
如果您需要更多选择，您还可以查看我的免费数据结构和算法课程列表。
而且，如果你更喜欢书籍而不是课程，这里列出了每个开发人员都应该阅读的10 本算法书籍。
2.5. 学习设计模式\就像算法和数据结构一样，学习设计模式
对于成为 React 开发人员来说 并不是强制性的，但学习它会给你带来很多好处。
设计模式是针对软件开发中常见问题的经过尝试和测试的解决方案。
了解这些模式将帮助你找到经得起时间考验的解决方案。你可以阅读一些关于设计模式的书籍来学习它们，或者参加像“设计模式库”这样的综合课程。
如果您需要更多选择，您还可以查看我的 OOP 和设计模式课程列表以获得更多想法。
3.学习 React JS
现在，重点来了……你必须学习 React，并且学好它才能成为一名 React 开发者。学习 React 的最佳途径是官方网站，但作为初学者，它可能会让你感到有点不知所措。
因此，我建议你参加一些课程，例如 Max 的 React MasterClass 或 Stephen Grider 的 React 和 Redux，以便更好地学习 React。这两门课程是我最喜欢的 React 课程，也受到成千上万 Web 开发者的信赖。
如果您认真对待自己的 React 技能，我强烈建议您看看这些课程。
而且，如果您不介意从免费资源中学习，那么您还可以查看这个免费的 React JS 课程列表。
4. 学习构建工具
如果您想成为一名专业的 React 开发人员，那么您应该花一些时间来熟悉作为 Web 开发人员将使用的工具，例如构建工具、单元测试工具、调试工具等。
首先，以下是此路线图中提到的一些构建工具：
包管理器
- npm
- 纱
- 下午
- 任务运行器
- npm 脚本
- 吞咽
- Webpack
- 汇总
- 包裹
顺便说一句，学习所有这些工具并不重要，对于初学者来说，学习 npm 和 Webpack 就足够了。一旦你对 Web 开发和 React 生态系统有了更多的了解，你就可以探索其他工具了。
如果您想学习 Webpack，那么《Webpack 2：完整的开发人员指南》是一个很好的起点。
5.造型
如果你的目标是成为像 React 开发者一样的前端开发者，那么了解一些样式知识总是好的。尽管路线图提到了很多内容，例如CSS 预处理器、CSS 框架、CSS 架构和 JS 中的 CSS。
我建议你至少学习一下 Bootstrap，它是你以后会经常用到的最重要的 CSS 框架。如果你需要课程，《从零开始构建 Bootstrap：5 个项目》是一门很实用的课程。
而且，如果你想学习 bootstrap，如果你想更进一步，你也可以学习 Materialize 或 Material UI。
6.状态管理
这是 React 开发者需要关注的另一个重要领域。路线图提到了以下需要掌握的概念和框架：
- 组件状态/上下文 API
- Redux
- 异步操作（副作用）
- Redux Thunk
- Redux 更好的承诺
- Redux Saga
- Redux 可观察对象
- 助手
- 重赛
- 重新选择
- 数据持久化
- Redux 持久化
- Redux Phoenix
- Redux 表单
- MobX
如果这对你来说听起来太多了，我建议你只关注 Redux，它很棒，而且 Stephen Grider 有一门很棒的课程可以帮助你很好地学习 Redux 框架。
Max 的《React 16-完整指南》和 Stephen Grider 的《Modern React with Redux》课程也详细介绍了 React 和 Redux 中的状态管理。
7. 类型检查器
由于JavaScript不是强类型语言，因此您无法使用编译器来捕获那些隐蔽的类型相关错误。
随着应用程序的增长，您可以通过类型检查发现很多错误，特别是如果您可以使用 Flow 或TypeScript等 JavaScript 扩展对整个应用程序进行类型检查。
但即使你不使用这些，React 也有一些内置的类型检查功能，学习它们可以帮助你尽早发现错误。
由于 Angular 也使用 TypeScript，我认为值得与 JavaScript 一起学习 TypeScript，如果您也这么认为，那么您可以查看Udemy 上的Ultimate TypeScript课程。
而且，如果您需要更多选择，并且不介意从免费资源中学习，那么您还可以查看我为 Web 开发人员提供的免费 TypeScript 课程列表。
8. 表单助手\
除了类型检查器之外，学习像 Redux Form 这样的表单助手也是不错的选择，它提供了在Redux中管理表单状态的最佳方式。除了 Redux Form，你还可以看看 Formik、Formsy 和 Final form。
9. 路由\
组件是 React 强大的声明式编程模型的核心，路由组件是任何应用程序的重要组成部分。
React Router 提供了一组导航组件，可以以声明方式与您的应用程序组合。
无论您想为您的 Web 应用程序添加可书签的 URL，还是希望在 React Native 中以可组合的方式进行导航，React Router 都可以在 React 渲染的任何地方工作。
除了 React-Router，您还可以查看 Router 5、Redux-First Router 和 React Router。
Max 的《React 16 ---完整指南》和 Stephen Grider 的《Modern React with Redux》课程也详细介绍了 React Router。
10. API 客户端
在当今世界，您很少会构建孤立的 GUI，相反，您更有可能构建使用REST和GraphQL等 API 与其他应用程序通信的东西。
值得庆幸的是，React 开发人员可以使用许多 API 客户端，以下是它们的列表：
休息
- 拿来
- 超级代理
- axios
GraphQL
- 阿波罗
- 中继
- urql
Apollo Client 是我的最爱，它提供了一种使用GraphQL构建客户端应用程序的简便方法。该客户端旨在帮助您快速构建一个使用 GraphQL 获取数据的 UI，并且可以与任何 JavaScript 前端一起使用。
顺便说一句，如果你不了解 GraphQL 和 REST，我建议你花点时间学习它们。如果你需要课程，以下是我的推荐：
11.实用程序库
这些库可以让你的工作更轻松。React 开发人员可以使用许多实用程序库，如下所示：
- Lodash
- 片刻
- 类名
- 数字
- RxJS
- 拉姆达
我不建议你全部学习这些，RoadMap 也不建议。如果你仔细观察，会发现只有 Lodash、Moment 和 Classnames 用黄色标注，说明你应该从它们开始学习。
12. 测试\
测试是 React 开发者经常被忽视的重要技能之一，但如果你想在竞争中保持领先，那么你应该专注于学习那些能够帮助你进行测试的库。这里也提供了用于单元测试、集成测试和端到端测试的库。
以下是路线图中提到的库的列表：\
单元测试
- 笑话
- 酶
- 西农
- 摩卡
- 柴
- AVA
- 磁带
端到端测试
- Selenium、Webdriver
- 柏
- 木偶师
- Cucumber.js
- Nightwatch.js
集成测试
- 因果
你可以学习自己喜欢的库，但推荐使用 Jest 和 Enzyme。完整的 React Web 开发者课程（包含 Redux）也涵盖了测试 React 应用程序，同时涵盖 Jest 和 Enzyme。
13. 国际化\
这是开发全球使用的前端的另一个重要主题。你可能需要支持日本、中国、西班牙和其他欧洲国家的本地 GUI 版本。
路线图建议您学习以下技术，但了解这些技术都是有益的：
- React Intl
- React i18next
这两个库都提供了 React 组件和 API 来格式化日期、数字和字符串，包括复数和处理翻译。
14. 服务器端渲染\
您可能想知道服务器端渲染和客户端渲染之间有什么区别，在讨论使用 React 支持服务器端渲染的库之前，让我们先明确这一点。
在客户端渲染中，你的浏览器会下载一个最小的 HTML 页面，然后渲染 JavaScript 代码并将内容填充到其中。
而在服务器端渲染的情况下，React 组件在服务器上渲染，并将输出的 HTML 内容传递到客户端或浏览器。
路线图建议以下服务器端渲染：
- Next.js
- After.js
- 流氓
但是，我建议只学习 Next.js 就足够了，值得庆幸的是，Max 的React 16 --- 完整指南也涵盖了 Next.js 基础知识，这应该足以作为入门指南。
15. 静态网站生成器\
Gatsby.js 是一款现代化的静态网站生成器。您可以使用 Gatsby 创建个性化、可登录的网站体验。它将您的数据与 JavaScript 相结合，并创建格式良好的 HTML 内容。
16. 后端框架集成\
React on Rails 将 Rails 与 Facebook 的 React 前端框架（服务器渲染）集成在一起。它提供服务器渲染功能，通常用于 SEO 爬虫索引和用户体验性能，而 rails/webpacker 不提供此功能。
17. 移动\
这是学习 React 真正有益的另一个领域，因为React Native正迅速成为使用 JavaScript 开发具有原生外观和感觉的移动应用程序的标准方式。
RoadMap 建议您学习以下库：
- 反应原生
- Cordova/PhoneGap
但是，我认为，仅仅学习 React Native 就足够了。
值得庆幸的是，有一些很好的课程可以学习 React Native，例如 Stephen Grider 的完整 React Native 和 Redux课程，它将教您如何快速构建完整的 React Native 移动应用程序！
18. 桌面\
还存在一些基于 React 的框架来构建桌面 GUI，例如React Native Windows，它允许您使用 React 构建原生 UWP 和 WPF 应用程序。
该框架建议使用以下库：
- 质子原生
- 电子
- React Native Windows
不过，它们都是针对高级探索的。如果你已经掌握了 React，可以看看它们。
19. 虚拟现实\
如果你对构建基于虚拟现实的应用程序感兴趣，那么你也可以使用一些框架，例如 React 360，它允许你使用 React 实现激动人心的 360 度和 VR 体验。如果你对该领域感兴趣，可以进一步探索 React 360。
这就是完整的 React 路线图的全部内容。它确实非常全面，你很可能在今年无法全部学会，但不用担心，所有技术在未来几年仍然有效，你可以有效地将其用作指南，在未来几年成为一名称职的 React 开发人员。
您可能喜欢的其他编程文章
完整的 Java 开发人员路线图
学习 Python 编程语言的 10 个理由
您可以学习的
10 种编程语言 每个 Java 开发人员都应该知道的
10 种工具 学习 Java 编程语言的
10 个理由 Java 和 Web 开发人员应该学习的 10 个框架
成为更优秀 Java 开发人员的 10 个技巧
值得学习的 5 个 Java 框架
每个 Java 开发人员都应该知道的 10 个测试库
高级开发人员的 DevOps 路线图
结束语
感谢您阅读本文。您可能会觉得有太多东西要学，有太多课程要参加，但不必担心。
您很可能已经了解了大部分内容，并且还有很多有用的免费资源可供您使用，我还在这里和那里链接了它们以及最好的资源，这些资源当然不是免费的，但完全值得您花时间和金钱。
我特别喜欢Udemy 课程，不仅因为购买课程时我会获得佣金，还因为它们非常实惠，并且以很少的金额提供了很多价值，但你可以自由选择你想要的课程。
到最后，您应该对这里提到的事情有足够的知识和经验。
祝你的 React JS 之旅一切顺利！这当然不会一帆风顺，但遵循这份路线图和指南，你离成为你一直梦想的 React 开发者又近了一步。
如果您希望收到每篇新文章的通知，请考虑订阅此博客，并且不要忘记在 Twitter 上关注javarevisited和javinpaul。
祝您的 React 之旅一切顺利！