使用Create React App - 元素码农

发布时间: 2025-03-22 12:33

↑

# 使用Create React App

本文将详细介绍如何使用Create React App (CRA)快速搭建React开发环境，帮助你轻松开始React项目开发。

## 什么是Create React App？

Create React App是Facebook官方推出的用于创建React单页应用的脚手架工具。它提供了一个零配置的现代构建设置，让你可以将注意力集中在代码而不是构建工具上。

主要特点：
- 零配置：无需手动配置Webpack和Babel
- 内置优化：默认包含生产级别的优化
- 实时重载：支持开发时的热重载
- 现代特性：支持最新的JavaScript特性

## 环境准备

在开始之前，确保你的系统已安装：

1. Node.js (推荐v14.0.0或更高版本)
2. npm (Node.js包管理器，随Node.js一起安装)

可以通过以下命令检查版本：

```bash
node -v
npm -v
```

## 创建新项目

### 使用npx创建项目

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

这个命令会：
1. 创建名为my-app的新目录
2. 安装所有必需的依赖
3. 配置开发环境
4. 创建初始项目结构

### 项目结构说明

```
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
```

- `public/index.html`: 应用的HTML模板
- `src/index.js`: JavaScript入口文件
- `src/App.js`: 主要的React组件
- `package.json`: 项目配置和依赖管理

## 可用的脚本命令

Create React App提供了几个内置的命令：

```bash
npm start    # 启动开发服务器
npm test     # 运行测试
npm run build # 构建生产版本
npm run eject # 暴露配置文件
```

### npm start

启动开发服务器，默认在http://localhost:3000打开应用。当你修改代码时，页面会自动重新加载。

### npm test

以交互模式运行测试监视器。默认情况下，会运行与上次提交以来更改的文件相关的测试。

### npm run build

将应用构建到`build`文件夹，为生产环境优化构建：
- 代码压缩
- 文件名加入内容哈希
- 生成源代码映射文件

### npm run eject

**注意：这是单向操作，一旦执行无法撤销！**

如果你需要自定义构建配置，可以使用`eject`命令。这会将所有配置文件和构建依赖复制到你的项目中。

## 开发建议

### 1. 使用环境变量

Create React App支持在`.env`文件中定义环境变量：

```plaintext
REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=$npm_package_version
```

在代码中使用：
```javascript
console.log(process.env.REACT_APP_API_URL);
```

### 2. 添加依赖

使用npm安装新的依赖：

```bash
npm install axios    # 安装运行时依赖
npm install --save-dev @testing-library/react  # 安装开发依赖
```

### 3. 使用TypeScript

如果想使用TypeScript，可以在创建项目时指定模板：

```bash
npx create-react-app my-app --template typescript
```

### 4. 添加样式支持

CRA默认支持CSS Modules和Sass：

```bash
npm install sass  # 安装Sass支持
```

使用CSS Modules：
```javascript
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}
```

## 常见问题解决

### 1. 端口占用

如果3000端口被占用，CRA会自动寻找下一个可用端口。你也可以通过设置PORT环境变量来指定端口：

```bash
PORT=3001 npm start
```

### 2. 代理API请求

在开发环境中代理API请求，在package.json中添加：

```json
{
  "proxy": "http://localhost:4000"
}
```

### 3. 性能优化

- 使用生产构建
- 实现代码分割
- 使用React.lazy()懒加载组件
- 优化图片和静态资源

## 部署

### 1. 静态服务器

构建后的应用可以部署到任何静态文件服务器：

```bash
npm run build
serve -s build
```

### 2. 使用Docker

创建Dockerfile：

```dockerfile
FROM node:14 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 总结

Create React App是开始React开发的最佳选择之一：

1. 提供完整的开发环境
2. 零配置开始开发
3. 内置优化和最佳实践
4. 活跃的社区支持

建议在学习React或开始新项目时使用CRA，它能让你专注于编写应用逻辑，而不是花时间在环境配置上。随着项目的发展，你可以根据需要逐步添加自定义配置。