在前端开发中，使用 npm 包已经成为了日常工作的一部分。今天我们来介绍一个可以为 React 开发提供快速脚手架的 npm 包：justo.generator.react。
什么是 justo.generator.react
justo.generator.react 是一个基于 Justo CLI 工具的 React 快速脚手架生成器。它可以帮助你快速创建一个符合最佳实践的 React 项目模板，包含常用的目录结构、开发环境配置等。
如何使用 justo.generator.react
在开始使用之前，我们需要先全局安装 Justo CLI 工具：
npm install -g justo-cli
接下来，我们安装 justo.generator.react：
npm install -g justo.generator.react
安装完成后，我们可以在终端输入以下命令来创建 React 项目模板：
justo generator react MyApp
其中，MyApp 是你的项目名称，可以根据实际情况进行修改。
执行完毕后，你会发现在当前目录下生成了一个名为 MyApp 的目录，里面包含了 React 项目的基础文件和目录结构。
项目目录结构
使用 justo.generator.react 创建的 React 项目，包含了以下几个目录：
- config: 存放开发环境和生产环境的配置文件。
- public: 存放公共文件，如 index.html 和网站图标等。
- scripts: 存放编译和打包脚本。
- src: 存放组件和其他 React 相关代码。
其中，src 目录下又包含了以下几个目录：
- assets: 存放静态文件，如图片和字体等。
- common: 存放公用的工具函数和组件等。
- components: 存放具体的 UI 组件。
- containers: 存放页面级别的容器组件。
- store: 存放 Redux 相关文件。
开发环境和生产环境
在开发环境中，我们可以使用以下命令启动 Webpack Dev Server 服务，实现热更新：
npm run dev
在生产环境中，我们可以使用以下命令进行编译，生成最终的打包文件：
npm run build
示例代码
下面是一个简单的组件示例，我们在 src/components 目录下新建一个名为 Hello.js 的文件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- ------- --------------- -
-------- -
------ ---------- ------------------------
-
-
------ ------- ------在 src/containers 目录下新建一个名为 App.js 的文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------------------
----- --- ------- --------------- -
-------- -
------ ------ ------------ ---
-
-
------ ------- ----修改 src/index.js 文件，引入 App 组件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
ReactDOM.render(<App />, document.getElementById('root'));执行以下命令启动开发环境：
npm run dev
打开浏览器，访问 http://localhost:8080，即可看到页面输出 "Hello, world!"。
总结
通过本文的介绍，我们了解了如何使用 npm 包 justo.generator.react 来快速创建一个 React 项目模板，并对项目目录结构、开发环境和生产环境等内容进行了讲解。希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005677981e8991b448e3dff