使用 Storybook 和 Chromatic 扩展您的 React 应用程序

kazi01

本文介绍了如何集成 Storybook 和 Chromatic 来扩展 React 应用程序的组件库，并从清晰的文档、可视化回归测试和团队效率中受益。 Pause Next Unmute Current Time 0:13 / Duration 2:00 Fullscreen 目录 为什么要使用故事书？ Storybook对于工程师、产品所有者和利益相关者来说是一个非常宝贵的工具。Storybook 允许前端工程团队构建组件库，以促进协作并防止组件的开发被更重要的项目架构决策所阻碍。 它在更广泛的项目中充当独立应用程序，可以记录组件及其变体。Storybook 包含大量功能，可以根据您的喜好进行自定义和配置。以下是我在日常项目中使用的一些功能： 网络可访问性审核 单元、交互和快照测试 为工程师和利益相关者记录组件功能 轻松发布和托管 与 Chromatic 集成进行视觉回归测试 文探讨了在示例Create React App项目中安装和配置 Storybook、安装附加组件、编写故事、生成自动化文档以及将 Storybook 发布到 Web。


设置和配置 Storybook 我们先来看看安装。 安装故事书 Storybook 的开发是为了适应多种不同的项目类型。开始使用 Storybook 的最有效方法是将其安装到预先存在的应用程序中，并在项目的根目录下运行一个简单的命令： npx storybook@latest init 上面的命令将查看您的项目依赖项并 行业电邮清单 确定安装 Storybook 的最合适方法。 如果您需要帮助确定您的项目是否支持 Storybook，请通读文档中的框架页面。 注意：您可以手动安装 Storybook，但这通常会导致错误和依赖关系管理不善，从而导致问题。 配置故事书 Learn to Code with JavaScript Storybook 更复杂的方面之一是将其配置为与应用程序中存在的技术保持一致。需要进一步定制以确保 Storybook 的行为方式与应用程序的技术堆栈保持一致。 配置 Storybook 主要是通过main.js文件完成的。



您可以在此处指定所有内容 - 从文档的呈现方式到使用附加组件扩展 Storybook 的 UI。您甚至可以扩展 Webpack。 Storybook 开箱即用地支持 TypeScript，但您必须设置 CSS 架构。支持多种 CSS 样式。您可以在样式和 CSS 文档中找到更多信息。 让我们启动一个 Create React App 实例： npx create-react-app my-scalable-component-library 上面的命令将引导一个基本的 React 应用程序。在本文中，我们将使用Create React App ，但也支持其他框架。让我们通过运行来确保您的应用程序正常工作npm run start。您应该看到类似于下图的内容。 Create React Apps 初始屏幕的屏幕截图 接下来让我们安装 Storybook。在应用程序的根目录中运行以下行： npx storybook@latest init 该脚本会进行一些思考，然后提示您确认一些细节。