React 是 Facebook 开发人员创建的一个 JavaScript 库，用于构建快速的用户界面。无论您是刚接触 React，还是您的 React 开发之旅正在加速，要掌握其基础知识、技术、工具和技巧都可能很困难。因此，我们创建了这份指南，介绍可用的资源以及我们的推荐。无论您处于学习的哪个阶段，这里都有您需要的最佳 React 内容——请查看并深入学习！（如果您认为我们遗漏了什么，请在下面的表格中告知我们！）
关键要点
- React 是一个用于构建快速用户界面的 JavaScript 库，有大量的学习资源可用，从文章到课程、项目和新闻通讯。
- 推荐的资源包括“React 入门”课程、“React 入门：初学者指南”文章和“版本控制”新闻通讯等。
- 在学习 React 之前，必须扎实掌握 JavaScript，包括 ES6 特性、闭包、异步编程和“this”关键字等概念。HTML 和 CSS 知识也很重要，因为 React 使用 JSX，这是一种类似 HTML 的 JavaScript 语法扩展。
文章
无论您是否正在考虑学习 React，或者您正在寻找更高级的工具和系统，以下是一些我们找到的最佳书面资源。
入门和比较
- React 入门：初学者指南 [sitepoint]
- JSX 入门 [sitepoint]
- React 教程：从头开始构建计算器应用程序 [sitepoint]
- 样式 React 组件：7 种方法比较 [sitepoint]
- 如何判断 React 是否最适合您的下一个项目 [sitepoint]
- React 与 Angular——深入比较 [sitepoint]
- React 与 Vue——“我为什么选择 React 而不是 Vue” [medium/@calinleafshade]
- React 入门，初学者指南 [sitepoint]
- 通过构建音乐播放器来探索 React 16 的新功能 [sitepoint]
- React 如何改进您的 D3 动画 [sitepoint]
- Facebook 官方 React 入门介绍 [facebook.github]
基础知识
- 所有基本的 React 概念都压缩到一篇文章中 [medium.freecodecamp]
- 使用 Facebook 的 Create React App 快速准备项目 [sitepoint]
- 回到基础——使用 React Flow [medium/javascript-inside]
- 如何使用无状态组件优化 React 性能 [sitepoint]
- React 样式概述——从使用外部 CSS 到样式化组件 [sitepoint]
- 深入了解 React 动画 [medium/react-native-training]
- 组件文件夹模式简介 [medium/styled-components]，这使得编写可扩展的 React 应用程序更容易。
- 关于 React Router 4 的所有内容 [css-tricks]
- 以及服务器端 React 渲染指南 [css-tricks]
- 在 React 中处理状态的四种不变方法 [medium/@housecor]
- 如何安装 React Native [sitepoint]
- React Native 应用程序中的身份验证指南 [goshakkk.name]
- 可搜索、可过滤的 React 速查表 [reactcheatsheet]
稍高级
- 如何组织大型 React 应用程序并使其可扩展 [sitepoint]
- 建议：在使用 Redux 之前学习 React [robinwieruch]
- 如何创建真正通用的 React 组件系统 [medium/styled-components]
- Redux 与 MobX：哪个更好？ [sitepoint]
- React 16 改变了 React 如何处理未知的 DOM 属性：有关这些更改如何影响您和您的代码的指南 [facebook.github]
课程
如果您不喜欢通过文章自己构建学习路径，或者您想确保掌握所有概念和技术，那么我们推荐以下结构化的 React 课程。
- React 入门 [reactforbeginners] 是 React 教育的金标准，来自 React 导师 Wes Bos。
- React Express [react.express] 是 React 开发的综合指南。
项目
您已经掌握了基础知识，甚至可能更多。以下是一些项目，您可以将这些知识付诸实践：
- 使用用户登录和身份验证逐步构建 React 应用程序的指南 [sitepoint]
- 使用 React Native 和 Pusher 构建有状态实时应用程序的指南 [sitepoint]
- 如何向 React Native 应用程序添加分析 [sitepoint]
- 使用 Rails 构建您的第一个服务器端渲染的 React 应用程序 [engineering.musefind]
- 如何使用 React 和 Firebase 构建 Reddit 克隆 [sitepoint]
- 使用 React VR 构建完整的球形 3D 图片库 [sitepoint]
- 然后使用 React、Redux、Express 和 MongoDB 构建完整的 Trello 克隆 [sitepoint]
- 然后使用 React Native 构建人脸识别应用程序 [sitepoint]
- 如何使用 React Native 构建 Android 应用程序 [sitepoint]
- 使用 React 和 WebWL 构建游戏 [sitepoint]
库和工具
- 如何为 React 开发设置 Vim [drivy.engineering]
- react-boilerplate [github/react-boilerplate] 是下一个 React 项目的可扩展的、离线优先的基础。
- react-vt [github/reactvt] 是一个用于 React 开发人员的视觉测试库。
- Mirror [github/mirrorjs] 是一个简单、强大的 React 框架，具有最小的 API 和没有样板代码。
- React Material UI、React Bootstrap、Semantic UI 和（四个）更多——七个您应该了解的 React 库 [readwrite]
- JetBrains Web UI 组件是开源的 [blog.jetbrains]
- Gatsby [gatsbyjs] 是一个友好、超快的 React 静态站点生成器。
- React Static 是一个 React 静态站点生成器，旨在易于配置和数据不可知。
- React Native Pull to Refresh [github/nadikuts] 是一个用于 Android 的自定义下拉刷新组件。
- Lottie [airbnb.design] 是一个 iOS、Android 和 React Native 库，它允许应用程序像使用静态图像一样轻松地使用动画。
- Sketch.app [airbnb] 是 Airbnb 的另一个工具，它允许您编写呈现到 Sketch 文档的 React 组件。
新闻通讯
如果所有这些都帮助您进入了 React 的世界——以下是一些新闻通讯，将帮助您了解最新的信息。
- 版本控制 [sitepoint]——每日新闻通讯，涵盖各种主题，包括 React，有点像这篇文章（文本和链接），由我撰写！
- React 状态 [react.statuscode]——来自 Cooperpress 的优秀人员的每周新闻通讯。
- React 新闻通讯 [reactjsnewsletter]——每周新闻通讯，由 Tyler McGinnis 和 Ean Platter 策划。
- react digest [reactdigest]——每周新闻通讯，每周一发送五个 React 链接。
我们错过了什么？
最后，如果您找到了这里应该包含的优秀的 React 资源或工具，请在下面的表格中告知我们。祝您 React 快乐！
关于学习 React 的常见问题
学习 React 的先决条件是什么？
在开始学习 React 之前，掌握 JavaScript 非常重要，因为 React 是一个 JavaScript 库。您应该熟悉 ES6 特性、闭包、异步编程和 this 关键字等概念。HTML 和 CSS 知识也很重要，因为您将使用 JSX，这是一种类似 HTML 的 JavaScript 语法扩展。
学习 React 需要多长时间？
学习 React 所需的时间差异很大，这取决于您目前的技能水平以及您可以投入学习的时间。如果您已经精通 JavaScript，那么您可以在几周的专门学习中掌握 React 的基础知识。但是，掌握 React 及其生态系统（如 Redux 和 React Router）可能需要几个月的时间。
有哪些学习 React 的资源？
有大量的资源可用于学习 React。这些包括在线教程、视频课程、书籍和文档。官方 React 文档是一个很好的起点。Codecademy 和 SitePoint 等网站提供交互式课程。您还可以在 YouTube 和博客上找到许多免费教程。
我为什么要学习 React？
React 是最流行的用于构建用户界面的 JavaScript 库之一，尤其适用于单页应用程序。它允许您创建可重用的 UI 组件。React 由 Facebook 和个人开发人员和公司的社区维护，并在业界广泛使用。学习 React 可以带来许多就业机会。
React 是库还是框架？
React 是一个 JavaScript 库，而不是框架。区别在于，库提供您可以根据需要使用的特定、隔离的功能，而框架提供全套工具和功能，但也强加了一种特定的做事方式。React 专注于一件事——构建用户界面，并且它做得非常好。
什么是 JSX，为什么它在 React 中很重要？
JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，允许您在 JavaScript 代码中编写类似 HTML 的代码。编写 React 应用程序不需要使用 JSX，但建议使用它，因为它使代码更易于阅读和编写。
React 中的虚拟 DOM 是什么？
虚拟 DOM（文档对象模型）是 React 引入的一个概念，其中 UI 的虚拟表示保存在内存中，并通过称为协调的过程与“真实”DOM 同步。此过程与轻松创建组件的能力相结合，可实现高性能和可预测的代码库。
React 中的状态和道具有什么区别？
在 React 中，状态和道具都是 JavaScript 对象。状态是一个数据结构，在组件挂载时以默认值开始，然后随着时间的推移发生变异，这主要是用户事件的结果。道具（属性的简称）是其父组件传递给它的变量。
什么是 Redux，它与 React 有什么关系？
Redux 是 JavaScript 应用程序的可预测状态容器。它帮助您编写行为一致、在不同环境（客户端、服务器和原生）中运行且易于测试的应用程序。虽然它主要与 React 一起使用，但它可以与任何其他视图库一起使用。
如何开始使用 React 构建项目？
掌握 React 的基础知识后，最好的学习方法是构建项目。从简单的项目开始，例如待办事项列表或天气应用程序。随着您的经验越来越丰富，您可以转向更复杂的项目。这不仅可以帮助您更好地理解 React，还可以构建您的作品集。
以上是学习反应的资源：您需要开始的一切的详细内容。更多信息请关注PHP中文网其他相关文章！
