React 组件是一个 js 函数，函数可以添加 jsx 标记

当前页使用组件，基本使用

注意：组件的名称，第一个字母一定要大写，否则会报错

import { createRoot } from "react-dom/client";
import "./index.css";

const root = createRoot(document.querySelector("#root"));

// 组件的使用
const App = () => {
  const handleIncident = () => {
    console.log("组件的使用");
  };

  return (
    <div>
      <div className="box" onClick={handleIncident}>
        inde.js 内容
      </div>
    </div>
  );
};

// 使用
root.render(<App />);

拆分组件使用

目录结构

index.js

import { createRoot } from "react-dom/client";

// 引入组件
import App from "./App";

const root = createRoot(document.querySelector("#root"));

// 使用
root.render(<App />);

App.js 现在为出口文件

// 组件的使用
// 引入样式
import "./App.css";
// 引入组件
import Title from "./components/TitleData/index";

// 注意组件的名称，第一个字母一定要大写，否则会报错
const App = () => {
  const handleIncident = () => {
    console.log("组件的使用");
  };

  return (
    <div>
      <div className="box" onClick={handleIncident}>
        <Title></Title>
        inde.js 内容
      </div>
    </div>
  );
};

// 导出
export default App;

组件

components\TitleData\index.js

const Title = () => {
  return <h1>TitleData 标题</h1>;
};

export default Title;