react如何构建项目

React 项目构建方法

使用 create-react-app 是官方推荐的快速构建 React 项目的方式。确保已安装 Node.js（建议版本 12+），在终端运行以下命令：

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

该方法会自动配置 Webpack、Babel 等工具，生成的项目结构包含 src（源码）、public（静态文件）等目录。

自定义配置构建

如需更灵活的配置，可通过 eject 或手动设置：

npm run eject

执行后会将所有配置文件和依赖项暴露到项目目录中，允许直接修改 Webpack 或 Babel 配置。注意此操作不可逆。

使用 Vite 构建

Vite 提供更快的开发服务器启动和热更新：

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

Vite 的配置文件 vite.config.js 支持对构建流程进行扩展，例如添加插件或调整输出格式。

项目结构优化

典型的生产环境项目结构可参考以下方式组织：

src/
├── components/   # 公共组件
├── pages/        # 页面级组件
├── hooks/        # 自定义 Hook
├── utils/        # 工具函数
├── styles/       # 全局样式
└── App.js        # 根组件

环境变量配置

在项目根目录创建 .env 文件定义环境变量，变量需以 REACT_APP_ 开头：

REACT_APP_API_URL=https://api.example.com

通过 process.env.REACT_APP_API_URL 在代码中访问。生产环境构建时会替换为实际值。

生产环境构建

运行以下命令生成优化后的代码：

npm run build

输出位于 build 目录，包含静态文件可直接部署到服务器。使用 serve 测试生产版本：

npm install -g serve
serve -s build