7.2Create React App-React全家桶--前端开发与实例(上)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(上)

### 7.2 Create React App：快速启动React项目

在React的广阔生态中，`Create React App`（简称CRA）是一个至关重要的工具，它为开发者提供了一个零配置的现代Web开发环境，让开发者能够迅速搭建起React应用的骨架，并专注于应用的核心功能开发而非配置繁琐的构建工具和依赖。本章将深入介绍`Create React App`的使用方法、特性、以及如何利用它来创建并运行你的第一个React应用。

#### 7.2.1 理解Create React App

**1.1 起源与目的**

`Create React App`由Facebook团队开发并维护，旨在简化React应用的创建和开发流程。它封装了Webpack、Babel、ESLint等工具的配置，使得开发者无需深入了解这些复杂工具的配置细节，即可快速启动并运行React项目。通过提供一套预配置的开发环境和构建流程，`Create React App`使得React应用的开发更加标准化、高效化。

**1.2 特性概览**

- **零配置**：开箱即用，无需手动配置Webpack、Babel等。
- **实时重载**：支持热模块替换（HMR），在开发过程中自动刷新浏览器以显示最新的更改。
- **生产优化**：构建生产版本时自动优化代码，包括代码分割、懒加载、压缩等。
- **现代化JavaScript**：支持ES6+语法，无需额外配置即可使用React的最新特性。
- **路由、状态管理和样式框架的集成**：通过`react-router-dom`、Redux、CSS-in-JS等库的轻松集成，支持复杂应用的需求。
- **代码格式化和错误检查**：内置ESLint和Prettier，帮助维护代码质量。

#### 7.2.2 安装Create React App

在开始之前，请确保你的开发环境中已安装了Node.js和npm/yarn。Create React App的安装非常简单，你可以通过npm或yarn进行全局安装。

**使用npm安装**：

```bash
npm install -g create-react-app
```

**使用yarn安装**：

```bash
yarn global add create-react-app
```

安装完成后，你就可以使用`create-react-app`命令来创建新的React应用了。

#### 7.2.3 创建React应用

假设你想创建一个名为`my-app`的React应用，只需在终端中运行以下命令：

```bash
npx create-react-app my-app
# 或者，如果你已经全局安装了create-react-app
# create-react-app my-app
```

这里使用`npx`而不是直接调用全局安装的`create-react-app`，是因为`npx`可以确保你使用的是`create-react-app`的最新版本，而无需担心全局安装的版本可能过时。

命令执行后，`Create React App`会为你创建一个新的文件夹`my-app`，并在其中设置好一切必要的文件和依赖。你可以通过`cd my-app`进入项目目录，然后运行以下命令来启动开发服务器：

```bash
npm start
# 或者
yarn start
```

开发服务器启动后，你的React应用将在默认浏览器（通常是Chrome）中自动打开，并显示在应用根目录下的`src/App.js`中定义的初始界面。同时，服务器将监听文件更改，并在检测到变化时自动重新加载浏览器以显示最新的内容。

#### 7.2.4 项目结构概览

一个通过`Create React App`创建的项目通常具有以下结构：

```
my-app/
├── node_modules/          # 存放项目的所有依赖包
├── public/
│   ├── favicon.ico        # 网站图标
│   ├── index.html         # HTML模板文件，Webpack会将其中的占位符替换为实际构建的JS和CSS文件
│   ├── logo192.png        # 适用于高DPI屏幕的网站图标
│   ├── logo512.png        # 适用于平板和桌面浏览器的网站图标
│   ├── manifest.json      # 网站的web应用清单，用于添加至设备的主屏幕
│   └── robots.txt         # 指示搜索引擎如何抓取网站内容的文件
├── src/
│   ├── App.css            # App组件的样式文件
│   ├── App.js             # 应用的主组件
│   ├── App.test.js        # App组件的单元测试文件
│   ├── index.js           # 应用的入口文件，用于挂载React组件到DOM
│   ├── logo.svg           # React官方Logo
│   └── serviceWorker.js   # 注册service worker以启用PWA特性（可选）
├── .gitignore             # Git忽略文件列表
├── package.json           # 项目的元数据和依赖信息
├── README.md              # 项目的说明文件
└── yarn.lock              # 如果你使用yarn，这将锁定依赖版本
```

#### 7.2.5 定制Create React App

虽然`Create React App`提供了强大的零配置开发体验，但在某些情况下，你可能需要对其进行定制以满足特定的需求。幸运的是，`Create React App`提供了`eject`命令来暴露所有配置，但这通常是不推荐的，因为这会失去`Create React App`带来的便捷性。更好的做法是使用`react-app-rewired`或`craco`（Create React App Configuration Override）等工具来覆盖默认配置，而无需`eject`。

**使用react-app-rewired**：

1. 安装`react-app-rewired`和任何你希望覆盖的webpack配置相关的npm包。
2. 在项目根目录下创建一个`config-overrides.js`文件，并编写你的配置覆盖逻辑。
3. 修改`package.json`中的`scripts`部分，将`react-scripts`替换为`react-app-rewired`。

#### 7.2.6 部署Create React App项目

当你的React应用开发完成并准备部署时，你可以使用`npm run build`或`yarn build`命令来构建生产版本的静态文件。这些文件将被输出到`build`文件夹中，你可以将其部署到任何支持静态文件的服务器上，如Netlify、Vercel、GitHub Pages等。

#### 7.2.7 小结

`Create React App`是React生态中不可或缺的一部分，它为开发者提供了一个快速启动和高效开发React应用的强大工具。通过本章的介绍，你应该已经掌握了如何使用`Create React App`来创建、开发、定制和部署React应用。随着你对React和`Create React App`的进一步探索，你将能够构建出更加复杂、功能丰富的前端应用。记住，持续学习和实践是成为一名优秀前端开发者的关键。

该分类下的相关小册推荐：

ReactJS面试指南

React 进阶实践指南

剑指Reactjs

深入学习React实战进阶

React全家桶--前端开发与实例(下)