react.js开发_2020 React.js开发人员路线图

react.js开发

成为阅读JS开发人员的插图指南，其中包含相关课程的链接

React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一。

在Facebook的支持下，React JS（也称为React）在近年来得到了长足的发展，并已成为基于组件的GUI开发的事实上的库。

尽管还有其他前端框架（如Angular和Vue.js）可用，但React的与众不同之处可能在于它仅专注于基于组件的GUI开发，而没有在其他领域进行入侵。

例如， Angular是一个完整的框架，并为您提供了许多现成的功能，例如依赖注入，路由系统，表单处理，HTTP请求，动画，i18n支持以及功能强大的模块系统，易于使用延迟加载。

因此，如果您已经具有执行这些任务的库，或者可能根本不需要它们，那么React是一个不错的选择，但是学习React并不是那么容易，尤其是如果您刚开始进行Web开发时。

当我今年开始学习React JS时，我具有一定的Web开发背景，之前使用过HTML ， CSS和JavaScript ，并且对前端开发了解一两件事，但是学习React JS也很费劲。实际上，我仍在学习。

当我做一些关于学习React JS正确方法的研究时，我遇到了这份出色的React Developer RoadMap，概述了什么是强制性的，什么是好的知识以及作为React开发人员可以学到的一些额外知识。

这个React Developer RoadMap是由adam-golab构建的，它概述了您可以采用的路径以及想要成为一名React开发人员所要学习的库。

因此，如果您想知道作为React开发人员接下来应该学什么？那么此路线图可以为您提供帮助。

与我之前分享的DevOps路线图类似，此React JS路线图也非常适合探索React，您可以使用它来成为一个更好的React开发人员。

但是，如果您想知道在哪里可以学习这些必修技能，那么不用担心，我还分享了一些免费和付费在线课程，您可以利用这些课程学习这些技能。

2020 React.js开发人员路线图

无论如何，这是我正在谈论的React开发人员路线图：

图片来源： https : //github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png

现在，让我们逐步走过路线图，了解如何学习在2020年成为React Developer的基本技能：

1.基础

无论您为Web开发学习哪种框架或库，都必须了解基础知识，而当我说基础知识时，我指的是HTML，CSS和JavaScript，这三个是Web开发的三大Struts。

HTML

它是Web开发人员的第一Struts和最重要的技能之一，因为它提供了Web页面的结构。

如果您想学习HTML，可以在Udemy上查看“ 使用HTML5和CSS3构建响应式真实世界网站”课程。

而且，如果您不介意从免费资源中学习，那么还可以查看我的免费HTML课程列表。

CSS

它是Web开发的第二大Struts，用于对网页进行样式设置，以使其外观精美。如果您想学习CSS，那么可以在我的免费Web开发课程列表中找到一些免费CSS 课程。

JavaScript

这是Web开发的第三大Struts，用于使您的网页具有交互性。这也是React框架背后的原因，因此在尝试学习React JS之前，您应该了解JavaScript并且非常了解它。

如果您想从头开始学习JavaScript，建议您加入2020年完整JavaScript课程：构建实际项目！课程。简直太棒了。

首先，您还可以查看我的免费JavaScript课程列表。

顺便说一句，与其单独学习这些技术，不如参加完整的Web开发课程，例如Colt Steele的The Web Developer Bootcamp ，它将教您成为Web开发人员所需的所有基本技能。

2.一般发展技能

无论您是前端开发人员还是后端开发人员，甚至是全栈软件工程师，都没有关系。您必须了解一些通用的开发技能才能在编程世界中生存，这里是其中一些列表

2.1学习GIT

您必须在2020年完全了解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 Command Line Basics课程中。

而且，如果您需要更多选择，还可以浏览我为开发人员准备的免费Linux课程列表。

2.4。 算法和数据结构

好吧，这再次是一般的编程技能之一，成为React开发人员并不一定需要，但首先要成为一名程序员绝对需要。

要学习数据结构和算法，您可以读一本书或参加一门不错的课程，例如“ 算法和数据结构”的第1部分和第2部分。

如果您需要更多选择，还可以查看我的免费数据结构和算法课程列表。

而且，如果您更喜欢书籍而不是课程，那么这里列出了每个开发人员都应该阅读的10本算法书籍。

2.5。 学习设计模式

