你的第一个组件
组件是 React 的核心概念之一。 它们是您构建用户界面 (UI) 的基础，这使它们成为您开始 React 之旅的完美起点！
你将学习
- 什么是组件
- 组件在 React 应用程序中扮演什么角色
- 如何编写你的第一个 React 组件
组件：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 来添加交互。 当交互在网络上是一个不错的选择时，这很有效。 现在许多站点和所有应用程序都希望它。 React 将交互性放在首位，同时仍然使用相同的技术：React 组件是一个 JavaScript 函数，您可以在其中添加标记。 这是它的样子（您可以编辑下面的示例）：
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}
以下是构建组件的方法：
第 1 步：导出组件
export default前缀是标准的 JavaScript 语法（不特定于 React）。 它允许您在文件中标记主要功能，以便您以后可以从其他文件导入它。 （有关导入和导出组件的更多信息！）
第 2 步：定义函数
使用 function Profile() { } 可以定义一个名为 Profile 的 JavaScript 函数。
"缺陷
React 组件是常规的 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>
);
"缺陷
如果没有括号，return 之后的行中的任何代码都将被忽略！
使用组件
现在您已经定义了您的Profile组件，您可以将它嵌套在其他组件中。 例如，您可以导出一个使用多个 Profile 组件的 Gallery 组件：
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
浏览器看到的
注意外在的区别：
- <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() { // ... }当子组件需要来自父组件的一些数据时，通过 props 传递它而不是嵌套定义。
深度阅读：组件一直向下
您的 React 应用程序从“根”组件开始。 通常，它会在您开始一个新项目时自动创建。 例如，如果您使用 CodeSandbox 或 Create React App，则根组件定义在 src/App.js 中。 如果您使用 Next.js 框架，则根组件定义在 pages/index.js 中。 在这些示例中，您一直在导出根组件。
大多数 React 应用程序一直使用组件。 这意味着您不仅可以将组件用于按钮等可重用部分，还可以将组件用于侧边栏、列表以及最终完整页面等更大的部分！ 组件是组织 UI 代码和标记的便捷方式，即使其中一些只使用一次。
像 Next.js 这样的框架更进一步。 它们不是使用一个空的 HTML 文件并让 React“接管”使用 JavaScript 管理页面，而是从您的 React 组件自动生成 HTML。 这允许您的应用程序在加载 JavaScript 代码之前显示一些内容。
尽管如此，许多网站仅使用 React 来添加“互动性”。 它们有很多根组件，而不是整个页面只有一个。 您可以根据需要使用尽可能多或尽可能少的 React。
回顾
你刚刚第一次尝到了 React 的滋味！ 让我们回顾一些关键点。
- React 允许您为您的应用程序创建组件、可重用的 UI 元素。
- 在 React 应用程序中，每一块 UI 都是一个组件。
- React 组件是常规的 JavaScript 函数，除了：
- 1.他们的名字总是以大写字母开头。
- 2.他们返回 JSX 标记。
