简介
storybook-react-tongchuan 是一个 npm 包，旨在帮助前端开发者更加轻松地开发交互丰富的 React 组件。它基于 storybook 和 react-testing-library，可以快速搭建本地的组件展示及测试环境。
安装
在使用 storybook-react-tongchuan 之前，需要先安装 Node.js 和 npm。然后，可以在项目中安装 storybook-react-tongchuan，输入以下命令：
npm install --save-dev storybook-react-tongchuan
使用步骤
步骤一：创建配置文件
在项目根目录下创建配置文件 main.js，输入以下代码：
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: ['@storybook/preset-create-react-app'],
};这里我们指定了要展示的 story 文件的路径，以及使用的插件 preset-create-react-app。
步骤二：创建 story 文件
在项目中创建一个名为 Button.stories.js 的 story 文件，这个文件可以放在任何地方，只要在配置文件中指定了路径即可。输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
------ ------- -
------ ---------
---------- -------
--
------ ----- ---- - -- -- -------------- -------------------
------ ----- ----- - -- -- -
--------
----- ---------- -------------- ------
-- -- -- --
-------
---------
--这个文件中定义了一个叫做 Button 的 story，它包含两个 storybook 集合: Text 和 Emoji。
步骤三：启动 storybook
在命令行中输入以下命令：
npx start-storybook -p 6006
在浏览器中打开 http://localhost:6006，就可以看到 Button 的两个 story 被成功展示了。
示例代码
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ ----- ------ - -- -------- -- -- ----------------------------
-- -----------------
------ ----- ---- --------
------ - ------ - ---- -----------
------ ------- -
------ ---------
---------- -------
--
------ ----- ---- - -- -- -------------- -------------------
------ ----- ----- - -- -- -
--------
----- ---------- -------------- ------
-- -- -- --
-------
---------
--
-- -------
-------------- - -
-------- ---------------------------
------- ---------------------------------------
--总结
使用 storybook-react-tongchuan 可以很方便地搭建本地的组件展示及测试环境，真正做到一次编写，多端展示。同时 storybook-react-tongchuan 还支持插件扩展，可以自定义添加插件，让它变得更加强大和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005899581e8991b448ed34f