就像算法和数据结构一样，学习设计模式以成为React Developer并不是必须的，但是通过学习它，您将为自己创造一个美好的世界。

对设计模式进行了尝试，并测试了软件开发中常见问题的解决方案。

了解它们将帮助您找到可以经受时间考验的解决方案。您可以阅读有关设计模式的几本书来学习它们，也可以参加诸如Design Patterns库之类的综合课程。

如果需要更多选择，还可以查看我的OOP和设计模式课程列表以获取更多想法。

3.学习React.js

现在，这是主要的交易 。您必须学习React并充分学习才能成为React开发人员。学习React的最佳地方是官方网站，但作为一个初学者，它可能会让您有些不知所措。

这就是为什么我建议您注册几门课程，例如Max的React MasterClass或Stephen Grider的Redux的Modern React来学习React的方法。

这两个是我最喜欢的React课程，也受到数千名Web开发人员的信任。如果您对自己的React技能很认真，我强烈建议您看看这些课程。

而且，如果您不介意从免费资源中学习，那么还可以查看此免费的React JS课程列表。

4.学习构建工具

如果您想成为专业的React开发人员，那么应该花一些时间来熟悉将用作Web开发人员的工具，例如内置工具，单元测试工具，调试工具等。

从这里开始，是本路线图中提到的一些构建工具：

包装经理

在roadmpa中提到了很多要管理的软件包，但是学习所有这些工具并不重要，仅学习npm和Webpack对初学者来说就足够了。一旦您对Web开发和React生态系统有了更多的了解，就可以探索其他工具。

如果您想学习Webpack，那么Webpack 2：完整的开发人员指南是一个很好的起点。

如果您打算成为像React开发人员这样的前端开发人员，那么了解一点样式就不会有任何伤害。即使RoadMap提到了很多诸如JS中CSS预处理器，CSS框架，CSS体系结构和CSS之类的内容。

我建议您至少学习Bootstrap，这是您不时使用的最重要CSS框架。而且，如果您需要一门课程，那么从5个项目从头开始创建Bootstrap 4是一个方便的课程。

而且，如果您想学习引导程序，如果想向前走一步，还可以学习Materialise或Material UI。

6.国家管理

这是React开发人员要关注的另一个重要领域。该路线图提到了以下要掌握的概念和框架：

组件状态/上下文API
ReduxAsync操作（副作用）

如果这听起来对您来说太大了，我建议您只专注于Redux，这很棒，Stephen Grider提供了一门很棒的课程来很好地学习Redux框架。

Max的React 16-完整指南和Stephen Grider的带有Redux的Modern React课程还详细介绍了React和Redux中的状态管理。

7.类型检查器

由于JavaScript不是强类型语言，因此您没有奢侈的编译器来捕获与这些与偷偷摸摸的类型相关的错误。

随着应用程序的增长，类型检查会捕获很多错误，特别是如果您可以使用Flow或TypeScript之类JavaScript扩展来对整个应用程序进行类型检查时，尤其如此。

但是，即使您不使用它们，React也具有一些内置的类型检查功能，学习它们可以帮助您及早发现错误。

由于Angular也使用TypeScript，所以我认为有必要将TypeScript与JavaScript一起学习，如果您也这么认为，则可以查看Udemy的Ultimate TypeScript课程。

而且，如果您需要更多选择，并且不介意从免费资源中学习，那么还可以查看我为Web开发人员提供的免费TypeScript课程列表。

8.表格助手

除了类型检查器之外，最好学习Redux Form之类的Form Help，它提供了在Redux中管理表单状态的最佳方法。除了Redux Form，您还可以查看Formik，Formsy和Final表单。

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的带有Redux的Modern React课程也都详细介绍了React Router。

10. API客户端

在当今世界，您很少会构建独立的GUI，相反，您更有可能构建使用REST和GraphQL之类的API与其他应用程序通信的内容。

值得庆幸的是，有许多可用于React开发人员的API客户端，下面是它们的列表：

休息

取
超级代理
轴距

GraphQL

阿波罗

中继

urql

我最喜欢Apollo Client，它提供了一种使用GraphQL生成客户端应用程序的简便方法。客户端旨在帮助您快速构建可使用GraphQL提取数据的UI，并可与任何JavaScript前端一起使用

顺便说一句，如果您不了解GraphQL和REST，建议您花一些时间来学习它们。如果您需要课程，以下是我的建议：

