在实现函数组件的时候，如果是单纯的js文件使用函数组件的话，会报错，因为js文件是无法解析的，需要改成 .jsx 文件。

解析jsx

使用vite创建的项目，如果遇到jsx文件的话，会默认把dom标签转化成虚拟dom，然后调用React.createElement ，最终将真实dom转化为以下结构

const VirtualDOM = {
  type: 'div';
  props: {
    children: [];
    props: {
			id: 'app'
			...
		};
  };
}

vite并不会直接去处理 .jsx 文件，而是使用esBuild去处理

JSX 是一种类似 XML 的 JavaScript 语法扩展，是为 React 创建的。它旨在由您的构建工具转换为普通的 JavaScript。每个 XML 元素都成为一个普通的 JavaScript 函数调用。例如，以下 JSX 代码：

import Button from './button' let button = <Button>Click me</Button> render(button)

将被转换为以下 JavaScript 代码

import Button from "./button"; let button = React.createElement(Button, null, "Click me"); render(button);