第一个组件

组件 是 React 的核心概念之一。它们是构建用户界面（UI）的基础，是你开始 React 之旅的最佳起点！

组件：UI 构成要素

在 Web 当中，HTML 允许我们使用其内置的标签集（如 <h1> 和 <li>）创建丰富的结构化文档：

<article>
<h1>我的第一个组件</h1>
<ol>
<li>组件：UI 构成要素</li>
<li>定义组件</li>
<li>使用组件</li>
</ol>
</article>

<article> 表示这篇文章，<h1> 表示文章的标题，<ol> 以有序列表的形式表示文章的（缩写的）目录。每一个侧边栏、头像、模态框、下拉框的背后是都是像这样的（结合了用于样式的 CSS 和用于交互的 JavaScript 的）标签——你在 Web 上看到的每一个 UI 模块。

React 允许你将标签、CSS 和 JavaScript 组合成自定义“组件”，即 应用程序中可复用的 UI 元素。上文中表示目录的代码可以改写成一个能够在每个页面中渲染的 <TableOfContents /> 组件。实际上，使用的依然是 <article>、<h1> 等相同的 HTML 标签。

就像使用 HTML 标签一样，你可以组合、排序和嵌套组件来绘制整个页面。例如，你正在阅读的文档页面就是由 React 组件构成的：

<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">文档</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>

随着项目的发展，你会发现很多布局可以通过复用已经完成的组件来实现，从而加快开发进程。上文中提到的目录可以通过 <TableOfContents /> 组件添加到任意的画面中！你也可以使用 React 开源社区分享的大量组件（例如 Chakra UI 和 Material UI）来快速启动项目。

定义组件

一直以来，创建网页时，Web 开发人员会用标签描述内容，然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 最为重视交互性且使用了相同的处理方式：React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。如下所示（你可以编辑下面的示例）：

以下是构建组件的方法：

第一步：导出组件

export default 前缀是一种 JavaScript 标准语法（非 React 的特性）。它允许你标签一个文件中的主要函数以便你以后可以从其他文件引入它。欲了解更多关于导入的内容，请参阅 组件的导入与导出 章节！

第二步：定义函数

使用 function Profile() { } 定义名为 Profile 的 JavaScript 函数。

React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！

第三步：添加标签

这个组件返回一个带有 src 和 alt 属性的 <img /> 标签。<img /> 写得像 HTML，但实际上是 JavaScript！这种语法被称为 JSX，它允许你在 JavaScript 中嵌入使用标签。

返回语句可以全写在一行上，如下面组件中所示：

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

但是，如果你的标签和 return 关键字不在同一行，则必须把它包裹在一对括号中，如下所示：

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！