章节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