如何在 ReactJS 中创建组件？
众所周知，React 使用这种 JSX 格式，以便我们可以将 HTML 和 JavaScript 放在一起。这些 React 组件可以在你的 ReactJS 项目的任何地方定义，并且可以在你的 ReactJS 项目的任何地方使用。在 ReactJS 中有两种定义组件的方法，两种方法都被广泛的程序员使用，但是随着 APIS/HOOK 像 useState，使用上下文，功能组件变得越来越流行。
组件类型：
- 反应功能组件
- React 基于类的组件
1. React 功能组件： React 功能组件可以是任何返回 HTML 的 JavaScript函数。这些功能组件也可以接受“props”，即属性或数据。由于这些是 JavaScript 函数或 JavaScript 函数的扩展，它们也可以从箭头函数的 ES6 约定中创建。这些功能组件还可以接受我们可以使用 JSX 语法使用的道具，您也可以将普通的 JavaScript 代码放在 return 语句之前。需要注意的一件事是，每个组件应该只有一个回报。
句法：
Javascript
const Greet = (props) => {
const person = props.name;
return (
Hello {person}!!
)
}Javascript
import React, { Component } from 'react'
class App extends Component {
render() {
return (
Hello {this.props.name}
)
}
}App.js
import React from "react";
function Card({ receiver, writer }) {
return (
GeeksforGeeks
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles
Your truly, {writer}
);
}
export default function App() {
return (
2. React 基于类的组件：基于类的组件也具有与 React函数组件几乎相同的特性。但在我们定义基于类的组件之前，我们需要导入“React.组件”或从 React 中提取像“{Component}”这样的组件。
import React, {Components} from 'react';句法：
Javascript
import React, { Component } from 'react'
class App extends Component {
render() {
return (
Hello {this.props.name}
)
}
}
渲染组件：我们已经成功制作了组件，但是为了使用它们，我们需要渲染它们。可以先导出它们的组件，导入后可以在 ReactDOM.render 方法的任何地方使用它们。
ReactDOM.render() 在你的项目中的某个地方
ReactDOM.render(
,
document.getElementById('root')
);现在我们将看到使用 React 组件创建的成熟的工作应用程序。
创建 React 应用程序并安装模块：
第 1 步：使用以下命令创建一个 React 应用程序：
npx create-react-app foldername第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
cd foldername项目结构：它将如下所示。
文件目录
方法：现在在你的 App.js 中有一个名为“Card”的组件。稍后我们将使用该组件。这个 Then 组件接受“writer”和“receiver”的两个参数/数据。然后我们有一个返回，它只使用写入器和接收器的数据并将其显示在卡片上。之后，我们制作了另一个名为 App 的组件，它将用于保存我们应用程序的所有组件。这个 App 有一个导出默认值，所以我们可以在 React App 的任何地方使用它。因此，我们不必手动渲染它。在使用 npx 创建 React 应用程序时，此应用程序会自动呈现在您的 index.js中。
应用程序.js
import React from "react";
function Card({ receiver, writer }) {
return (
GeeksforGeeks
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles
Your truly, {writer}
);
}
export default function App() {
return (
运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：
npm start输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：
输出