28 项目构建与优化之使用 Create React App

在前端开发中，构建项目的工具和框架选择对我们整个开发流程有着重要的影响。正如在上一篇文章中探讨过的，如何与 API 交互并处理数据与错误是构建现代化应用的重要一环。本篇将深入讨论如何使用 Create React App (CRA) 来搭建和优化我们的 React + TSX 项目。

什么是 Create React App？

Create React App 是由 Facebook 提供的一个命令行工具，可以帮助我们快速创建一个新的 React 应用。其优势在于，CRA 通过预配置的方式，免去了繁琐的配置，让我们可以直接专注于代码实现。

安装与创建项目

首先，我们需要确保已经安装了 Node.js 和 npm。然后可以使用以下命令创建一个新的 React + TypeScript 项目：

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

这条命令将会创建一个名为 my-app 的新项目，并使用 TypeScript 模板。在创建完成后，进入项目目录：

cd my-app

然后启动开发服务器：

npm start

这时，打开浏览器访问 http://localhost:3000，你应该能看到默认的 CRA 欢迎页面。

项目结构

创建完成后，我们的项目结构会如下所示：

my-app
├── node_modules
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── package.json
├── tsconfig.json
└── ...

• src 文件夹是我们主要的代码编写区域，所有的 React 组件、样式等都应该放在这里。
• public/index.html 是应用的 HTML 模板。
• package.json 文件是配置文件，定义了项目依赖和脚本。

配置与优化

CRA 提供了一些默认的配置，然而，我们常常需要根据项目的需求进行一些自定义配置与优化。以下是几点常用的优化建议：

1. 使用环境变量

CRA 允许我们通过在 .env 文件中设置环境变量来配置不同的开发模式。比如，可以在 .env 文件中添加如下内容：

REACT_APP_API_URL=https://api.example.com

在代码中使用时，使用 process.env.REACT_APP_API_URL来访问该变量：

const apiUrl = process.env.REACT_APP_API_URL;

2. 代码分割

对于大型应用，代码分割可以显著提升页面加载速度与性能。CRA 支持动态 import() 功能。例如在 App.tsx 中，可以将某个组件进行代码分割：

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App: React.FC = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

在这个例子中，LazyComponent 只有在需要时才会被加载，优雅地提升了应用的性能。

3. PWA (渐进式Web应用)

CRA 还支持渐进式 Web 应用的创建，只需在创建项目时添加 --template cra-template-pwa 参数，如下所示：

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

使用 PWA 能够使您的应用在脱机时也能使用，从而为用户提供更好的体验。

调试与测试

CRA 还帮助我们配置了强大的调试与测试工具。React Developer Tools 插件是一个不可或缺的工具，它可以帮助我们调试 React 应用。CRA 默认使用 Jest 进行单元测试，我们可以通过以下命令运行测试：

npm test

整体总结

使用 Create React App 来创建 React + TypeScript 项目，不仅能够快速上手，还能够利用内置的功能进行简单而有效的优化。在适当的时候引入环境变量、代码分割和 PWA 模式，可以显著提升应用的性能和用户体验。

在后续的文章中，我们将进一步深入探讨项目的 打包与部署，让我们的应用能够在生产环境中平稳运行。

在下一篇文章之前，建议大家尝试在本地创建项目并进行一些基本的开发和优化操作。只有不断实践，才能更好地理解和掌握这些工具和技术！