React 生态系统入门指南

React 初学者常常觉得学习 React 很困难，因为 React 生态系统非常庞大。你很快就会遇到 Redux、Webpack 或 Babel 之类的东西。当时我完全不知所措，不知道该从哪里入手。

更令人困惑的是，我当时甚至不知道这些工具试图解决什么问题。 现在我明白了，我可以告诉你，这些工具完全没有必要——至少目前没有必要。

这篇文章最初发表在我的博客上。

介绍

我写这篇文章是面向所有初学者——React新手或 Web 开发新手。不过，我假设你们至少具备一些 HTML、CSS 和 JavaScript 的基础知识。

这篇文章旨在为你提供一份学习路线图，引导你从入门到进阶，逐步深入学习更复杂的主题——它能帮助你专注于真正重要的事情，而不是浪费时间去担心那些你暂时不需要的东西。这份路线图不会包含所有主题的详细解释。更深入的内容将在后续文章中介绍，而所有这些更详细的讲解将包含在我的新项目“React for Noobs”  （面向 React 初学者的入门指南）中。

好了，就说这么多吧——接下来的章节将向您展示，如何才能轻松提高您在 React 及其生态系统方面的知识。

先决条件

在开始学习 React 之前，您至少应该具备 HTML、CSS 和 JavaScript 的基础知识。此外，建议您了解一下 ECMAScript 6 (ES6)——在使用 React 时，您至少需要掌握 ES6 的相关知识。

• 箭头函数
• 课程
• 模板字面量
• 让
• 常量

这些应该足以让你从基础知识开始学习了。

React 入门基础知识

刚开始学习 React 时，我强烈建议你从官方教程入手。你将学习到理解 React 基本原理所需的一切知识。

在接下来的章节中，我将对你在上述教程中看到的一些内容提供一些补充说明。

创建 React 应用

这个超棒的工具让启动新应用变得轻松许多。它省去了你折腾各种配置的麻烦，那些配置可能会让你一头雾水。所以现在，只需使用 create-react-app，就能轻松用一条命令启动新应用。

成分

在 React 中，一切都以组件的形式组织。因此，一旦你掌握了 JSX 的使用方法，就要熟悉如何向组件传递数据  （props） ，如何在组件内部  管理  状态，以及如何将状态提升 到父组件。学习如何正确处理事件或将函数作为 props 传递（参见“提升状态”）。另外，别忘了添加一些样式也无妨 :)

下一步是学习如何进行条件渲染 、如何渲染列表和表单，以及如何组合组件。

如果你已经掌握了以上所有内容，你应该自己创建一个小型应用程序来巩固所学知识。程序要小巧简单。当时，我只是创建了一个推文组件，它的外观应该和你在 Twitter 上看到的一模一样。你只需要创建必要的组件，放入一些静态数据，然后进行一些尝试。你还可以将其扩展为一个推文列表。

如果你感觉足够熟练，就可以专注于更高级的内容了。

高级 React

既然你已经能够创建有用的组件，现在是时候了解一下属性类型（PropTypes）了。此外，由于你可能需要从远程服务器或 API 获取数据，因此请熟悉生命周期方法 以及如何从服务器获取数据。注意：你可以将 React 与任何你想要的 REST 后端/API 一起使用——没有任何限制。

您可能需要将应用拆分成不同的屏幕。为了处理页面过渡效果，您需要使用React Router。虽然也有其他替代方案，但我建议您先从 React Router 入手，它似乎是社区中最受欢迎的解决方案。

如果你还没有看过，也应该了解一下如何处理表单，特别是要了解一下不受控制的组件，因为在处理表单时，你大部分时间都需要用到它们。

提示：尽可能使用函数式组件而非类组件。这也意味着，你应该尽量保持组件的无状态性。以后你会庆幸自己没有把状态分散到整个应用程序中——尤其是在需要重构的时候。想了解更多信息，我推荐阅读 Dan Abramov 关于展示型组件和容器组件的文章。  

React 16 引入了错误边界机制 。它可以捕获 JavaScript 错误，避免整个应用程序崩溃。React 会显示一个备用 UI，而不是显示出错的子组件树。

为了从一开始就避免错误，不妨了解一下Jest。所有使用 create-react-app 创建的应用都支持使用 Jest 进行测试。Jest 的强大之处在于，它可以测试 React 组件树的快照，这大大简化了测试的编写过程。

接下来怎么办？

现在你对 React 了解了很多。你应该能够创建一些与后端服务器或 API 通信的复杂应用程序。

随着应用程序的日益复杂，您可能会意识到状态管理变得越来越困难。这时，您应该了解一下Redux 或 MobX 的状态管理。  我建议您两者都尝试一下，看看哪个更适合您。许多 React 初学者在学习 React 的早​​期阶段就会接触到 Redux，然后试图将其应用到所有应用程序中。但大多数情况下，这样做只会增加复杂性，而不是降低复杂性。

在某些情况下，您可能需要在服务器端渲染 React 应用。这可能是出于 SEO 或性能方面的考虑。我在这里提到这一点，是因为我真心认为 React 初学者不应该考虑服务器端渲染。

如果你想在构建过程中或修改隐藏的配置文件（多亏了 create-react-app），你可以使用 eject 命令将其弹出。我不建议 React 初学者这样做，因为这会立即增加应用程序的复杂性。所以，请提前熟悉Webpack和Babel ，做好准备。它们的配置文件位于你的应用程序文件夹中，你应该了解它们的作用。

总结

React 初学者往往很难入门。一旦掌握了基础知识，并了解了如何循序渐进地学习，就会容易得多。我希望这篇指南能帮助你了解作为初学者真正需要什么，以及哪些内容可以稍后再学。

我希望让 React 初学者的学习之路更轻松一些。因此，我最近开始编写《React For Noobs》。这是一本循序渐进的指南，手把手地指导 React 初学者，帮助他们从新手一步步成长为专家。

React 新手入门指南 - 从新手到高手

还有更多……

想了解更多关于 React 及其生态系统的知识吗？好消息！订阅我的电子报，即可免费获取更多文章，直接发送到您的邮箱！

感谢您阅读到最后！如果您能告诉我您的想法，我将不胜感激。您可以留言、在推特上联系我，或者发送邮件至hi@andreasreiterer.at—— 我乐于回复每一条信息。