在React开发之旅中，组件是我们构建用户界面的基础砖块。今天，我想分享一下如何创建你的第一个React组件，并探讨组件复用的基本概念。完整代码放在最后。
准备工作
首先，我们需要设置好项目文件。下载的starter文件夹中，我们需要：
- 一个包含披萨图片的文件夹：pizzas
- starter数据文件: data.js
- index样式文件: index.css
将这些文件放到合适的位置后，(pizzas图片文件夹和data.js放到public目录下，index.css放到src目录下）就可以开始创建我们的第一个组件了。
创建第一个React组件
在React中，我们使用函数来创建组件。创建组件时需要遵循两个重要规则：
- 函数名必须以大写字母开头
- 函数必须返回某种标记（通常是JSX）
让我们创建一个简单的Pizza组件：
function Pizza() {
return <h2>Pizza</h2>;
}保存后，你会发现界面上没有任何变化，因为我们还没有在任何地方使用这个组件。
嵌套组件
要在界面上显示我们的Pizza组件，需要将它嵌套在当前正在渲染的App组件中：
function App() {
return (
<div>
<h1>Fast React Pizza Co.</h1>
<Pizza />
</div>
);
}注意：每个组件只能返回一个元素，不能是两个并列的元素。这就是为什么我们需要用<div>将内容包裹起来。
一个重要的区别：嵌套组件不是指在另一个函数内部声明函数。组件函数应该始终在顶层声明，而嵌套是指在一个组件的返回值中包含另一个组件。
使用数据丰富组件
现在，让我们使用一些数据让Pizza组件更有趣。我们可以使用data.js数据中的内容（复制黏贴进去）：
function Pizza() {
return (
<div>
<h2>Spinaci</h2>
<p>Tomato, mozarella, spinach, and ricotta cheese</p>
<img src="pizzas/spinaci.jpg" alt="Spinaci" />
</div>
);
}注意图片路径指向public文件夹中的资源，Webpack会自动从那里获取它们。
显示效果⬇️
组件复用
React的强大之处在于组件的可复用性。我们可以多次使用同一个组件：
function App() {
return (
<div>
<h1>Fast React Pizza Co.</h1>
<Pizza />
<Pizza />
<Pizza />
</div>
);
}现在，我们的界面上会显示三个相同的披萨！目前它们显示的是相同的数据，但在后续学习props后，我们可以为每个组件实例提供不同的数据。
完整代码⬇️
import React from "react";
import ReactDOM from "react-dom/client";
function App() {
return (
<div>
<h1>Fast React Pizza Co.</h1>
<Pizza />
<Pizza />
<Pizza />
</div>
);
}
function Pizza(){
return <div>
<img src="pizzas/spinaci.jpg"></img>
<h2>Pizza Spinaci</h2>
<p>Tomato, mozarella, spinach, and ricotta cheese</p>
</div>
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
发表回复