React 生产构建会创建压缩后的代码包、更轻量的 Source Maps（源代码映射）以及经过优化的资源文件。这能有效提升应用的加载速度。React 官方建议在部署 React 应用时务必使用生产模式。我们现在已经了解到，生产构建对于优化性能至关重要。
React.js 提供了一套强大且高效的构建流程，专门用于优化应用程序以进行生产部署。默认情况下，React.js 会在开发模式下构建你的项目，该模式包含详细的错误信息和调试工具等功能。然而，当你准备部署应用程序时，将其构建为生产模式非常重要，这样可以从优化的性能和减小的代码包体积中受益。
现在，让我们通过一个分步指南来看看如何以生产模式创建 React 应用。
创建 React 应用程序的步骤
第1步： 打开终端并运行以下命令来创建一个项目文件夹
npx create-react-app myapp
第2步： 进入项目文件夹：
cd myapp
项目结构
初始的项目结构如下所示。
!image项目结构
第3步： 现在编辑项目中的 App.js 文件，将预先存在的代码替换为以下代码。
JavaScript
CODEBLOCK_b960b24e
CSS
CODEBLOCK_d4c25d11
运行应用程序的步骤： 进入项目文件夹的根目录，然后运行以下命令之一：
npm start
输出： 应用将在 3000 端口运行，输出界面将如下所示：
!image输出界面
第4步： 现在创建应用的生产构建。React App 使得在生产模式下构建变得非常简单。如果你的项目是使用 create-react-app 构建的，请进入项目的根目录并运行：
npm run build
!image正在创建生产构建
这将创建一个包含应用生产构建文件的 build 目录。你的 JavaScript 和 CSS 文件将位于 build/static 目录中。系统会生成多个 .js 文件并将其放置在 build/static/js 目录中。这些文件被称为 chunks（代码块）。
!image生产构建后生成的 JS chunks
第5步： 在生产模式下运行应用。我们将使用静态服务器来提供构建版本：在生产模式下，React 应用将运行在端口 5000 上。
serve -s build
!image应用在生产模式下运行
现在让我们看看如何判断构建过程是否设置正确。
- 我们将使用 Chrome 版 React Developer Tools。当安装并运行此扩展程序，且我们访问一个处于生产模式的 React 站点时，React 图标将变为深色背景。
!image生产模式
- 如果你访问一个处于开发模式的 React 站点，该图标将显示为红色背景：
!image开发模式