在前端开发中，快速搭建一个 React 项目是非常常见的需求。这时我们可以使用 generator-react-demo 这个 npm 包来快速创建一个 React 项目的脚手架。
安装 generator-react-demo
在使用 generator-react-demo 之前，需要先安装 yeoman，如果已经安装可以跳过此步骤。在终端中输入以下命令进行安装：
npm install -g yo
然后，可以输入以下命令安装 generator-react-demo：
npm install -g generator-react-demo
安装完成后，我们就可以使用它来创建 React 项目的脚手架。
创建 React 项目
在终端中输入以下命令来创建一个 React 项目：
yo react-demo
执行该命令后，会出现一个交互式界面来询问项目的一些基本信息，包括项目名称、项目描述、作者等。填写完成后，会自动生成一个 React 项目的脚手架。
项目结构介绍
创建 React 项目后，项目的文件结构如下：
-- -------------------- ---- -------
-
--- --------
--- -------------
--- ------------
--- ----------
--- -----------------
--- ---------
--- ------
- --- ------
- --- ----
- --- --------
- --- -----------------
- --- --------------------------
--- ------------
--- ------
- --- -----------
- --- ----------
- --- -------------
- --- ----------
--- ---
--- ------
--- -----------
--- --------
--- --------
--- ----------------其中，src 目录是存放项目的主要代码的目录。
运行项目
在项目根目录中，输入以下命令来启动项目：
npm start
执行成功后，会在终端中显示启动的端口号和访问地址。打开浏览器访问该地址，就可以看到项目已经成功运行。
构建项目
当项目完成后，可以输入以下命令进行构建：
npm run build
执行成功后，会在项目根目录下生成一个 build 目录，里面包含了构建后的项目代码。
添加路由
在 React 项目中，路由是非常重要的一个概念。使用 generator-react-demo 创建的脚手架已经内置了路由，只需要在 src/App.js 文件中添加子路由即可。
以添加一个“/about”子路由为例，可以在 src/App.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
-------- ----- -
------ -
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
---------
--
-
------ ------- ----然后，在 src/pages 目录下新建一个 About.js 文件，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------- -
------ -
-----
--------------
------- -- --- ----- ---------
------
--
-
------ ------- ------这样，访问“/about”路径时就会显示 About 组件中的内容。
总结
使用 generator-react-demo 可以快速搭建一个 React 项目的脚手架，让我们可以更快速、更高效地开发 React 项目。同时，也需要了解 React 的基本知识和开发流程，以更好地使用该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc3d2