5
章节5
使用组件构建用户界面
React 核心概念
你需要熟悉三个 React 核心概念才能开始构建 React 应用程序。它们是：
- 组件
- 属性
- 状态
在接下来的章节中，我们将详细介绍这些概念，并提供你可以继续学习它们的资源。熟悉这些概念后，我们将向你展示如何安装 Next.js 并使用更新的 React 功能，例如服务器和客户端组件。
组件
用户界面可以分解为更小的构建块，称为 **组件**。
组件允许你构建自包含、可重用的代码片段。如果你将组件视为 **乐高积木**，你可以拿起这些独立的积木并将它们组合起来形成更大的结构。如果你需要更新用户界面的一部分，你可以更新特定的组件或积木。
这种模块化使你的代码随着其增长而更易于维护，因为你可以在不触及应用程序其余部分的情况下添加、更新和删除组件。
React 组件的优点是它们只是 JavaScript。让我们看看如何从 JavaScript 的角度编写 React 组件。
创建组件
在 React 中，组件是 **函数**。在你的 `script` 标签内，创建一个名为 `header` 的新函数。
<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。
<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()` 方法。
<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 区分开来。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);其次，你使用 React 组件的方式与使用常规 HTML 标签的方式相同，使用尖括号 `<>`。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);如果你再次尝试在浏览器中运行代码，你将看到你的更改。
嵌套组件
应用程序通常包含比单个组件更多的内容。你可以将 React 组件 **嵌套** 在彼此内部，就像处理常规 HTML 元素一样。
在你的示例中，创建一个名为 `HomePage` 的新组件。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return <div></div>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);然后将 `<Header>` 组件嵌套到新的 `<HomePage>` 组件中。
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 组件，以形成组件树。
例如，你的顶层 `HomePage` 组件可以包含 `Header`、`Article` 和 `Footer` 组件。而这些组件又可以包含它们自己的子组件，依此类推。例如，`Header` 组件可以包含 `Logo`、`Title` 和 `Navigation` 组件。
这种模块化格式允许你在应用程序的不同位置重用组件。
在你的项目中，由于 `<HomePage>` 现在是你的顶层组件，你可以将其传递给 `root.render()` 方法。
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);其他资源
这有帮助吗？