在隔離中開發組件

通常，在應用程式中，您有很多使用者介面元件，每個元件有許多不同的狀態。例如，基本按鈕元件可能有下列狀態

• 在一般狀態，有文字標籤。
• 在停用模式。
• 在載入狀態。

通常，很難在不執行應用程式範例或一些範例的情況下看到這些狀態。

預設情況下，Create React App 沒有包含任何工具，但您可以新增Stories for React (來源) 或React Styleguidist (來源) 到您的專案。這些是讓您可以在與應用程式隔離的情況下開發元件並查看它們所有狀態的第三方工具。

您也可以將您的故事書或樣式指南部署為靜態應用程式。這樣，您團隊中的每個人都可以檢視和評閱使用者介面元件的不同狀態，而不需啟動後端伺服器或在您的應用程式中建立帳戶。

使用故事書開始

Storybook 是一個 React UI 元件的開發環境。它讓你可以瀏覽一組元件庫，檢視每個元件的不同狀態，以及互動式地開發並測試元件。

在您的應用程式目錄中執行以下指令

npx -p @storybook/cli sb init

然後，依照畫面上說明進行操作。

深入了解 React Storybook

• 學習 Storybook（教學課程）
• 文件說明
• GitHub 儲存庫
• 快照測試 UI搭配 Storybook + addon/storyshot

開始使用 Styleguidist

Styleguidist 結合了樣式指南（在其中所有元件都顯示在單一頁面上，並附有其屬性文件和使用範例）與一個與 Storybook 類似的環境，用於獨立開發元件。在 Styleguidist 中，您會使用 Markdown 編寫範例，在其中每個程式碼片段都會呈現為一個可動態編輯的遊樂場。

首先，安裝 Styleguidist

npm install --save react-styleguidist

另外也可以使用 yarn

yarn add react-styleguidist

然後，將這些指令碼新增至您的 package.json

   "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
     "start": "react-scripts start",

然後，在您的應用程式目錄中執行以下指令碼

npm run styleguide

然後，依照畫面上說明進行操作。

深入了解 React Styleguidist

• GitHub 儲存庫
• 文件說明