react run如何搭配

运行 React 项目的常见方法

使用 create-react-app 脚手架
通过官方脚手架工具快速初始化项目并运行开发服务器：

npx create-react-app my-app
cd my-app
npm start

默认会在 http://localhost:3000 启动开发服务器，支持热更新。

通过 Vite 运行 React
Vite 提供更快的启动和热更新：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Vite 的默认端口通常为 5173。

自定义 Webpack 配置
若需手动配置构建工具，可安装 Webpack 和 Babel：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react --save-dev

配置 webpack.config.js 后，通过以下命令运行：

npx webpack serve --mode development

生产环境构建与部署

生成生产环境代码
使用以下命令生成优化后的静态文件：

npm run build

生成的文件默认位于 build 文件夹，可直接部署到静态服务器。

通过 Serve 快速测试生产包
全局安装 serve 并运行构建结果：

npm install -g serve
serve -s build

调试与测试

启用 React 开发者工具
安装浏览器扩展（Chrome/Firefox）以审查组件状态和性能。

运行测试脚本
使用 Jest 和 React Testing Library 执行测试：

npm test

其他常用命令

• 安装依赖：npm install 或 yarn add
• 清理缓存：npm cache clean --force
• 更新依赖：npm outdated 结合 npm update

根据项目需求选择适合的运行方式，开发阶段推荐使用热更新工具（如 Vite 或 CRA），生产环境需确保代码经过压缩和优化。