如果你是一名前端开发者，那么你一定知道 React.js 这个前端框架。而在 React 开发中，我们常常需要使用许多第三方的组件，而 npm 是一个非常常用的包管理工具。
在这篇文章中，我们要介绍一个非常好用的 npm 包，它就是 react-bluekit-custom。
简介
react-bluekit-custom 是一个用于展示 React 组件的工具。 它可以自动生成你的组件结构和属性，并且允许你在编辑器中对其进行修改和传递参数。使用 react-bluekit-custom，你可以更容易地了解和使用你的组件，并且允许你快速地进行组件架构和样式的修改。
安装
要使用 react-bluekit-custom，你需要先安装它。使用 npm 进行安装：
npm install -g react-bluekit-custom
使用指南
创建组件
首先，你需要在你的项目中创建一个组件。 在该组件模块中，您需要导出组件作为默认导出。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- ----------- ------- --------------- -
-------- -
------ -
-----
-----------
------
--
-
-此外，你需要在 package.json 中添加以下字段：
{
"bluekit": {
"basePath": "src/components",
"files": [
"MyComponent.js"
]
}
}这里的 bluekit 是 react-bluekit-custom 的配置项，它指定了组件的 base path 和要扫描的文件。在这个例子中，我们指定了 MyComponent.js 作为文件路径。
启动 react-bluekit-custom
现在，您需要启动 react-bluekit-custom 以展示您的组件。
在你的项目目录中运行：
react-bluekit-custom
它会自动扫描你的项目，并展示你刚刚创建的组件。当然，如果你在添加配置项之前运行该命令，它会相应地提示你。
现在，你可以使用 react-bluekit-custom 来展示你的组件了。
浏览组件
当你在浏览器中打开 react-bluekit-custom，它会列出所有可以展示的组件。 点击 MyComponent，你会看到一个非常漂亮的交互式页面，它显示了你的组件、以及组件的属性和文档。
在右侧的表单中，你可以输入你希望传递给组件的属性。你会看到组件实时更新。
修改组件展示
在 react-bluekit-custom 的页面中，你可以随意修改你的组件属性、样式和结构。 这个工具不仅可以展示组件，还可以用于组件的设计和构建。
例如，以下是 MyComponent 中添加一个 PropTypes 属性并使用它的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ------- ----- ----------- ------- --------------- -
------ --------- - -
-------- ----------------------------
--
-------- -
------ -
-----
--------------------
------
--
-
-然后，你可以在 react-bluekit-custom 中看到能够动态地显示此属性。
导出静态文件
一旦组件类别得到更新并保证完美无误，我们就可以将其导入到一个可以通过 web 浏览器访问的静态文件中。对于单个组件，可以通过使用以下命令来导出组件的静态文件：
react-bluekit-custom --export MyComponent
这将创建一个新的目录 /dist/MyComonent，并在其中生成静态文件。
结语
在这篇文章中，我们介绍了 react-bluekit-custom，这是一个非常好用的 npm 包。 它可以帮助开发者更方便地设计和构建组件，也可以提供一个漂亮、交互式的界面来展示组件。 如果你正在开发 React 组件，不妨试试这个工具，并看看它能否帮助你更好地完成你的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566a081e8991b448e2d8c