React 脚手架使用指南
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
- 及时更新依赖
- 保持项目结构清晰
- 做好文档维护