在前端开发中，构建工具是必不可少的。最常用的工具之一就是 webpack。但是，配置 webpack 可能比写实际应用程序还要复杂一些。本文将介绍如何使用 create-react-app 命令行工具来创建零配置的 React 项目，让你无需手动编写配置文件，快速开始编写 React 应用。
创建 React 项目
在开始项目之前，我们需要先安装 create-react-app 命令行工具。在终端中运行以下命令：
npm i -g create-react-app
安装完成之后，就可以通过运行以下命令来创建一个新的 React 项目：
create-react-app my-react-project
这将创建一个名为 my-react-project 的新目录，其中包含了一个 React 项目的基础骨架。
运行 React 项目
进入项目目录并运行 npm start 命令即可启动 React 项目。这将在本地开发服务器上启动你的项目（默认端口为 3000）：
cd my-react-project npm start
访问 http://localhost:3000 即可看到你的 React 应用程序。
此时，如果你修改了代码并保存，代码将被重新编译并自动重新载入浏览器窗口中，无需手动刷新页面。
打包 React 项目
当你准备将你的 React 应用程序推向生产环境时，你需要运行以下命令以构建并打包你的应用程序：
npm run build
这将创建一个名为 build 的新目录，其中包含了优化过的静态文件。接下来，你可以将此文件夹上传到服务器或使用基于静态文件托管的 PaaS 平台进行部署。
项目文件结构
下面是一个基本的 create-react-app 项目文件结构，它已经为你自动生成了默认配置：
-- -------------------- ---- -------
------
--- ---------
--- ------------
--- ------------
--- ----------
--- ------
- --- -----------
- --- ----------
- --- -------------
--- ---
--- -------
--- ------
--- -----------
--- ---------
--- --------
--- --------其中，
public目录包含了项目的 HTML 模板和静态资源文件。src目录包含了项目的 React 代码。
使用 TypeScript
create-react-app 还支持使用 TypeScript 编写 React 应用程序。你可以使用 --template typescript 选项创建一个基于 TypeScript 的新项目：
npx create-react-app my-react-project --template typescript
要将现有 JavaScript 项目转换为 TypeScript 项目，只需将 .js 文件后缀改为 .tsx 即可开始编写 TypeScript 代码。
配置 Webpack
如果你需要修改底层的 Webpack 配置，create-react-app 提供了 eject 命令，该命令会解包所有隐藏的配置文件并将它们显示在你的项目中。但这个命令不可逆，因此务必谨慎使用。
npm run eject
如果你想修改默认配置而又不想使用 eject 命令，你可以通过创建一个 config-overrides.js（基于 customize-cra 库）或 react-app-rewired（基于 react-app-rewired 库）文件来进行覆盖。
结论
我们已经介绍了如何使用 create-react-app 工具创建并打包零配置的 React 项目。这个工具可以让你快速开始编写 React 应用程序，而无需手动编写配置文件。同时，当你准备将代码推向生产环境时，你只需运行一条命令即可打包你的应用。
在你开始下一个 React 项目时，记得尝试使用 create-react-app，它可以使你的开发工作更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e99b7e884a3e30f287055