带有React的GraphQL：完整的开发人员指南

REST API设计，开发和管理

11.实用程序库

这些库使您的工作更加轻松。 React开发人员可以使用许多实用程序库，如下所示：

Lodash
时刻
类名
数字
RxJ
SRamda

我不建议您学习所有这些内容，RoadMap也是如此。如果仔细观察，只会以黄色绘制Lodash，Moment和Classname，表示您应该从它们开始。

12.测试
现在，这是React Developers经常被忽略的一项重要技能，但是如果您想在竞争中保持领先地位，那么您应该专注于学习可帮助您进行测试的库。在这里，您还具有用于单元测试，集成测试和端到端测试的库。

以下是路线图中提到的库列表：
单元测试

笑话
酵素
诗乃
摩卡咖啡
hai
AVA
胶带

端到端测试

Selenium
网络驱动
柏
木偶戏
Cucumber.js
Nightwatch.js

整合测试

业力

您可以学习所需的库，但建议使用Jest和Enzyme。 完整的React Web开发人员课程（与Redux一起使用）还涵盖了测试React应用程序，涵盖了Jest和Enzyme。

13.国际化
这是开发在全球范围内使用的前端的另一个重要主题。您可能需要支持日本，中国，西班牙和其他欧洲国家的本地GUI版本。

路线图建议您学习以下技术，但都知道这些技术：

React国际
Reacti18
下一个

这两个库都提供了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搜寻器索引编制和UX性能，而rails / webpacker不提供。

17.手机
这是学习React真正受益的另一个领域，因为React NativeSwift成为使用JavaScript原生外观开发移动应用程序的标准方法。

路线图建议您学习以下库：

React本机
科尔多瓦
电话间隙

但是，我认为，仅仅学习React Native就足够了。

值得庆幸的是，还有一些学习React Native的好课程，例如Stephen Grider的《完整React Native和Redux课程》，它将教您如何快速构建完整的React Native移动应用程序！

18.桌面
还存在一些基于React的框架来构建桌面GUI，例如React Native Windows，该框架允许您使用React构建本机UWP和WPF应用程序。

该框架建议以下库：

质子
本机
电子
React本机
视窗

但是，它们都是用于高级探索的。如果您已经掌握了React，那么可以看看它们。

19.虚拟现实
如果您对构建基于虚拟现实的应用程序感兴趣，那么您还可以使用React 360之类的框架，该框架使您能够使用React激发令人兴奋的360和VR体验。如果您对该领域感兴趣，则可以进一步探索React 360。

这就是2020 React RoadMap的全部内容。它确实非常全面，您很有可能在剩余的2020年中不会学习所有这些知识，但是不用担心，所有技术在2021年仍然有效，您可以将其有效地用作2021 React RoadMap。

您可能喜欢的其他编程文章
学习Python的10个理由
您可以学习的10种编程语言
每个Java开发人员都应该知道的10种工具
学习Java编程语言的10个理由
Java和Web开发人员应该学习的10个框架
成为更好的Java开发人员的10条技巧
值得学习的5大Java框架
每个Java开发人员都应该知道的10个测试库
适用于高级开发人员的DevOps路线图

结束语

感谢您到目前为止阅读本文。您可能会认为有太多的东西要学习，有太多的课程可以参加，但是您不必担心。

您很有可能已经了解了大多数内容，并且还有很多有用的免费资源可供您使用，我也将它们与最好的资源在这里和那里联系在一起，这些资源当然不是免费的，但是完全值得您的时间和金钱。

我特别喜欢Udemy课程，因为它们非常实惠，并且提供的价值很小，但您可以自由选择想要的课程。

归根结底，您应该对这里提到的事情有足够的知识和经验。

祝您在React JS的旅途中好运！当然这并不容易 ，但是通过遵循此路线图和指南，您距离成为React开发者又近了一步，您一直希望成为

如果您希望收到每个新帖子的通知，请考虑输入此博客的订阅，并且不要忘记关注 javarevisited在Twitter和javinpaul上中等。

祝您在React旅途中一切顺利！

PS —如果您希望通过诸如Hooks之类的一些现代功能深入学习React.js，那么您也可以查看我的清单最好的React.js课程开始您的旅程。

翻译自: https://hackernoon.com/the-2020-reactjs-developer-roadmap-8q143yan

react.js开发