章节5

使用组件构建 UI

React 核心概念

要开始构建 React 应用程序，您需要熟悉 React 的三个核心概念。它们是

组件
属性（Props）
状态（State）

在接下来的章节中，我们将深入探讨这些概念，并提供您可以继续学习的资源。在您熟悉这些概念之后，我们将向您展示如何安装 Next.js 并使用更新的 React 功能，例如服务器组件和客户端组件。

组件

用户界面可以分解成称为**组件**的较小构建块。

组件允许您构建自包含、可重用的代码片段。如果您将组件视为**乐高积木**，则可以将这些单独的积木组合在一起以形成更大的结构。如果需要更新 UI 的一部分，您可以更新特定的组件或积木。

Example of a Media Component made up of 3 smaller components: image, text, and button

这种模块化使您的代码在增长时更容易维护，因为您可以添加、更新和删除组件，而无需触及应用程序的其余部分。

React 组件的好处在于它们只是 JavaScript。让我们从 JavaScript 的角度看看如何编写 React 组件。

创建组件

在 React 中，组件是**函数**。在您的script标签内，创建一个名为header的新函数。

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

组件是一个**返回 UI 元素**的函数。在函数的 return 语句中，您可以编写 JSX。

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

要将此组件渲染到 DOM，请将其作为第一个参数传递给root.render()方法。

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

但是，等一下。如果您尝试在浏览器中运行上面的代码，您将收到错误。要使其正常工作，您需要执行两件事。

首先，React 组件应使用大写字母开头，以将其与普通 HTML 和 JavaScript 区分开。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);

其次，您使用 React 组件的方式与使用常规 HTML 标签相同，使用尖括号<>。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

如果您再次尝试在浏览器中运行代码，您将看到您的更改。

嵌套组件

应用程序通常包含比单个组件更多的内容。您可以像使用常规 HTML 元素一样，将 React 组件**嵌套**在彼此内部。

在您的示例中，创建一个名为HomePage的新组件。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

然后将<Header>组件嵌套在新创建的<HomePage>组件中。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

组件树

您可以继续以这种方式嵌套 React 组件以形成组件树。

Component tree showing how components can be nested inside each other

例如，您的顶级HomePage组件可以包含Header、Article和Footer组件。而每个组件又可以有自己的子组件，依此类推。例如，Header组件可以包含Logo、Title和Navigation组件。

这种模块化格式允许您在应用程序的不同位置重用组件。

在您的项目中，由于<HomePage>现在是您的顶级组件，因此您可以将其传递给root.render()方法。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

其他资源

您的第一个组件

导入和导出组件

使用组件构建 UI

React 核心概念

组件

创建组件

嵌套组件

组件树

您已完成本章5