成为阅读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开发人员。
但是，如果您想知道在哪里可以学习这些必修技能，那么不用担心，我还分享了一些免费和付费在线课程，您可以利用这些课程学习这些技能。
2018 React开发人员路线图
无论如何，这是我正在谈论的React Developer RoadMap：
现在，让我们逐步走过RoadMap，了解如何学习在2018年成为React Developer的基本技能：
1.基础
无论您为Web开发学习哪种框架或库，都必须了解基础知识，而当我说基础知识时，我指的是HTML，CSS和JavaScript，这三个是Web开发的三大支柱。
的HTML
它是Web开发人员的第一支柱和最重要的技能之一，因为它提供了Web页面的结构。
如果您想学习HTML，可以在Udemy上查看“ 使用HTML5和CSS3构建响应式现实世界网站”课程。
如果您不介意从免费资源中学习，那么也可以查看我的免费HTML课程列表。
的CSS
它是Web开发的第二个支柱，用于对网页进行样式设置，以使网页看起来不错。 如果您想学习CSS，那么可以在我的免费Web开发课程列表中找到一些免费的CSS 课程 。
的JavaScript
这是Web开发的第三大支柱，用于使您的网页具有交互性。 这也是React框架背后的原因，因此在尝试学习React JS之前，您应该了解JavaScript并且非常了解它。
如果您想从头开始学习JavaScript，建议您加入完整的JavaScript课程2018：构建实际项目！ 课程。 太棒了。
首先，您还可以查看我的免费JavaScript课程列表。
顺便说一句，与其单独学习这些技术，不如参加完整的Web开发课程，例如Colt Steele 的Web Developer Bootcamp ，它将教您成为Web开发人员所需的所有基本技能。
2.一般发展技巧
无论您是前端开发人员还是后端开发人员，甚至是全栈软件工程师，都没有关系。 您必须了解一些通用的开发技能才能在编程世界中生存，这里是其中一些列表
2.1学习GIT
您必须在2018年绝对了解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并不是必须的，但是通过学习它，您将为自己创造一个美好的世界。
对设计模式进行了尝试，并测试了软件开发中常见问题的解决方案。
了解它们将帮助您找到可以经受时间考验的解决方案。 您可以阅读有关设计模式的几本书来学习它们，也可以参加诸如“ 设计模式”库之类的综合课程。
如果您需要更多选择，还可以查看我的OOP和设计模式课程列表以获取更多想法。
3.学习React JS
现在，这是主要的交易 。 您必须学习React并充分学习才能成为React开发人员。 学习React最好的地方是官方网站，但作为一个初学者，它可能会让您有些不知所措。
这就是为什么我建议您注册几门课程，例如Max的React MasterClass或Stephen Grider的React和Redux以学习如何更好地进行React的过程。 这两个是我最喜欢的React课程，也受到成千上万的Web开发人员的信任。
如果您对自己的React技能很认真，我强烈建议您看看这些课程。
而且，如果您不介意从免费资源中学习，那么您也可以查看这份免费的React JS课程列表。
4.学习构建工具
如果您想成为专业的React开发人员，那么应该花一些时间来熟悉将用作Web开发人员的工具，例如内置工具，单元测试工具，调试工具等。
首先，此路线图中提到了一些构建工具：
包装经理
- npm
- 纱
- pm
- 任务执行者
- npm脚本
- 吞咽
- Webpack
- 卷起
- 包
顺便说一句，学习所有这些工具并不重要，仅学习npm和Webpack对于初学者就足够了。 一旦您对Web开发和React生态系统有了更多的了解，就可以探索其他工具。
如果您想学习Webpack，那么Webpack 2：完整的开发人员指南是一个很好的起点。
5.样式
如果您打算成为像React开发人员这样的前端开发人员，那么了解一点样式就不会有任何伤害。 即使RoadMap提到了很多东西，例如CSS预处理器，CSS框架，CSS体系结构和JS中的CSS。
我建议您至少学习Bootstrap，这将是您不时使用的最重要的CSS框架。 而且，如果您需要一门课程，那么从5个项目从头开始创建Bootstrap 4是一个方便的课程。
而且，如果您想学习引导程序，如果想前进一步，还可以学习Materialise或Material UI。
6.国家管理
这是React开发人员要关注的另一个重要领域。 该路线图提到了以下要掌握的概念和框架：
- 组件状态/上下文API
- Redux
- 异步动作（副作用）
- Redux Thunk
- Redux更好的承诺
- Redux Saga
- 可观察到的Redux
- 帮手
- 重赛
- 重新选择
- 数据持久性
- Redux坚持
- Redux Phoenix
- Redux表格
- 手机
如果这听起来对您来说太大了，我建议您只专注于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，建议您花一些时间来学习它们。 如果您需要课程，以下是我的建议：
11.实用程序库
这些库使您的工作更加轻松。 React开发人员可以使用许多实用程序库，如下所示：
- Lodash
- 时刻
- 类名
- 数字
- RxJS
- 拉姆达
我不建议您学习所有这些内容，RoadMap也是如此。 如果仔细观察，只会用黄色绘制Lodash，Moment和Classname，表示您应该从它们开始。
12.测试
现在，这是React Developers经常被忽略的一项重要技能，但是如果您想在竞争中保持领先地位，那么您应该专注于学习可帮助您进行测试的库 。 在这里，您还具有用于单元测试，集成测试和端到端测试的库。
这是路线图中提到的库列表：
单元测试
- 笑话
- 酵素
- 诗乃
- 摩卡咖啡
- hai
- AVA
- 胶带
端到端测试
- 硒，Webdriver
- 柏
- 木偶戏
- Cucumber.js
- Nightwatch.js
整合测试
- 业力
您可以学习所需的库，但建议使用Jest和Enzyme。 完整的React Web开发人员课程（与Redux一起使用）还涵盖了测试React应用程序，涵盖了Jest和Enzyme。
13.国际化
这是开发在全球范围内使用的前端的另一个重要主题。 您可能需要支持日本，中国，西班牙和其他欧洲国家的本地GUI版本。
路线图建议您学习以下技术，但都知道这些技术：
- 反应国际
- 反应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搜寻器索引编制和UX性能，而rails / webpacker不提供。
17.手机
这是学习React真正受益的另一个领域，因为React Native迅速成为使用JavaScript以本机外观开发移动应用程序的标准方法。
路线图建议您学习以下库：
- 反应本机
- 科尔多瓦/ PhoneGap
但是，我认为，仅仅学习React Native就足够了。
值得庆幸的是，还有一些学习React Native的好课程，例如Stephen Grider的“完整React Native和Redux课程”，它将教您如何快速构建完整的React Native移动应用程序！
18.桌面
还存在一些基于React的框架来构建桌面GUI，例如React Native Windows，该框架允许您使用React构建本机UWP和WPF应用程序。
该框架建议以下库：
- 质子本机
- 电子
- 反应本机Windows
但是，它们都是用于高级探索的。 如果您已经掌握了React，那么可以看看它们。
19.虚拟现实
如果您对构建基于虚拟现实的应用程序感兴趣，那么您也可以使用React 360之类的框架，该框架使您能够使用React激发360和VR体验。 如果您对该领域感兴趣，则可以进一步探索React 360。
这就是关于2018 React RoadMap的全部内容。 它确实非常全面，您很有可能在2018年剩余的时间里不会学习所有这些内容，但是不用担心，所有技术在2019年仍然有效，您可以有效地将其用作2018 React RoadMap。
您可能喜欢的其他编程文章
2018年学习Python的10个理由
您可以在2018年学习的10种编程语言
每个Java开发人员都应该知道的10种工具
学习Java编程语言的10个理由
Java和Web开发人员应在2018年学习的10个框架
在2018年成为更好的Java开发人员的10条技巧
2018年需要学习的5个Java框架
每个Java开发人员都应该知道的10个测试库
适用于高级开发人员的2018 DevOps路线图
结束语
感谢您到目前为止阅读本文。 您可能会认为有很多东西要学习，有太多课程可以参加，但是您不必担心。
您很有可能已经了解了大多数内容，并且还有许多有用的免费资源可供您使用，我也将它们与最好的资源在这里和那里联系在一起，这些资源当然不是免费的，但是完全值得您的时间和金钱。
我特别喜欢Udemy课程，因为它们非常实惠，并且提供的价值很小，但您可以自由选择想要的课程。
归根结底，您应该对这里提到的事情有足够的知识和经验。
祝您在React JS旅途中一切顺利！ 当然这并不容易 ，但是通过遵循此路线图和指南，您距离成为React Developer一步了，您一直希望成为
如果您希望收到每个新帖子的通知，请考虑输入此博客的订阅，并且不要忘记关注 javarevisited在Twitter和javinpaul上中等。
祝您在React旅途中一切顺利！
PS —如果您不介意从免费资源中学习，那么还可以查看我的Free React JS课程列表，开始您的旅程。
From: https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02