create-react-app 命令

简介

create-react-app 是由 Facebook 开发的官方命令行工具，用于快速创建 React 应用。它提供了一个现代化的构建设置，无需配置即可开始 React 开发。

安装

全局安装（传统方式）

bash

npm install -g create-react-app

使用 npx（推荐方式）

bash

npx create-react-app my-app

基本用法

创建新应用

bash

npx create-react-app my-app

指定目录

bash

npx create-react-app ./my-app

常用选项

使用 TypeScript

bash

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

使用 JavaScript 模板（默认）

bash

npx create-react-app my-app --template cra-template

使用 pnpm 包管理器

bash

pnpm create vite@latest my-app -- --template react

使用 yarn 包管理器

bash

yarn create react-app my-app

创建最小化模板（无测试工具）

bash

npx create-react-app my-app --template minimal

项目结构

创建的 React 应用包含以下基本结构：

text

my-app/
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── robots.txt
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── reportWebVitals.js

开发工作流

启动开发服务器

bash

cd my-app
npm start

这将启动一个开发服务器，默认运行在 http://localhost:3000

构建生产版本

bash

npm run build

这将在 build 目录中生成生产环境的构建文件

运行测试

bash

npm test

分析构建文件

bash

npm run build -- --stats
npx webpack-bundle-analyzer build/static/js/*.js

高级用法

自定义配置

create-react-app 默认隐藏了所有配置文件，如果需要自定义配置，可以使用以下命令：

bash

npm run eject

注意：此操作不可逆，执行后将暴露所有配置文件

添加路由

bash

npm install react-router-dom

添加状态管理

bash

# 使用 Redux
npm install @reduxjs/toolkit react-redux

# 使用 MobX
npm install mobx mobx-react-lite

添加 CSS 预处理器

bash

# 使用 Sass
npm install sass

# 使用 Less
npm install less less-loader

故障排除

端口被占用

如果端口 3000 被占用，可以使用以下命令指定其他端口：

bash

PORT=3001 npm start

安装依赖失败

尝试清理 npm 缓存并重新安装：

bash

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

构建失败

检查是否有语法错误或依赖问题，尝试更新所有依赖：

bash

npm update
npm run build

迁移到 Vite

由于 create-react-app 维护状态问题，许多开发者选择迁移到 Vite：

bash

# 创建 Vite 项目
npm create vite@latest my-vite-app -- --template react

总结

create-react-app 是一个快速创建 React 应用的强大工具，尤其适合初学者。它提供了开箱即用的开发环境，让开发者可以专注于编写 React 代码而不是配置工具链。对于需要更高级配置的项目，可以考虑使用 Vite 或手动配置 Webpack。