StorybookとChromaticでReactアプリをスケーリングします

この記事では、ストーリーブックとクロマティックの合理的な反応コンポーネントライブラリ開発がどのように反応し、ドキュメントの強化、視覚回帰テスト、および改善されたチームコラボレーションを提供する方法を示しています。

主要な利点：

• ストーリーブック：効率的なコンポーネントライブラリの作成、より大きなプロジェクトアーキテクチャのチームワークの育成、デカップリングコンポーネントの開発を有効にします。 アクセシビリティ監査、ユニット/インタラクション/スナップショットテスト、ドキュメンテーション生成、簡単な公開/ホスティング、視覚回帰テストのためのクロマティック統合などの機能が含まれています。
CHROMATIC：
• Storybook Companion、Chromaticは視覚的回帰と相互作用のバグを積極的に識別し、生産に到達するのを防ぎます。また、チームのコラボレーションも簡素化されます Web Publishing：
• なぜストーリーブックを選ぶのか？ ストーリーブックは、エンジニア、プロダクトマネージャー、および利害関係者にとって貴重な資産です。コンポーネントライブラリ開発を促進し、コラボレーションを促進し、建築のボトルネックを防止します。 そのスタンドアロンの性質により、包括的なコンポーネントドキュメントとバリエーション管理が可能になります。 主な機能には次のものがあります

Webアクセシビリティ監査

ユニット、インタラクション、およびスナップショットテスト

ユーザーフレンドリーなコンポーネントドキュメント

簡略化された公開とホスティング

VRT
• のクロマティック統合
このガイドは、Create React Appプロジェクト、アドオンインストール、ストーリー作成、自動ドキュメンテーション生成、およびWeb展開内のストーリーブックのセットアップと構成をカバーしています。
• ストーリーブックのセットアップと構成：
• インストール：

最も効率的な方法は、プロジェクトのルートディレクトリ内で単一のコマンドを使用することです。

ストーリーブックは、プロジェクトの依存関係をインテリジェントに検出し、インストールプロセスを最適化します。 互換性情報については、StoryBook Frameworksページを参照してください。 潜在的な依存関係の競合により、手動のインストールは落胆します

構成：

ストーリーブックの構成は、主にで処理され、ドキュメントプレゼンテーション、アドオンを介したUI拡張機能、さらにはWebpack構成のカスタマイズを可能にします。 タイプスクリプトはネイティブにサポートされていますが、CSSアーキテクチャには個別のセットアップが必要です。詳細については、スタイリングとCSSのドキュメントを参照してください サンプルを作成しましょう

アプリを確認した後（

を使用して）、ストーリーブック：

<code class="language-bash">npx storybook@latest init</code>

をインストールします

<code class="language-bash">npx storybook@latest init</code>

インストールプロンプトを確認します。 ストーリーブックはブラウザで起動します。 .storybookフォルダー（構成ファイルを含む）とstoriesフォルダー（src内）がプロジェクトに追加されます。 package.json新しいスクリプトが含まれます：

<code class="language-bash">npx create-react-app my-scalable-component-library</code>

開発にはnpm run storybook、公開にはnpm run build-storybookを使用します。 storybook-staticフォルダーには、公開されているストーリーブックが含まれています。このフォルダーを.gitignore。

に追加することを検討してください

main.jsファイル（以下に示す例）は、さまざまな側面を制御します

<code class="language-bash">npx storybook@latest init</code>

キーはストーリーの場所を指定します。 storiesキーは、プロジェクトの種類ごとに異なります。 frameworkキーは自動ドキュメントを有効にします。 高度なオプションについては、ストーリーブックの構成ページを参照してください docs

ストーリーブックアドオン：

アドオンは、ストーリーブック機能を拡張します。 それらは、UIベース（外観の変更）およびプリセットベース（統合テクノロジー）に分類されます。 統合ページには、利用可能なアドオンがリストされています。 Storybookのデフォルトアドオンには、次のものが含まれます

：プロトタイピングのためのストーリーリンク

• @storybook/addon-links：本質的なアドオンのコレクション。
• @storybook/addon-essentials：CRAの統合を強化します。
• @storybook/preset-create-react-app：ガイド付きツアーを提供します
• ：相互作用テストを促進します @storybook/addon-onboarding アクセシビリティアドオンを追加するには、
：
• @storybook/addon-interactions
次に、

's

arrayに含めます。

<code class="language-json">"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"</code>

コンポーネントストーリーの作成と文書化：main.js addons

ストーリーは通常、コンポーネントとそのバリエーションを表します。 それらは動的ファイル（React、Markdown、またはその両方）であり、バリエーションを生成するためのパラメーター（プロップ）を受信します。

サンプルを調べてみましょうストーリー：

デフォルトのエクスポートは、メインコンポーネントと設定を定義します。 パラメーターはメタデータを提供します。タグを有効にして、自動生成ドキュメントを有効にします。

引数の動作を定義します。 デフォルトの後に名前付きエクスポートはバリエーションを表し、それぞれがコンポーネントの小道具に合わせて

を調整します。 Buttonデコレーターは、ストーリーを追加のコンテキストで包みます。 それらは

パラメーターで定義されています。 サブコンポーネントは組み込むことができますが、複雑さをレンダリングすることを検討してください

<code class="language-javascript">/** @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;</code>

argTypes args

あなたのストーリーブックの公開：

decorators

プロダクションビルド（

）は、ビルドフォルダーに静的ファイルを生成します。 ホスティングオプションには、GitHubページ、Netlify、AWS S3が含まれます。 GitHubアクションは、展開をGitHubページに自動化できますVRTのクロマティックの統合：

Chromaticは、視覚回帰テストでストーリーブックを強化します。 クロマティックアカウントを作成し、プロジェクトトークンを取得し、クロマティックパッケージをインストールします。

a

スクリプトを

<code class="language-bash">npx storybook@latest init</code>

：

に追加します chromatic package.json

環境変数を

<code class="language-bash">npx create-react-app my-scalable-component-library</code>

ファイルに設定します。 Running

は、クロマティックにストーリーブックを公開します。 CI/CD統合（推奨）については、GitHubアクションを使用します（Chromatic Documentationを参照）。 CHROMATIC_PROJECT_TOKEN.env結論：npm run chromatic

ストーリーブックとクロマティックは、コードの品質を大幅に向上させ、効率的なコンポーネントライブラリ開発、テスト、およびコラボレーションを可能にします。 十分に文書化され、スケーラブルで保守可能なアプリケーションを確保します

以上がStorybookとChromaticでReactアプリをスケーリングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。