什么是 generator-react-component-boilerplate？
generator-react-component-boilerplate 是一个 npm 包，它可以生成一个基础的 React 组件，包含了组件文件、单元测试、storybook 页面和文档等，方便我们快速开发一个 React 组件。
安装 generator-react-component-boilerplate
首先，我们需要安装 Yeoman 工具，它是一个脚手架工具，可以快速生成项目模板。在终端中输入以下命令进行安装：
npm install -g yo
接下来，我们安装 generator-react-component-boilerplate，输入以下命令：
npm install -g generator-react-component-boilerplate
使用 generator-react-component-boilerplate
在终端中输入以下命令：
yo react-component-boilerplate
然后按照提示输入组件名称和描述等信息。
在生成完成后，我们可以看到生成的文件结构：
-- -------------------- ---- -------
----
-----------
-----------------
--------------------
---------------------
--------
--------
----------------------------
-----
------------------------
---------其中，
/src/components目录包含了组件的代码和样式。/stories目录包含了 storybook 页面，用于展示组件的不同状态。/test目录包含了单元测试代码。
运行项目
运行以下命令，启动 storybook 页面：
npm start
访问 http://localhost:6006，可以看到生成的组件及其不同状态的展示页面。
单元测试
在 /test 目录下，我们可以编写单元测试代码。运行以下命令，执行单元测试：
npm test
编写文档
在 /src/components/[component_name] 目录下，我们可以编写 Markdown 格式的文档。在 storybook 页面的右侧可以看到生成的文档。
总结
使用 generator-react-component-boilerplate，我们可以快速生成一个基础的 React 组件，并方便地进行开发、测试和部署。同时，我们也可以通过修改生成的文件来自定义组件的代码结构和样式。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------------
----- --------------- - -- --------- -- -- -
------ -
---- ---------------------------- ---------------
----------------
------
--
--
------ ------- ----------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c0f81e8991b448e5b86