react如何构建项目
使用 Create React App 构建项目
安装 Node.js（包含 npm）后运行以下命令创建项目：
npx create-react-app my-app
cd my-app
npm start项目结构说明：
public/存放静态资源src/存放核心代码package.json管理依赖项
使用 Vite 构建项目（推荐现代项目）
运行以下命令创建基于 Vite 的 React 项目：
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev优势：
- 启动速度比 CRA 快 10-100 倍
- 原生支持 TypeScript
- 按需编译
手动配置 Webpack 项目
安装基础依赖：
npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-react创建 webpack.config.js：
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
};项目结构优化建议
标准项目目录结构示例：
src/
├── components/ # 公共组件
├── pages/ # 页面组件
├── hooks/ # 自定义 Hook
├── utils/ # 工具函数
├── styles/ # 全局样式
├── store/ # 状态管理
└── App.js # 根组件添加必要工具链
常用开发依赖：
npm install --save-dev eslint prettier husky lint-staged
npm install react-router-dom axios配置 .eslintrc.json：
{
"extends": ["react-app", "prettier"],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}部署生产版本
构建优化后的生产包：
npm run build部署到 GitHub Pages：
npm install --save-dev gh-pages在 package.json 中添加：
"homepage": "https://username.github.io/repo-name",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
