用故事書和色素擴展您的React應用程序

>本文演示了故事書和色彩簡化的反應組件圖書館開發，提供增強的文檔，視覺回歸測試以及改進的團隊協作。

關鍵好處：>

• 故事書：啟用有效的組件庫創建，促進團隊合作和從較大的項目體系結構中解耦組件開發。 它包括可訪問性審核，單位/互動/快照測試，文檔生成，輕鬆發布/託管以及視覺回歸測試（VRT）的色度集成等功能。 >
>
• 彩色：一個故事書伴侶，彩色主動地識別了視覺回歸和互動錯誤，從而阻止了它們達到生產。這也簡化了團隊的協作。
• Web發布：>通過github頁面，netlify，aws s3或彩色的平台，很容易地與非技術利益相關者共享您的故事書。 >

為什麼選擇故事書？ 對於工程師，產品經理和利益相關者來說， Storybook是一項寶貴的資產。它促進了組件圖書館的開發，促進合作並防止建築瓶頸。 它的獨立性質允許全面的組件文檔和變化管理。 關鍵功能包括：

> Web可訪問性審核

• 單位，交互和快照測試
• >用戶友好的組件文檔
• 簡化的發布和託管
VRT
• 的色度集成
>
本指南涵蓋了創建React應用程序，附加安裝，故事創建，自動化文檔生成和Web部署中的故事書設置和配置。

>

故事書的設置和配置：

>

>安裝：

最有效的方法是在項目的根目錄中使用單個命令：>

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

> configuration：

Storybook配置，主要通過進行處理，允許自定義文檔演示文稿，通​​過附加組件甚至WebPack配置進行UI擴展。 打字稿是本地支持的，但是CSS體系結構需要單獨的設置。請諮詢樣式和CSS文檔以獲取詳細信息。

讓我們創建一個示例創建React App：

main.js>驗證應用程序（使用

）後，安裝故事書：

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

確認安裝提示。 Storybook將在您的瀏覽器中啟動。 將添加到項目中的.storybook>文件夾（包含配置文件）和astories文件夾（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鍵都會有所不同。

鍵啟用自動文檔。 有關高級選項，請參閱Storybook配置頁面。

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

stories>故事書附加組件：frameworkdocs

附加組件擴展了故事書功能。 它們被歸類為基於UI的（修改外觀）和基於預設的（集成技術）。 集成頁面列出可用的附加組件。 Storybook的默認附加組件包括：

：原型的故事鏈接。

：基本附加組的集合。
• @storybook/addon-links
：增強CRA集成。
• @storybook/addon-essentials
：提供帶導遊的旅行。
• @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或兩者），接收參數（PROP）以生成變體。

讓我們檢查一個樣本故事：

默認導出定義主組件和設置。 參數提供元數據。標籤啟用自動生成的文檔。

定義參數行為。 默認值表示命名的導出代表變化，每個變化都與組件prop對齊。

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集成色彩：> 通過視覺回歸測試，

彩色增強了故事書。 創建一個色度帳戶，獲取一個項目令牌，然後安裝色彩包：>

在

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

>在文件中設置

>環境變量。 運行chromatic將您的故事書發佈到色彩。 對於CI/CD集成（推薦），請使用GitHub操作（請參閱色彩文檔）。 package.json

結論：

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

Storybook和色彩明顯提高了代碼質量，從而實現了有效的組件圖書館開發，測試和協作。 它們可確保有據可查，可擴展和可維護的應用。

>

以上是用故事書和色素擴展您的React應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！