用故事书和色素扩展您的React应用程序-js教程-PHP中文网

>本文演示了故事书和色彩简化的反应组件图书馆开发，提供增强的文档，视觉回归测试以及改进的团队协作。

关键好处：>

故事书：启用有效的组件库创建，促进团队合作和从较大的项目体系结构中解耦组件开发。它包括可访问性审核，单位/互动/快照测试，文档生成，轻松发布/托管以及视觉回归测试（VRT）的色度集成等功能。>
彩色：一个故事书伴侣，彩色主动地识别了视觉回归和互动错误，从而阻止了它们达到生产。这也简化了团队的协作。
Web发布：>通过github页面，netlify，aws s3或彩色的平台，很容易地与非技术利益相关者共享您的故事书。>

为什么选择故事书？对于工程师，产品经理和利益相关者来说， Storybook是一项宝贵的资产。它促进了组件图书馆的开发，促进合作并防止建筑瓶颈。它的独立性质允许全面的组件文档和变化管理。关键功能包括：

> Web可访问性审核

单位，交互和快照测试
>用户友好的组件文档
简化的发布和托管
的色度集成

故事书的设置和配置：

>安装：

最有效的方法是在项目的根目录中使用单个命令：>

npx storybook@latest init

登录后复制

> configuration：

Storybook配置，主要通过进行处理，允许自定义文档演示文稿，通过附加组件甚至WebPack配置进行UI扩展。打字稿是本地支持的，但是CSS体系结构需要单独的设置。请咨询样式和CSS文档以获取详细信息。

让我们创建一个示例创建React App：

main.js>验证应用程序（使用

）后，安装故事书：

npx storybook@latest init

登录后复制

确认安装提示。 Storybook将在您的浏览器中启动。将添加到项目中的.storybook>文件夹（包含配置文件）和astories文件夹（src内）。 package.json将包括新脚本：

npx create-react-app my-scalable-component-library

登录后复制

>使用npm run storybook进行开发，npm run build-storybook用于发布。该文件夹包含已发表的故事书。考虑将此文件夹添加到您的storybook-static>。在 .gitignore

键指定故事位置。每个项目类型的main.js键都会有所不同。

键启用自动文档。有关高级选项，请参阅Storybook配置页面。

npx storybook@latest init

登录后复制

stories>故事书附加组件：frameworkdocs

附加组件扩展了故事书功能。它们被归类为基于UI的（修改外观）和基于预设的（集成技术）。集成页面列出可用的附加组件。 Storybook的默认附加组件包括：

：原型的故事链接。

@storybook/addon-links
@storybook/addon-essentials
@storybook/preset-create-react-app
@storybook/addon-onboarding
@storybook/addon-interactions 然后，将其包含在

array中。

"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"

登录后复制

写作和记录组件故事：

main.js> addons一个故事通常代表组件及其变化。它们是动态文件（React，Markdown或两者），接收参数（PROP）以生成变体。

让我们检查一个样本故事：

默认导出定义主组件和设置。参数提供元数据。标签启用自动生成的文档。

定义参数行为。默认值表示命名的导出代表变化，每个变化都与组件prop对齐。

Button装饰师用其他背景包裹故事。它们是在

>参数中定义的。可以合并子组件，但考虑使复杂性呈现。

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  statistics: ["../public"],
};
export default config;

登录后复制

argTypes args

>发布您的故事书：> decorators生产构建（

）在构建文件夹中生成静态文件。托管选项包括GitHub页面，NetLify和AWS S3。 github操作可以自动化部署到github页面。

>为VRT集成色彩：> 通过视觉回归测试，

彩色增强了故事书。创建一个色度帐户，获取一个项目令牌，然后安装色彩包：>

在

npx storybook@latest init

登录后复制

>在文件中设置

>环境变量。运行chromatic将您的故事书发布到色彩。对于CI/CD集成（推荐），请使用GitHub操作（请参阅色彩文档）。 package.json

结论：

npx create-react-app my-scalable-component-library

登录后复制

Storybook和色彩明显提高了代码质量，从而实现了有效的组件图书馆开发，测试和协作。它们可确保有据可查，可扩展和可维护的应用。

以上是用故事书和色素扩展您的React应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！