简介
generator-simple-reactapp-gulp 是一个用于快速生成 React 应用的 Yeoman 生成器。它基于 generator-simple-gulp-browserify 扩展而来，增加了对 React.js 的支持。使用 generator-simple-reactapp-gulp 可以轻松地搭建基于 React 的 Web 应用开发环境，并且可以按照自己的需求进行配置。
安装
在使用 generator-simple-reactapp-gulp 之前，你需要先安装 Yeoman。
$ npm install -g yo
然后，你就可以通过 npm 安装 generator-simple-reactapp-gulp 了。
$ npm install -g generator-simple-reactapp-gulp
使用
安装完成之后，就可以使用 generator-simple-reactapp-gulp 生成 React 应用了。
$ yo simple-reactapp-gulp
之后，你需要按照提示进行操作。为了让你可以更好地了解如何使用 generator-simple-reactapp-gulp，下面将详细地介绍每个选项的含义。
Project name
这个选项用于指定 React 应用的名称。它将被用于生成一个最终的文件夹，其中包含整个应用的代码。
Use Redux
如果你想要使用 Redux 管理应用的状态，就需要设置这个选项为 Yes。
如果你不熟悉 Redux，可以先学习 Redux 官方文档。
Use Router
如果你想要使用 React Router 4 管理应用的路由，就需要设置这个选项为 Yes。
如果你不熟悉 React Router，可以先学习 React Router 官方文档。
Unit test with Jest
如果你选择使用 Jest 进行单元测试，就需要设置这个选项为 Yes。
如果你不熟悉 Jest，可以先学习 Jest 官方文档。
Style with SASS
如果你想要使用 SASS 样式预处理器，就需要设置这个选项为 Yes。
如果你不熟悉 SASS，可以先学习 SASS 官方文档。
Use ESLint
如果你想要使用 ESLint 进行代码检查，就需要设置这个选项为 Yes。
如果你不熟悉 ESLint，可以先学习 ESLint 官方文档。
Use Prettier
如果你想要使用 Prettier 进行代码格式化，就需要设置这个选项为 Yes。
如果你不熟悉 Prettier，可以先学习 Prettier 官方文档。
Package manager
你可以指定使用哪种包管理器，在生成应用的时候会自动安装需要的依赖。可以选择 npm 或者 yarn。如果你不知道哪种包管理器更适合你的项目，可以参考 npm vs Yarn。
Generate
配置完成之后，就可以生成 React 应用了。在生成之前，你需要确认一下你的配置是否正确。
After Generating
React 应用生成完成之后，你需要进行一些操作才能启动应用。一些提示信息会告诉你应该如何执行这些操作。
示例代码
生成器生成的 React 应用代码非常简洁，下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ ------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
--- ----------------------------- -- ----------
---------
-- ----------------------
-- --- -------- ---- ----------------------- --- ---- -- -------
----
------
--
-
-
------ ------- ----这个组件可以在浏览器中渲染出一个包含 React 官方 logo 的页面，并且提供了一些指导信息。你可以根据自己的需要进行修改和扩展。
结束语
使用 Yeoman 和 generator-simple-reactapp-gulp，我们可以快速地搭建一个基于 React，并且支持常用工具和插件的应用开发环境。这样，我们就可以更加专注于应用的开发，而不是配置开发环境上。希望这篇文章可以帮助到你！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b181e8991b448def44