描述用户界面
React 是一个用于渲染用户界面（UI）的 JavaScript 库。用户界面由按钮、文本和图像等小单元构建而成。React 允许你将它们组合成可复用、可嵌套的组件。从网站到手机应用，屏幕上的一切都可以分解为组件。在本章中，你将学习如何创建、自定义以及有条件地显示 React 组件。
你的第一个组件
React 应用由称为组件的独立 UI 片段构建而成。React 组件是一个 JavaScript 函数，你可以在其中添加标记。组件可以小到一个按钮，也可以大到整个页面。下面是一个渲染三个Gallery组件的Profile组件：
导入和导出组件
你可以在一个文件中声明多个组件，但大文件可能难以导航。为了解决这个问题，你可以将组件导出到其自己的文件中，然后从另一个文件导入该组件：
使用 JSX 编写标记
每个 React 组件都是一个 JavaScript 函数，可能包含一些 React 渲染到浏览器中的标记。React 组件使用一种称为 JSX 的语法扩展来表示该标记。JSX 看起来很像 HTML，但它更严格一些，并且可以显示动态信息。
如果我们将现有的 HTML 标记粘贴到 React 组件中，它并不总是有效：
如果你有这样的现有 HTML，可以使用转换器来修复它：
在 JSX 中使用大括号编写 JavaScript
JSX 允许你在 JavaScript 文件中编写类似 HTML 的标记，将渲染逻辑和内容放在同一位置。有时你可能希望在该标记中添加一点 JavaScript 逻辑或引用动态属性。在这种情况下，你可以在 JSX 中使用大括号来“打开一扇通往 JavaScript 的窗口”：
向组件传递 props
React 组件使用props相互通信。每个父组件都可以通过给子组件传递 props 来向它们传递一些信息。Props 可能会让你想起 HTML 属性，但你可以通过它们传递任何 JavaScript 值，包括对象、数组、函数，甚至 JSX！
条件渲染
你的组件通常需要根据不同的条件显示不同的内容。在 React 中，你可以使用 JavaScript 语法（如if 语句、&& 和 ? :运算符）来有条件地渲染 JSX。
在此示例中，JavaScript&&运算符用于有条件地渲染一个勾选标记：
渲染列表
你通常希望从数据集合中显示多个相似的组件。你可以使用 JavaScript 的filter() 和 map()与 React 结合，将数据数组过滤并转换成一个组件数组。
对于每个数组项，你需要指定一个key。通常，你会希望使用数据库中的 ID 作为key。Key 让 React 即使在列表发生变化时也能跟踪每个项在列表中的位置。
保持组件纯粹
一些 JavaScript 函数是纯粹的。 纯函数：
- 只管好自己的事。 它不会更改在调用前已存在的任何对象或变量。
- 相同的输入，相同的输出。 给定相同的输入，纯函数应始终返回相同的结果。
通过严格地将组件编写为纯函数，你可以避免随着代码库增长而出现的一整类令人困惑的 bug 和不可预测的行为。以下是一个非纯粹组件的示例：
你可以通过传递 props 而不是修改已存在的变量来使此组件变得纯粹：
作为树的用户界面
React 使用树来建模组件和模块之间的关系。
React 渲染树是组件之间父子关系的表示。
一个 React 渲染树的示例。
靠近树顶部、靠近根组件的组件被视为顶层组件。没有子组件的组件是叶子组件。这种组件分类有助于理解数据流和渲染性能。
建模 JavaScript 模块之间的关系是理解应用程序的另一种有用方式。我们将其称为模块依赖树。
一个模块依赖树的示例。
依赖树通常被构建工具用来打包所有相关的 JavaScript 代码，供客户端下载和渲染。过大的捆绑包大小会降低 React 应用程序的用户体验。理解模块依赖树有助于调试此类问题。
接下来是什么？
前往 第一个组件，开始逐页阅读本章！
或者，如果您已经熟悉这些主题，为什么不阅读一下添加交互性？