前言
随着前端框架的不断更新和发展，React 16 可谓是当前前端开发中最火热的技术之一。为了帮助开发者更加轻松地构建 React 16 项目，我们推荐使用 npm 包 generator-react-16-boilerplate，它提供了一整套 React 16 开发环境及脚手架。
在本教程中，我们将会涵盖 generator-react-16-boilerplate 的整个使用流程，从环境配置、项目初始化到开发调试与部署。
环境配置
在开始使用 generator-react-16-boilerplate 之前，你需要先确保电脑中已经安装了以下软件：
- Node.js 和 npm（安装过程可以参考官方文档）
- Yeoman（使用 npm 安装即可，命令行执行
npm install -g yo）
目前 generator-react-16-boilerplate 支持的 Node.js 版本为 6.x、8.x 和 10.x。
安装 generator-react-16-boilerplate
安装 generator-react-16-boilerplate 非常简单，只需要在命令行中执行以下命令即可：
npm install -g generator-react-16-boilerplate
初始化项目
安装好 generator-react-16-boilerplate 之后，我们就可以使用它来初始化 React 16 项目了。
在命令行中，进入你想要创建项目的目录，然后执行以下命令：
yo react-16-boilerplate
在执行该命令后，你需要回答一些问题。比如，你的项目叫什么名字（项目名必须为小写字母、中划线和数字的组合）、你要安装什么样的 linting 工具、是否安装 redux 等等。
通常来说，你可以选择默认设置，因为 generator-react-16-boilerplate 已经默认配置了一些最佳实践，并且你也可以通过选项进一步定制你的 React 项目。
在回答完所有的问题后，generator-react-16-boilerplate 将会根据你的回答自动创建一个新的 React 项目，并安装其中的依赖项。
开发与调试
初始化项目之后，我们就可以利用提供的 npm 脚本来启动本地的开发服务器了。
在命令行中执行以下命令：
npm start
这将会启动一个本地开发服务器，你可以通过访问 http://localhost:3000 来访问你的 React 应用程序。如果你想更改端口号，可以修改 package.json 文件中的 start 脚本：
"start": "webpack-dev-server --open --port=3000"
在开发过程中，generator-react-16-boilerplate 还提供了一些非常好用的命令。比如，你可以使用以下命令来运行 linter：
npm run lint
或者，你可以使用以下命令来进行单元测试：
npm test
特别是对于前端开发流程不太熟悉的初学者，这些命令可以帮助他们更加自信地开发和测试 React 应用程序。
构建与部署
完成了开发之后，我们需要将 React 应用程序构建为生产环境所需的静态文件。 generator-react-16-boilerplate 已经为我们提供了一个非常简单的命令，只需要在命令行中执行以下命令：
npm run build
这将会完成整个构建过程，包括 webpack 打包、代码压缩、文件合并等等。最终，你会得到一个 dist 目录，里面包含了你的 React 应用程序的所有静态文件。
完成了构建之后，我们可以将这些静态文件部署到任何一个支持静态文件托管的服务器上。比如，你可以轻松地将它们部署到 GitHub Pages 上，只需要执行以下命令：
npm run deploy
以上命令将自动将你的静态文件上传到 GitHub Pages。
结语
generator-react-16-boilerplate 是一个非常简单、易用同时功能非常强大的 React 16 脚手架。在这篇文章中，我们介绍了它的基本用法、开发调试以及部署流程。通过学习可以发现，使用 generator-react-16-boilerplate 非常容易构建出一个高质量的 React 16 项目，无论你是初学者还是有经验的开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664f81e8991b448e271b