介绍
create-react-app 是一个由 Facebook 创建的 npm 包，用于快速创建 React 项目的脚手架。它可以自动构建项目的基础结构，并提供了一些示例代码、配置文件和启动脚本，大大简化了 React 项目的搭建过程。本篇文章将介绍如何使用 create-react-app 来创建 React 项目。
安装
我们首先需要全局安装 create-react-app：
$ npm install -g create-react-app
安装完成后，我们可以使用 create-react-app 命令来创建项目。
创建项目
在终端中，进入到项目存放的目录，执行如下命令：
$ create-react-app my-app
其中，my-app 是你想要创建的项目名称。执行完毕后，create-react-app 会创建一个 my-app 的文件夹，并在其中生成 React 项目的基础结构。
项目结构
我们来看一下使用 create-react-app 创建的项目的基础结构：
-- -------------------- ---- ------- ------- --- ------------- --- ------- - --- ---------- - --- ----------- - --- ------------- --- ---- - --- ------- - --- ------ - --- --------- - --- -------- - --- -------- --- ---------- --- ------------ --- --------- --- --------- -- ------------------
node_modules：存放依赖包的文件夹。public：存放静态文件的文件夹，其中index.html是项目的入口文件。src：存放组件和页面等核心代码的文件夹。.gitignore：Git 忽略文件列表。package.json：项目配置文件。README.md：项目 README 文件。yarn.lock或package-lock.json：用于锁定包的版本号，保证不同环境下相同版本的包一致。
开发
在项目目录下，执行如下命令来启动 React 应用：
$ yarn start
或者
$ npm start
执行完毕后，终端中将会显示如下信息：
-- -------------------- ---- ------- -------- ------------- --- --- --- ---- ------ -- --- -------- ------ --------------------- -- ---- -------- ------------------------- ---- ---- --- ----------- ----- -- --- ---------- -- ------ - ---------- ------ --- --- --- ------
访问 http://localhost:3000，将会看到一个简单的 React 应用的页面。之后，我们可以在 src 文件夹下创建我们的 React 组件和页面，修改 src/App.js 中的示例代码，然后实时地查看修改后的效果。
打包
在完成开发后，执行如下命令来打包 React 应用：
$ yarn build
或者
$ npm run build
执行完毕后，将会在 build 文件夹下生成打包后的 React 应用。我们可以将该文件夹部署到服务器上，供用户访问。
总结
本文介绍了如何使用 create-react-app 构建 React 项目。首先安装 create-react-app，然后使用它来创建项目，创建完成后，我们可以在 src 文件夹下开始开发，并在终端中执行 yarn start 命令来实时查看修改后的效果。开发完成后，执行 yarn build 命令来生成打包后的 React 应用，将其部署到服务器上即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66011