天天滚动:react组件的概念及创建组件并使用（系列课程第4天）
在 React 中，组件是构建 UI 界面的基本单元。组件可以看作是一个独立的模块，它封装了一些特定的功能和状态，并可以在页面中复用。
(相关资料图)
React 组件可以分为两种类型：函数组件和类组件。
函数组件通常是一个简单的函数，它接受一些参数（也称为 props）并返回一个 JSX 元素，例如：
function Welcome(props){return
Hello,{props.name}!
这个函数组件接受一个名为 name 的 prop，用它来构建一个欢迎语句。该组件可以在页面上使用，例如：
在这个例子中，我们将一个名为 ofym 的字符串传递给了 name prop，组件将会显示一个欢迎语句，内容为 Hello, ofym!。
类组件则是一个继承自 React.Component 类的 JavaScript 类，例如：
class Welcome extends React.Component {render(){return
Hello,{this.props.name}!
这个类组件与上面的函数组件实现相同的功能，但是它使用了一个类来定义。类组件中必须实现一个名为 render 的方法，该方法返回一个 JSX 元素。
无论是函数组件还是类组件，它们都可以在页面上以组件的形式使用，并可以传递 props 来自定义组件的行为和显示内容。
【组件案例】
在 React 中创建组件有两种方式：函数组件和类组件。
函数组件是一个简单的函数，它接受一个名为 props 的参数并返回一个 JSX 元素，例如：
function Hello(props){return
这个函数组件将接受一个名为 name 的 props，用它来构建一个简单的问候语句。现在我们可以在其他组件中使用这个 Hello 组件，例如：
function App(){return (
在这个例子中，我们在 App 组件中使用了两次 Hello 组件，并传递了不同的 name prop，用来显示不同的问候语句。
类组件是一个继承自 React.Component 的 JavaScript 类，例如：
class Hello extends React.Component {render(){return
这个类组件与上面的函数组件实现相同的功能，但使用了一个类来定义。注意，在类组件中必须实现一个名为 render 的方法，该方法返回一个 JSX 元素。
无论是函数组件还是类组件，它们都可以在项目中使用。你可以将它们导入到其他组件中并在需要的地方使用它们。例如，假设你在 src/components 目录下创建了一个 Hello.js 文件来定义上面的 Hello 组件，那么你可以在其他组件中这样导入和使用它：
import React from "react";import Hello from "./components/Hello";function App(){return (
在这个例子中，我们导入了 Hello 组件，并在 App 组件中使用了它。注意，我们在导入 Hello 组件时使用了相对路径./components/Hello，因为 Hello.js 文件位于 src/components 目录下。
想了解更多精彩内容，快来关注欧方
