简介
generator-ptz-react 是一个基于 Yeoman 构建的前端脚手架工具，用于快速搭建 React 项目，尤其适合初学者或者快速原型开发。
该工具提供了一些常用的功能，如自动生成项目目录结构、集成前端构建工具、基础 React 组件等。同时也可以自定义创建一个 React 组件。
安装
使用 npm 安装 generator-ptz-react：
npm install -g yo generator-ptz-react
使用
在命令行输入 yo ptz-react，即可开始创建一个 React 项目：
yo ptz-react
然后，你需要输入一些基本信息，包括项目名称、作者、描述等。完成后，你会得到一个初始的 React 项目目录结构。
目录结构
-- -------------------- ---- ------- - --- ------ - ------ - --- ---------------------- - ------- ---- - --- --------------------- - ------- ------ - --- ---------------------- - ------- ------ --- ---- - ----- - --- ----------- - ------ - --- ------ - ------ - --- ------- - ------ - --- ---------- - -- ---- -- - --- --------- - -- -- -- - --- ---------- - -- ---- -- --- -------- - ----- ---- --- --------- - ------ ---- --- ---------- - --- ---- --- ------------ - ------ --- --------- - ------
npm Scripts
生成的项目默认提供了以下 npm scripts：
"start": "cross-env NODE_ENV=development webpack-dev-server --open", "build": "cross-env NODE_ENV=production webpack -p --progress --hide-modules", "lint": "node node_modules/eslint/bin/eslint src/ --fix"
start: 启动开发服务器build: 构建生产版本lint: 检查代码风格，自动修复问题
创建组件
执行以下命令创建一个 React 组件：
yo ptz-react:component
然后按照提示输入组件名称和所在目录，即可创建一个基础的 React 组件。
示例代码
创建一个名为 HelloWorld 的组件，位置在 src/components 目录下：
yo ptz-react:component HelloWorld src/components
这时，你会得到以下文件：
. ├── src/ │ ├── components/ │ │ ├── HelloWorld/ │ │ │ ├── index.jsx │ │ │ └── index.less
其中，index.jsx 是组件的 JS 部分，index.less 是组件的样式。
我们可以将 HelloWorld 组件改为以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------
------ ------- -------- ----------------- -
------ -
---- ------------------------
---------------------
------
--
-在 index.less 中，我们定义了 hello-world 的样式：
.hello-world {
background-color: #eee;
padding: 20px;
}然后，在父组件中引入并使用 HelloWorld：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------------
------ ------- -------- ----- -
------ -
-----
----------- ------------ ------- --
------
--
-现在，我们就可以看到 HelloWorld 组件的效果了。
结语
generator-ptz-react 为我们提供了一个快速搭建 React 项目的方式，并且可以自定义组件，大大提高了开发效率。同时，也让我们更好地理解 React 的基本原理，尤其适合初学者学习 React。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bdf81e8991b448d988f