如何学习React是今年大量JavaScript开发者的重要议程。最近的JS状态调查显示，许多开发人员选择React来创建现代网络应用。由于它的受欢迎程度和工作需求，许多JavaScript开发人员想要学习React。在本指南中，我给初学者一个全面的概述，说明如何在学习React的过程中不被其他主题分散注意力或压倒。
学习React [快速|快速|简单]
有意义的学习是没有捷径的。你必须要有耐心。这对开发者也适用。就我个人而言，这就是我喜欢做开发者的原因；总会有新的东西需要学习。如果你保持好奇心，作为一个开发者，你不会感到失望。学习总是一个挑战，也是磨练你技能的机会，只要挑战和你的技能是平衡的。这就是为什么需要时间来学习React。
幸运的是，遵循一个简单的规则，React的学习曲线并不陡峭。学习React，只学习React的步骤，不要让自己在旅途中被其他技术分心。JavaScript和React在不断发展，因为两者都在创新，都想在未来保持相关性；在学习其他东西之前先学习并跟上它们。我听过一些开发者的成功故事，他们从不了解React到在几天到几个月内得到公司的React工作机会。在工作期间，他们有机会学习更多与React一起出现的其他花哨的技术。
"我有一个工作面试，要求我用React完成一个项目。我在周六坐下来学习了《学习React之路》，周日我完成了我的项目，离周三的面试还有很多时间。在一个周末里，我在React中的独立工作能力从0%上升到80%。"(来源)
有几个技术栈，人们想直接用React来学习。我想挑出其中的几个，并简单解释一下为什么在学习React时将它们与React联姻不是一个好主意。
-
用TypeScript学习React不可能，在将JavaScript转换为类型化语言之前先学习React。在vanilla JavaScript中混入TypeScript的类型化代码，当你没有学习React本身时，你的React组件会变得一团糟，让人不知所措。另外，外面99%的React教程和课程都不是用TypeScript写的，这让你更难掌握应该学习的基础知识。
-
用Redux学习ReactRedux是一个流行的JavaScript的状态管理库。首先学习React及其内置的状态管理将巩固React的核心功能，然后再接触到复杂的外部状态管理库，旨在用于大规模和复杂的应用程序。React提供了大量的工具来处理你的应用程序中的状态。绝大多数React应用程序不需要Redux或任何其他状态管理库。在添加另一个库来解决这个问题之前，先学会处理React状态。Redux使React对初学者来说更加复杂。
-
用Gatsby学习ReactGatsby.js最近变得更加流行。它是创建静态网站的首选解决方案，如个人网站、博客和登陆页面。然而，Gatsby也有自己的学问，比如GraphQL，它的大型插件系统，以及服务器端渲染的React应用程序带来的问题。不要误以为Gatsby.js学习React会更容易一些。它使用React编写静态网站更容易，但不是学习React本身。
这些只是React初学者在开始学习时倾向于与React联系起来的几件事；肯定还有更多。然而，没有一件事会使学习经历变得更容易。你将不得不学习两件事而不是一件。先从React开始。一次只学一样东西。
React的先决条件
由于React是一个JavaScript库，学习JavaScript是没有办法的。与其他前端解决方案相比，React大量使用了JavaScript。不学习React，你就不能不学习JavaScript。
先学React还是先学JavaScript？
你至少应该了解JavaScript的基础知识，通常被称为JavaScript ES5，并且对HTML和CSS有相当的了解。React也使用JavaScript语法，最常被称为JavaScript ES6及以上（ES7、ES8、ES9）。要学习React，至少要熟悉JavaScript ES6才有意义。
许多人建议在学习React之前，先学习Web开发和所有的JavaScript基础知识，作为前提条件。他们推荐的技能远远超出了用React.js构建基本应用的需要。其中有几个可能是：
- 函数是JavaScript中的第一等公民
- bind(), apply(), and call()
- 作用域和闭包
- 这个
- 对象方法
- 阵列方法
- 原型继承 -> ES6类
- 回调和承诺
- 事件循环
- 事件泡沫化
- 正则表达式
- 错误处理
- JavaScript ES6及以上版本
- 吊装、记忆化
- 声明式编程与命令式编程
- 功能性编程与面向对象编程
我认为没有必要掌握所有这些知识。对于刚接触JavaScript、React和Web开发的初学者来说，这可能是非常令人失望的。你不想在 "作用域和闭包 "的领域里徘徊，而你却可以建立真正的项目来激励你继续前进。掌握闭包的 "阿哈 "时刻将在这一过程中到来。就我个人而言，当我开始学习React的时候，我还不知道列表中的一半东西，我仍然需要查找正则表达式，因为我还没有费心去学习它们；我仍然在帮助公司的JavaScript项目。
我相信大部分的JavaScript都可以在学习React时顺便学习。这样做可以让你在构建网络应用的过程中体验它的背景。这是令人兴奋的，也是我们作为人的动力。在学习时保持自己的兴奋，不要在基础知识上花太多时间，而不是在真实世界的场景中应用它们。开始建立真正的项目。保持好奇心!当你学习React时，在JavaScript和React之间来回移动。
学习React还是jQuery？
历史上，jQuery填补了vanilla JavaScript和现代库/框架（如React、Angular和Vue）之间的空白。早期的JavaScript在浏览器中并不像现在这样高效。这就是为什么真正需要jQuery的原因。然而，现代的JavaScript有能力自己处理事情。因此，我的建议是。不要为jQuery而烦恼。
如果你在你的新工作中正在开发一个利用React的大型应用，很可能会在应用的遗留区域遇到jQuery。但是不精通jQuery也没关系，可以在网上查找你需要的东西来完成工作。作为一个替代方案，尝试将代码从jQuery迁移到React，作为一个学习机会。我在上一份工作中就是这样做的。我在Angular的早期就成为了一名JavaScript开发者，但从来没有真正学习过精通jQuery。相反，我专注于Angular的未来之路，然后成为React。
我为什么要学习React？
为什么首先要学习React？初学者可能知道JavaScript中闪亮的现代库，但往往不问自己为什么需要它们。他们可能只知道公司和工作对它们的需求很大。不过，退一步讲，问一下这个问题也是有意义的。我为什么需要这个？
这不仅适用于React，也适用于你作为一个开发者在生活中将要学习的所有其他库和框架。它能为我解决什么问题？人们常常在没有遇到必须使用它的问题的情况下就把库扔到他们的技术栈上面。这就是为什么我相信用普通的JavaScript和React实现相同的应用程序是一个很好的学习经验。它展示了为什么在解决你的问题时使用新库是有益的。在决定你是否要学习React或其他解决方案（如Vue或Angular）时，同样的技巧也可以应用。用你选择的解决方案建立一个基本的应用程序，并比较开发经验。哪种解决方案感觉适合你？
一步一步地学习React.js
我坚信，最好的开始是通过官方的React文档。这些文档与最近的变化保持一致，没有偏见，以React的方式教你一切，而且是由React核心团队和社区共同编写的。
通过React文档学习
作为一个网络开发的初学者，被提到一个库的文档可能会被吓到。但我坚信这是学习新事物的最好方式。在你成为开发者的道路上，你将经常需要使用官方文档，所以为什么不现在就习惯它呢？它有这些好处：
- 包括初学者教程
- 没有商业利益
- 有主见的做事方式
- 由核心贡献者和社区深思熟虑地整理出来的
- 最新的材料和新版本的更新
- API参考
每次我拿起一个新的技术，我不会去看任何课程或书籍，而是直接去看这个技术的文档，看看是否有一个初学者的教程。通常情况下，有一个，这是我进入一个新世界的入口。从那里，我可以随时查看其他学习材料。这就是为什么我写的教程和书与文档密切相关，在我的指南中总是提到它。这有助于初学者学会使用文档，并使他们现在和将来都更有效率和效益。
用项目学习React
在通过React文档的初学者教程并从头学习了React的基础知识后，通过建立一个项目继续学习。想出项目的点子并不总是那么简单，但外面有很多的灵感。
例如，也有一些人想通过构建游戏来学习React。你会发现外面有很多React井字游戏的实现。自己用React实现游戏，并将你的方案与其他方案进行比较。你会从你的错误中学习，并学会评估你的源代码与其他人的实现。
通过实践来学习React
通过实践来学习React是最常见的建议之一。它几乎适用于生活中的一切。每个编程任务都会给你带来新的挑战，让你成长为一个React开发者。被动地消费视频课程、书籍和教程太容易了。让你的手变脏，自己实现一些东西。被一个问题困住，变得绝望，通过离开屏幕的时间来考虑问题，最终解决这个问题，并收获成果。
每天学习React
挑战自己，每天都要写代码。你可以参加100天的代码挑战，在Twitter或你的网站上写下它。让它成为每天的习惯。只有坚持下去，有恒心，每天编码，你才能最终成为一个React开发者。这是一场马拉松，而不是一场冲刺。
在公共场合学习React
在公共场合学习会加速你的进步。通过分享你的工作，将自己暴露在其他开发者的反馈中。如果你的React项目达到了一个里程碑，把它展示给别人，并征求他们的反馈。这些是几个常见的平台，可以围绕React分享想法。
你不仅可以在那里得到有价值的反馈，还可以通过加入其他讨论进一步深入了解React。成为社区的一部分。学习新东西的一个好方法是向别人解释。即使是最近才开始的，你也可能领先于其他React初学者，可以帮助他们。看看ReactSubreddit中的React初学者主题，你可以帮助其他React开发者解决他们的问题。
继续学习React
在你通过了React文档中的初学者教程并开始自己实现一个React项目后，学习使用React的所有方面。React只有一个很小的API表面区域，所以要尽量熟练使用它。
- 了解React的JSX语法
- 了解React组件
- 了解React组件的组成
- 了解React Props
- 了解React状态
学习并理解React。最后，创建一个返回JSX的React组件，在另一个React组件中使用一个React组件，同时将它们安排在一个组件的层次结构中，用props在组件之间传递数据，并使组件与状态互动，这些都不需要太多。这就是React的要点。通过将学到的技能应用于你的项目，深入学习React。停止消费无尽的内容。
初学者的React设置
你如何开始编码一个React项目？如果你没有安装编辑器/终端或IDE，想在代码环境中检查React的感觉，你可以使用常用的在线代码编辑器CodeSandbox。玩一玩React。如果你想学习如何在你的本地机器上开发React应用程序，请查看这些MacOS和Windows设置指南。
这两份指南都有一套最基本的推荐工具，可以让你开始使用。
- **用Node和NPM执行JavaScript。**Node.js使得在浏览器之外运行JavaScript成为可能，而NPM（node包管理器）允许你在项目中安装React等库。对于几乎所有其他的现代JavaScript项目，你也需要这两个工具。
- **用Visual Studio Code（VS Code）开发。**一个流行的轻量级IDE，是React开发者的首选解决方案。VS Code带有一个编辑器来学习React开发，以及一个终端（命令行）来启动你的React项目并为其安装库。
- **用create-react-app学习。**来自React团队的起始模板应用，让你从一个轻量级和零配置的React起始项目开始。99%的React教程都是基于这个启动项目。你可以只专注于学习React，而所有围绕它的工具都会被处理好。
- **用Prettier格式化。**有意见的代码格式化器，在你的开发环境中自动格式化你的代码。它有一个简单的设置和流行编辑器（VS Code）的集成。它是一个很好的方法来告诉你如何在你学习的时候格式化你的React代码。
学习高级React
在你学习了React组件、props/state和React的JSX语法等基础知识后，你可以深入学习高级React概念和模式。
掌握了这些先进的React技术，你应该可以自如地深入到更大的React应用中。React Hooks可能会使其他的Higher-Order Components和Render Prop Components在未来少用，但你在明年应该还是会经常看到它们。
在线学习React
在你通过React的文档学习了基础知识和一些高级概念和模式之后，在你开始构建一个React应用程序之后，是时候在网上寻找其他React资源了。请注意，我在本指南中很晚才提到这一点，因为React初学者往往陷入一个永无止境的故事中，只是消费内容来学习React。通过自己开发React应用程序或写下你的学习心得来开始制作。在实践中学习是这里的关键。一路上的每个问题都可以在网上查到。然后如果你想学习更多关于React的知识，可以查看所有其他在线学习React的资源。我的建议是，不要只消费一种学习材料，而是要使你的学习资源多样化。
- React教程
- React书籍
- React视频(YouTube, Twitch, 在线课程)
- 网络开发或React播客
- 互动课程
不是每一种学习材料都适合你。这同样适用于学习材料背后的人的教学风格。每个人都有不同的方式来制作内容并提供给他们的学生，所以请检查哪种教学风格最适合你。
"最初，在第一次接触React时，我从另一位老师那里购买了一个Udemy课程。然而，我发现自己只看了几个视频就很迷茫。那个评价很高的系列课程中的老师一开始保持简单，但后来用难以掌握的概念和代码把我弄懵了，而且没有告知我发生了什么事。(资料来源)
如果你喜欢阅读，可以查看在线教程和React书籍。印刷书籍是离线学习React的一个好资源。尽管很多人担心书很快就会过时，但很多书都是自己出版的，作者只需要1天就可以在网上有新的版本（甚至在亚马逊上）。我相信现在更新视频的时间比书面内容要长。
如果你喜欢看视频，可以在YouTube、Udemy和创作者自己的课程平台上查看个人开发者的在线课程。如前所述，不要陷于只看内容。
如果你只是想了解最近的React新闻，播客是保持领先的一个好方法。你会听到处于技术前沿的开发人员定期分享新的东西。播客也是一种在通勤或运动时学习的好方法。至少我就是这样做的。
网上有很多免费的React学习资源，质量很高，每个人都可以获得。如果有人问我如何成为一名React开发者，我经常会直接把他们送到FreeCodeCamp。无论你选择哪种学习资源，都要尝试通过自己的学习来保持实用性。不要被动地消费这些内容。要积极主动，挑战自己，磨练自己的技能。
这就是我的观点。保持好奇心，每天通过弄脏你的手来承诺它，公开它，跑一场马拉松而不是冲刺。挑战自己，提高你作为一个开发者的技能，并在今年成为一个React开发者
