为什么选vite？从 React 初学者的角度，可以选择使用 Vite + React，因为它尽可能地接近 React 的基本原理。如果只需要一个轻量级的单页应用/客户端渲染解决方案，也可以选择 Vite + React。对于我们初学者来说，vite毫无疑问是个不错的选择。
vite搭建react项目
Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
npm create vite@latest / npm init vite
选择vite是因为他快，确实很快，如果你有兴趣了解为何它这么快？可以参考这篇文章。为什么vite这么快 这里 作为初学者，我们先快速的搭建好项目并且进行开发。
根据提示，在Project name后输入你的项目名称就行，然后选择react -> JavaScript 等待片刻就好了
cd test npm install npm run dev
进入到项目目录 初始化 运行项目 相比于CRA 还是很快的昂
进入到项目文件夹
node_modules
这就没啥说的，node包管理工具下载安装的包的文件夹
package.json
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。负责管理整个项目用到的依赖包列表配置以及项目打包的一些脚本命令scripts配置。
favicon.ico
是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。
index.html
项目的入口文件，引用了第三方类库 <div id="root"></div>是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个。
App.jsx
export default App;是为了将App公开.
return的内容是类似于html结构的内容，就是jsx，jsx语法是react的主要语法。内部的div的className是为了区分html语法的一个类名，这个是div的样式引用。在这个文件中，只能用一个div容器，如果在div的同级目录添加别的内容，便会报错 className="App"，是引用到App.css的样式。注意，页面内容样式是就近原则，首先用App.css的样式，App.css是组件的样式，index.css是全局的样式。
main.jsx
main.jsx文件通常作为项目的入口文件，用于初始化应用程序并将根组件渲染到 DOM 中。这个文件通常包含以下几个主要步骤：
- 引入 React 和 ReactDOM：引入必要的库来创建 React 组件和将它们渲染到 DOM 中。
- 引入根组件 ：引入应用程序的根组件（通常是
App.js或App.jsx）。 - 引入全局样式 ：引入全局样式文件（如
index.css）。 - 渲染根组件 ：使用
ReactDOM.render或ReactDOM.createRoot将根组件渲染到 HTML 文件中的某个元素（通常是带有id="root"的div元素）。
根据需要创建的文件夹
components/
存放项目的所有 React 组件。每个组件通常有自己的目录，包含组件的 JavaScript 文件和样式文件。
开发
了解了基本的项目架构，我们就可以开始进行开发了 当你进入到react开发