1.本地安装node环境
1.1.推荐版本号：v20.19.0
1.2.下载链接：nodejs.org/dist/v20.19…
2.react的安装与启动
2.1.安装指令：npm create vite@latest react-app --template react-ts （用最新版Vite官方脚手架，建一个已配置好React+TS的项目，开箱即跑）
2.2.安装版本号：v19.2.0
2.3.安装步骤选择
o Select a framework: ##选择前端框架
| React
|
o Select a variant: ##选择框架的版本，确认一下是JS还是TS?
| TypeScript
|
o Use rolldown-vite (Experimental)? ##是否体验"Rust版超快打包器"? 稳定版本选No，测速版本选Yes
| No
|
o Install with npm and start now? ## 是否立即安装依赖:npm install && 启动服务:npm run dev
| Yes
|
o Scaffolding project in D:\yhb\react\react-app...
|
o Installing dependencies with npm...
VITE v7.3.0 ready in 838 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
3.react初始化项目目录熟悉
图1.1.初始化项目目录
react-app/ ← 项目根目录
├── node_modules/ ← npm 装的所有依赖包，不动
├── public/ ← 静态资源（Vite 原样拷贝）
│ └── vite.svg ← 浏览器页签小图标
├── src/ ← 业务源码，90% 时间都在这里
│ ├── assets/
│ │ └── react.svg ← React _logo 示例图
│ ├── App.css ← 根组件样式
│ ├── App.tsx ← 根组件（TSX）
│ ├── index.css ← 全局样式
│ └── main.tsx ← 应用入口：创建根节点、渲染 <App />
├── .gitignore ← Git 忽略规则
├── eslint.config.js ← ESLint 9 扁平配置
├── index.html ← HTML 唯一模板，main.tsx 被注入这里
├── package.json ← 依赖 & 脚本
├── package-lock.json ← 精确版本锁
├── README.md ← 项目说明
├── tsconfig*.json ← TypeScript 三套配置：
│ ├── tsconfig.json ← 根配置，只引用下面两份
│ ├── tsconfig.app.json ← 业务代码编译选项
│ └── tsconfig.node.json ← 依赖预构建/Vite 插件编译选项
└── vite.config.ts ← Vite 配置文件（路径别名、插件等）
