React 项目说明
用 Vite 创建好 React 项目后，目录里会出现不少文件。新手常困惑"这些文件各是干什么的、我该改哪个"。本节以 hello-react 项目为例，把典型结构逐一讲清楚。
项目目录结构
hello-react/
├── index.html # 页面入口，浏览器最先加载它
├── package.json # 项目配置：依赖、脚本命令
├── vite.config.js # Vite 构建工具的配置
├── public/ # 静态资源目录
├── node_modules/ # npm 安装的第三方依赖（勿手动改动）
└── src/ # 源码目录，日常开发都在这里
├── main.jsx # 程序入口文件
├── App.jsx # 根组件
├── App.css # 根组件的样式
├── index.css # 全局样式
└── assets/ # 图片等资源
index.html：页面外壳
它是唯一的 HTML 文件，浏览器加载后先执行它：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>hello-react</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
关键点：id 为 root 的空 div 是 React 的挂载点；main.jsx 以模块方式被引入执行。
main.jsx：入口文件
它是 JavaScript 的起点，负责渲染整个应用：
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
渲染效果：把根组件 App 放进 root 节点。StrictMode 是开发辅助组件，会帮你检查潜在问题。
App.jsx：根组件
App 是整棵组件树的根，页面所有内容都由它往下展开：
function App() {
return (
<div>
<h1>项目根组件</h1>
</div>
);
}
export default App;
渲染效果：页面顶部显示"项目根组件"。你可以在这里引入更多自己写的子组件。
package.json：项目说明书
它记录了项目名称、脚本与依赖：
{
"name": "hello-react",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
npm run dev 对应 vite，npm run build 对应 vite build（打包产物输出到 dist 目录）。
小结
React 项目结构其实很简单：index.html 提供挂载点，main.jsx 负责启动渲染，App.jsx 是根组件，其余文件围绕它们服务。日常写代码基本只动 src 目录，记住这点就不会迷路。