React 组件
组件就像返回 HTML 元素的函数。
React 组件
组件是独立且可重用的代码。它们的用途与 JavaScript 函数相同，但独立工作并返回 HTML。
组件有两种类型，Class组件和Function组件，在本教程中我们将重点介绍Function组件。
在较旧的 React 代码库中，您可能会发现主要使用 Class 组件。 现在建议将函数组件与在 React 16.8 中添加的 Hooks 一起使用。 有一个关于类组件的可选部分供您参考。
创建您的第一个组件
创建 React 组件时，组件的名称必须以大写字母开头。
类组件
类组件必须包含 extends React.Component 语句。
此语句创建对 React.Component 的继承，并让您的组件访问 React.Component 的函数。
组件还需要一个render()方法，该方法返回HTML。
实例
创建一个名为 Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Function 组件
这里是与上面相同的示例，但使用 Function 组件创建。
Function 组件也返回 HTML，其行为方式与 Class 组件非常相似，但 Function 组件可以使用更少的代码编写，更易于理解，并且将在本教程中首选。
实例
创建一个名为 Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
渲染组件
现在你的 React 应用程序有一个名为 Car 的组件，它返回一个 <h2> 元素。
要在您的应用程序中使用此组件，请使用与普通 HTML 类似的语法:<Car />
实例
在"root"元素中显示Car组件:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);道具
组件可以作为道具(props)传递，代表属性。
道具(props)就像函数参数，你将它们作为属性发送到组件中。
您将在下一章了解更多关于 道具props 的内容。
实例
使用属性将颜色传递给 Car 组件，并在 render() 函数中使用:
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
组件中的组件
我们可以在其他组件中引用组件:
实例
在 Garage 组件中使用 Car 组件:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
文件中的组件
React 就是重用代码，建议将组件拆分为单独的文件。
为此，创建一个带有 .js 文件扩展名的新文件并将代码放入其中:
请注意，文件名必须以大写字符开头。
实例
这是新文件，我们将其命名为 "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
为了能够使用 Car 组件，您必须在应用程序中导入该文件。
实例
现在我们在应用中导入"Car.js"文件，就可以像在这里创建的一样使用Car组件了。
import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
