您的第一个组件

组件：UI 构建块

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

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

此标记表示此文章 <article>，其标题 <h1>，以及一个（简略的）目录，以有序列表 <ol> 的形式呈现。像这样的标记，结合用于样式的 CSS 和用于交互性的 JavaScript，构成了您在 Web 上看到的每一个侧边栏、头像、模态框、下拉菜单——每一个 UI 元素。

React 允许您将标记、CSS 和 JavaScript 组合成自定义“组件”，即应用程序的可重复使用 UI 元素。 您在上面看到的目录代码可以转换为一个 <TableOfContents /> 组件，您可以在每个页面上渲染它。在底层，它仍然使用相同的 HTML 标签，如 <article>、<h1> 等。

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

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

随着项目的增长，您会注意到您的许多设计可以通过重复使用您已经编写的组件来组合，从而加快您的开发速度。我们可以使用 <TableOfContents /> 将上面的目录添加到任何屏幕上！您甚至可以使用 React 开源社区共享的数千个组件（如 Chakra UI 和 Material UI）来快速启动您的项目。

定义组件

传统上，在创建网页时，Web 开发人员会先标记内容，然后通过添加一些 JavaScript 代码来实现交互性。当交互性只是 Web 上锦上添花的功能时，这种方法效果很好。现在，许多网站和所有应用程序都期望实现交互性。React 将交互性放在首位，同时仍然使用相同的技术：React 组件是一个 JavaScript 函数，您可以在其中添加标记。 下面是示例代码（您可以编辑下面的示例）

以下是构建组件的方法

步骤 1：导出组件

export default 前缀是一种 标准 JavaScript 语法（并非 React 特有）。它允许您标记文件中的主函数，以便以后可以从其他文件中导入它。（有关导入的更多信息，请参阅导入和导出组件！）

步骤 2：定义函数

通过 function Profile() { }，您可以定义一个名为 Profile 的 JavaScript 函数。

步骤 3：添加标记

组件返回一个带有 src 和 alt 属性的 <img /> 标签。<img /> 的写法类似于 HTML，但实际上它本质上是 JavaScript！这种语法称为 JSX，它允许您在 JavaScript 中嵌入标记。

return 语句可以像在这个组件中一样写在一行上

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>
);

使用组件

现在您已经定义了 Profile 组件，您可以将其嵌套在其他组件中。例如，您可以导出一个使用多个 Profile 组件的 Gallery 组件

浏览器看到的内容

请注意大小写的区别

• <section> 是小写的，因此 React 知道我们指的是一个 HTML 标签。
• <Profile /> 以大写字母 P 开头，因此 React 知道我们要使用名为 Profile 的组件。

并且 Profile 包含更多的 HTML：<img />。最后，这就是浏览器看到的内容

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

嵌套和组织组件

组件是常规的 JavaScript 函数，因此您可以将多个组件保存在同一个文件中。当组件相对较小或彼此紧密相关时，这很方便。如果此文件变得拥挤，您可以随时将 Profile 移动到单独的文件中。您将在关于 导入的页面上很快了解如何执行此操作。

因为 Profile 组件是在 Gallery 内部渲染的，即使是多次渲染！我们可以说 Gallery 是一个 父组件，它将每个 Profile 渲染为“子组件”。这是 React 的神奇之处：您可以定义一次组件，然后在任意位置和任意次数地使用它。

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}