<p>Vite 创建 React 项目是当前主流轻量开发环境，替代 create-react-app，支持 JSX、TypeScript、HMR 和现代 CSS；需 Node.js v18/v20 LTS，运行 npm create vite@latest my-app -- --template react-ts 初始化，cd my-app 后 npm install && npm run dev 启动。</p>
直接用 Vite 创建 React 项目就是当前最主流、最轻量的“经典开发环境”——它替代了旧版 create-react-app，启动快、热更新准、配置简洁，且开箱即支持 JSX、TypeScript、HMR 和现代 CSS 特性。
确认基础依赖已就位
确保已安装 Node.js v18 或 v20 LTS（推荐 v20.x），终端执行以下命令验证：
-
node -v—— 应输出类似v20.15.0 -
npm -v—— 应输出10.x或更高版本 - 无需全局安装 Vite 或 React；所有工具都通过 npm 本地调用
一键初始化 React + TypeScript 项目
在终端中运行（推荐使用 PowerShell 或 VS Code 内置终端）：
npm create vite@latest my-app -- --template react-ts
说明：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“Java免费学习笔记（深入）”；
-
my-app可替换为你想要的项目名（小写英文、无空格、无大写字母） -
--template react-ts表示启用 TypeScript 支持；如需纯 JavaScript，改用react - Vite 自动集成
@vitejs/plugin-react，已内置 JSX 编译、Fast Refresh 等能力
启动与日常开发流程
进入项目并运行：
cd my-app<br>npm install<br>npm run dev
服务默认在 https://www.php.cn/link/2d16ef569bb8d2fddf2e9b279f73e7f8 启动，保存代码后浏览器自动刷新。常用命令：
-
npm run build—— 构建生产包（输出到dist/） -
npm run preview—— 本地预览构建结果（模拟上线环境） -
npm run dev -- --open—— 启动时自动打开浏览器
按需增强开发体验
经典环境不等于“最小可用”，可快速添加以下高频能力：
-
路径别名：在
vite.config.ts中配置resolve.alias，例如映射@到src/ -
CSS 预处理器：装
less或sass，直接导入.less或.scss文件即可生效 -
ESLint + Prettier：运行
npx eslint --init，选 TypeScript + React + Browser，再装插件和配置文件 -
React Router：
npm install react-router-dom，然后在main.tsx中包裹RouterProvider
