你的第一个组件
组件是 React 的核心概念之一。它们是构建用户界面（UI）的基础，这使得它们成为你开始 React 之旅的绝佳起点！
你将学习
- 什么是组件
- 组件在 React 应用中扮演什么角色
- 如何编写你的第一个 React 组件
组件：UI 构建块
在 Web 上，HTML 允许我们使用其内置的一组标签（如<h1> 和 <li>）来创建丰富的结构化文档：
这段标记表示这篇文章 <article>、它的标题<h1>，以及一个（简化的）目录作为有序列表<ol>。像这样的标记，结合用于样式的 CSS 和用于交互性的 JavaScript，构成了你在 Web 上看到的每一个侧边栏、头像、模态框、下拉菜单——每一个 UI 片段背后的技术。
React 允许你将标记、CSS 和 JavaScript 组合成自定义的“组件”，即应用程序中可复用的 UI 元素。你上面看到的目录代码可以变成一个 <TableOfContents />组件，你可以在每个页面上渲染它。在底层，它仍然使用相同的 HTML 标签，如<article>、<h1>等。
就像使用 HTML 标签一样，你可以组合、排序和嵌套组件来设计整个页面。例如，你正在阅读的文档页面就是由 React 组件构成的：
随着项目的增长，你会发现许多设计可以通过复用你已经编写的组件来组合，从而加快开发速度。我们上面的目录可以通过 <TableOfContents />添加到任何屏幕！你甚至可以使用 React 开源社区共享的数千个组件（如Chakra UI 和 Material UI）来快速启动你的项目。
定义组件
传统上，在创建网页时，Web 开发人员会标记内容，然后通过添加一些 JavaScript 来增加交互性。当交互性在 Web 上是锦上添花时，这种方法效果很好。现在，许多网站和所有应用程序都期望具备交互性。React 将交互性放在首位，同时仍然使用相同的技术：React 组件是一个 JavaScript 函数，你可以在其中嵌入标记。以下是它的样子（你可以编辑下面的示例）：
以下是构建组件的方法：
步骤 1：导出组件
前缀export default 是 标准的 JavaScript 语法（并非 React 特有）。它允许你标记文件中的主函数，以便稍后可以从其他文件导入它。（关于导入的更多信息，请参阅导入和导出组件！）
步骤 2：定义函数
使用function Profile() { } 你可以定义一个名为 Profile的 JavaScript 函数。
陷阱
React 组件是普通的 JavaScript 函数，但它们的名称必须以大写字母开头，否则将无法工作！
步骤 3：添加标记
该组件返回一个带有<img /> 和 src属性的alt 标签。<img />写起来像 HTML，但实际上底层是 JavaScript！这种语法称为JSX，它允许你在 JavaScript 中嵌入标记。
返回语句可以全部写在一行上，就像这个组件一样：
但如果你的标记不在与 return关键字同一行，你必须将其包裹在一对圆括号中：
陷阱
如果没有圆括号，return之后行上的任何代码都将被忽略！
使用组件
现在你已经定义了 Profile组件，你可以将其嵌套在其他组件内部。例如，你可以导出一个Gallery组件，该组件使用多个Profile 组件：
浏览器看到的内容
请注意大小写的区别：
<section>是小写的，因此 React 知道我们指的是 HTML 标签。<Profile />以大写P开头，因此 React 知道我们想要使用名为Profile的组件。
而 Profile包含更多 HTML：<img />。最终，浏览器看到的是这样的内容：
嵌套和组织组件
组件是普通的 JavaScript 函数，因此你可以在同一个文件中保留多个组件。当组件相对较小或彼此紧密相关时，这很方便。如果这个文件变得拥挤，你随时可以将Profile 移动到单独的文件中。你将在稍后的 关于导入的页面上学习如何做到这一点。
因为 Profile 组件是在 Gallery内部渲染的——甚至渲染了多次！——我们可以说Gallery是一个父组件，将每个 Profile渲染为“子”组件。这就是 React 的魔力之一：你可以定义一次组件，然后在任意位置、任意次数地使用它。
陷阱
回顾
你刚刚初次体验了 React！让我们回顾一些关键点。
- React 允许你创建组件，即用于你应用的可复用 UI 元素。
- 在 React 应用中，每一块 UI 都是一个组件。
- React 组件是普通的 JavaScript 函数，但有以下例外：
- 它们的名称总是以大写字母开头。
- 它们返回 JSX 标记。