在前端开发中，组件化开发已经成为了一种非常流行的设计模式，而 Storybook 是一个可以让我们在组件层面独立地开发、测试和展示组件的一种工具。@storybook/preset-create-react-app 则是在 create-react-app 中使用 Storybook 的配置预设，本文将详细地介绍其使用方法。
准备工作
在使用 @storybook/preset-create-react-app 之前，首先需要保证我们已经安装了 create-react-app，若还未安装，可以通过以下命令进行安装：
npm install -g create-react-app
其次，我们需要在创建项目时选择 typescript：
npx create-react-app my-app --template typescript cd my-app npm run storybook
运行完上述命令后，我们可以在浏览器中访问 http://localhost:6006 查看 Storybook 的默认页面。
安装 @storybook/preset-create-react-app
在使用 @storybook/preset-create-react-app 前，我们需要先进行安装：
npm install @storybook/preset-create-react-app --save-dev
安装完毕后，我们需要在 .storybook/main.js 中进行以下配置：
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app', // 添加此行
],
};其中，@storybook/addon-links 和 @storybook/addon-essentials 是 Storybook 的两个插件，而 @storybook/preset-create-react-app 则是我们新增加的插件，用于将 Storybook 集成到 create-react-app 项目中。
关于 Storybook 配置文件
在使用 @storybook/preset-create-react-app 后，Storybook 会自动把项目中的 .storybook/main.js 当作其配置文件。该文件中包含了所有的配置项，通过修改配置文件，我们可以进行各种自定义设置来满足我们的需求。
示例代码
下面是一个示例代码，它展示了如何在 Storybook 中创建一个基础按钮 Button 的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---- - ---- -------------------
--------- ----------- -
---
- ---------
--
----- -------
---
- ------
--
---------- --------
---
- -----------
--
--------- -- -- -----
-
----- ------- --------------------- - --
-----
-------- - ------
--------
-- -- -
----- ----------- - ------- ------------------------------------ -- -
-- ---------- -
-------
-
------------
--
------ -
-------
-------------------
---------------------
-------- -------- --- ------------- - --
-
------
---------
--
--
------ ------- -
------ ---------
---------- -------
--------- -
-------- - ------- --------- --
--
- -- -----
----- --------- ------------------ - ------ -- ------- --------- ---
------ ----- ------- - ------------------
------------ - -
----- ------ -----
--该代码展示了一个名为 Button 的组件，其包含了三个属性：
text，表示按钮上要显示的文本；disabled，表示按钮是否禁用；onClick，表示按钮的点击事件处理函数。
我们通过 export default 和 export const 两种方式把组件导出，其中，export default 用于定义该组件的配置，比如组件名、事件回调等等。而 export const 用于定义组件的不同状态，比如 Default 表示默认状态下的组件。
总结
本文简单地介绍了 @storybook/preset-create-react-app 的使用方法，希望大家可以尝试使用 Storybook 独立地开发、测试和展示组件。在实际项目中，我们可以通过自定义配置来满足项目的需求，同时也可以通过 Action Logger 等工具来方便地进行调试和错误分析。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f32a58fdbf7be33b2566db1