React 脚手架使用指南
目录
- 概述
- 创建项目
- 项目结构
- 常用命令
- 配置说明
- 最佳实践
概述
什么是 React 脚手架？
React 脚手架(Create React App)是 Facebook 官方提供的创建 React 单页应用的工具。它提供了一个零配置的现代构建设置。
为什么使用脚手架？
- 无需配置 Webpack 和 Babel
- 内置热重载
- 自动化构建过程
- 优化的生产构建
- 良好的开发体验
创建项目
1. 使用 npx 创建(推荐)
# 创建基础 React 项目
npx create-react-app my-app# 创建 TypeScript 项目
npx create-react-app my-app --template typescript# 进入项目目录
cd my-app# 启动开发服务器
npm start
2. 使用 npm 创建
# 全局安装 create-react-app
npm install -g create-react-app# 创建项目
create-react-app my-app
项目结构
my-app/├── node_modules/├── public/│ ├── favicon.ico│ ├── index.html│ ├── manifest.json│ └── robots.txt├── src/│ ├── App.css│ ├── App.tsx│ ├── App.test.tsx│ ├── index.css│ ├── index.tsx│ ├── logo.svg│ ├── react-app-env.d.ts│ ├── reportWebVitals.ts│ └── setupTests.ts├── .gitignore├── package.json├── README.md├── tsconfig.json└── yarn.lock
目录说明
1. public 目录
<!-- public/index.html - 应用的 HTML 模板 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>React App</title></head><body><div id="root"></div></body>
</html>
2. src 目录
// src/index.tsx - 应用的入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);// src/App.tsx - 主应用组件
import React from 'react';
import './App.css';function App() {return (<div className="App"><header className="App-header"><h1>Welcome to React</h1></header></div>);
}export default App;
常用命令
开发命令
# 启动开发服务器
npm start# 构建生产版本
npm run build# 运行测试
npm test# 弹出配置文件
npm run eject
配置说明
1. package.json
{"name": "my-app","version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.16.5","@testing-library/react": "^13.4.0","@testing-library/user-event": "^13.5.0","@types/node": "^16.18.0","@types/react": "^18.0.0","@types/react-dom": "^18.0.0","react": "^18.2.0","react-dom": "^18.2.0","react-scripts": "5.0.1","typescript": "^4.8.4","web-vitals": "^2.1.4"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}
}
2. tsconfig.json
{"compilerOptions": {"target": "es5","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"},"include": ["src"]
}
最佳实践
1. 目录结构建议
src/├── components/ # 共享组件├── pages/ # 页面组件├── hooks/ # 自定义 hooks├── services/ # API 服务├── utils/ # 工具函数├── types/ # TypeScript 类型定义├── assets/ # 静态资源└── styles/ # 样式文件
2. 环境变量配置
# .env.development - 开发环境配置
REACT_APP_API_URL=http://dev-api.example.com# .env.production - 生产环境配置
REACT_APP_API_URL=http://api.example.com
3. 代码规范配置
// .eslintrc
{"extends": ["react-app","react-app/jest"],"rules": {"no-console": "warn","prefer-const": "error"}
}
常见问题解决
1. 路径别名配置
// tsconfig.json
{"compilerOptions": {"baseUrl": "src","paths": {"@/*": ["*"],"@components/*": ["components/*"],"@pages/*": ["pages/*"]}}
}
2. 代理配置
// package.json
{"proxy": "http://localhost:3001"
}
总结
-
脚手架优势：
- 快速创建项目
- 零配置开始
- 完整的开发环境
- 优化的构建过程
-
使用建议：
- 遵循目录结构规范
- 合理使用环境变量
- 保持代码规范统一
- 适时添加必要的配置
-
注意事项：
- 慎用 eject
- 及时更新依赖
- 保持项目结构清晰
- 做好文档维护
