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安装：
npm install -g create-react-app
使用yarn安装：
yarn global add create-react-app
安装完成后，你就可以使用create-react-app命令来创建新的React应用了。
7.2.3 创建React应用
假设你想创建一个名为my-app的React应用，只需在终端中运行以下命令：
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进入项目目录，然后运行以下命令来启动开发服务器：
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：
- 安装
react-app-rewired和任何你希望覆盖的webpack配置相关的npm包。 - 在项目根目录下创建一个
config-overrides.js文件，并编写你的配置覆盖逻辑。 - 修改
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的进一步探索，你将能够构建出更加复杂、功能丰富的前端应用。记住，持续学习和实践是成为一名优秀前端开发者的关键。
