React Storybook：輕鬆開髮美麗的用戶界面

前端項目伊始，通常先設計精美界面。您會精心規劃和繪製所有UI組件及其各種狀態和效果。然而，開發過程中，情況往往會發生變化。新的需求和不可預見的用例層出不窮。最初精美的組件庫無法涵蓋所有這些需求，您需要不斷添加新的設計。

如果此時您身邊還有設計專家，固然很好，但他們往往已經轉投其他項目，留下開發者獨自應對這些變化。結果，設計的一致性開始下降。難以追踪組件庫中已有的組件及其狀態和外觀。

為避免這種設計混亂，通常最好為所有組件創建單獨的文檔。雖然有多種工具可用於此目的，但本文將重點介紹一款專為React應用程序設計的工具——React Storybook。它允許您輕鬆瀏覽組件集合及其功能。 React Native組件庫就是一個此類應用程序的實例。

關鍵要點

• 簡化UI開發： React Storybook簡化了UI組件的開發和管理流程，允許開發者獨立構建組件並實時可視化其行為。
• 增強協作： 它作為一個協作平台，通過提供一個查看和交互所有UI組件的單一位置，彌合了設計師、開發者和其他利益相關者之間的差距。
• 可定制和可擴展： 通過附加組件和配置設置提供廣泛的定制選項，使開發者能夠根據其特定項目需求定制工具。
• 支持自動化測試： 與Jest等測試框架集成，方便在UI組件開發環境中直接進行自動化測試。
• 用途廣泛且可擴展： 適用於小型和大型項目，並支持React以外的其他JavaScript框架，使其成為各種開發團隊的多功能選擇。

為什麼需要React Storybook？

那麼，這個展示如何提供幫助呢？為了回答這個問題，讓我們嘗試列出參與UI組件開發的人員，並評估他們的需求。根據您的工作流程，此列表可能有所不同，但通常包括以下人員：

設計師或UX專家

負責用戶界面的外觀和感覺。項目原型設計階段完成後，設計師通常會離開團隊。當出現新需求時，他們需要快速了解UI的當前狀態。

開發者

開發者是創建這些組件的人，可能是樣式指南的主要受益者。開發者有兩個主要用例：能夠從庫中找到合適的組件，並在開發過程中對其進行測試。

測試人員

測試人員會仔細檢查組件是否按預期實現。測試人員的一項主要工作是確保組件在各個方面都能正確運行。雖然這並不能消除集成測試的必要性，但這通常比在項目本身中單獨進行更方便。

產品負責人

接受設計和實現的人員。產品負責人需要確保項目的每個部分都符合預期，並且品牌風格保持一致。

您可能已經註意到，所有相關人員的共同點是擁有一個包含所有組件的單一位置。在項目本身中查找所有組件可能會非常繁瑣。想想看，找到項目中所有可能的按鈕變體（包括其狀態（禁用、主要、次要等））需要多長時間？因此，擁有一個單獨的庫會方便得多。

如果我已經說服您，讓我們看看如何在項目中設置Storybook。

設置React Storybook

要設置React Storybook，首先需要一個React項目。如果您目前沒有合適的項目，可以使用create-react-app輕鬆創建一個。

要生成Storybook，請全局安裝getstorybook：

<code>npm i -g getstorybook</code>

然後導航到您的項目並運行：

<code>getstorybook</code>

此命令將執行以下三項操作：

• 將@kadira/storybook安裝到您的項目中。
• 將storybook和build-storybook腳本添加到您的package.json文件中。
• 創建一個.storybook文件夾，其中包含基本配置和一個包含示例組件和故事的stories文件夾。

要運行Storybook，請執行npm run storybook並打開顯示的地址（https://www.php.cn/link/93e4d7106625e1b0f2eb8af065c83452：

添加新內容

現在我們已經運行了React Storybook，讓我們看看如何添加新內容。每個新頁面都是通過創建故事來添加的。這些是呈現組件的代碼片段。 getstorybook生成的示例故事如下所示：

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

storiesOf函數在導航菜單中創建一個新部分，add方法創建一個新子部分。您可以隨意組織Storybook，但不能創建超過兩級的層次結構。組織Storybook的一種直接方法是為相關元素組創建常見的頂級部分，例如“表單輸入”、“導航”或“小部件”，以及各個組件的子部分。

您可以自由選擇放置故事文件的位置：在單獨的stories文件夾中或組件旁邊。我個人更喜歡後者，因為將故事與組件放在一起有助於保持它們的易訪問性和最新性。

故事在.storybook/config.js文件中加載，該文件包含以下代碼：

<code>npm i -g getstorybook</code>

默認情況下，它加載src/stories/index.js文件，並期望您在那裡導入您的故事。這有點不方便，因為它需要我們導入我們創建的每個新故事。我們可以修改此腳本以使用Webpack的require.context方法自動加載所有故事。為了區分故事文件與其餘代碼，我們可以約定為它們添加.stories.js擴展名。修改後的腳本應如下所示：

<code>getstorybook</code>

如果您使用不同的文件夾作為源代碼，請確保將其指向正確的位置。重新運行Storybook以使更改生效。 Storybook將為空，因為它不再導入index.js文件，但我們很快就會解決這個問題。

(以下內容與原文基本一致，略作調整，保持語義不變，並精簡部分描述)

編寫新的故事

現在我們已經稍微調整了Storybook以滿足我們的需求，讓我們編寫我們的第一個故事。但首先我們需要創建一個組件來展示。讓我們創建一個簡單的Name組件，在一個彩色塊中顯示名稱。該組件將具有以下JavaScript和CSS。

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

您可能已經註意到，這個簡單的組件可以有三種狀態：默認、突出顯示和禁用。可視化所有這些狀態豈不是很好？讓我們為此編寫一個故事。在您的組件旁邊創建一個新的Name.stories.js文件，並添加以下內容：

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(() => {
    const req = require.context('../src', true, /.stories\.js$/);
    req.keys().forEach(filename => req(filename));
  },
  module
);

打開Storybook並查看您的新組件。結果應如下所示：

隨意嘗試更改組件的顯示方式及其源代碼。請注意，由於React的熱重載功能，每當您編輯故事或組件時，更改都會立即出現在您的Storybook中，無需手動刷新瀏覽器。但是，當您添加或刪除文件時，可能需要刷新。 Storybook並不總是注意到這些更改。

(以下內容同樣精簡併調整，保持語義一致)

視圖自定義

如果您想更改故事的顯示方式，可以使用容器將其包裝起來。這可以使用addDecorator函數來完成。例如，您可以為所有頁面添加“示例”標題，方法是將以下代碼添加到.storybook/config.js：

import React from 'react';
import './Name.css';

const Name = (props) => (
  <div className={`name ${props.type}`}> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;

您也可以通過在storiesOf之後調用addDecorator來自定義單獨的部分。

發布您的Storybook

完成Storybook的工作並認為它已準備好發布後，您可以將其構建為靜態網站，方法是運行：

.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

默認情況下，Storybook構建到storybook-static文件夾中。您可以使用-o參數更改輸出目錄。現在您只需要將其上傳到您喜歡的託管平台即可。

如果您正在GitHub上處理項目，您可以通過將其構建到docs文件夾並將它推送到存儲庫來發布您的Storybook。可以將GitHub配置為從那裡提供您的GitHub Pages網站。如果您不想將構建的Storybook保存在存儲庫中，也可以使用storybook-deployer。

構建配置

Storybook配置為支持故事中的許多功能。您可以使用與create-react-app相同的ES2015 語法編寫，但是，如果您的項目使用不同的Babel配置，它將自動拾取您的.babelrc文件。您還可以導入JSON文件和圖像。

如果您覺得這還不夠，您可以通過在.storybook文件夾中創建一個webpack.config.js文件來添加額外的webpack配置。此文件導出的配置選項將與默認配置合併。例如，要在您的故事中添加對SCSS的支持，只需添加以下代碼：

<code>npm i -g getstorybook</code>

不要忘記安裝sass-loader和node-sass。

您可以添加任何所需的webpack配置，但是，您不能覆蓋入口、輸出和第一個Babel加載器。

如果您想為開發和生產環境添加不同的配置，您可以導出一個函數。它將使用基本配置和設置為“DEVELOPMENT”或“PRODUCTION”的configType變量來調用。

使用附加組件擴展功能

Storybook本身非常有用，但為了使其更好，它還有一些附加組件。在本文中，我們只介紹其中一些，但請務必稍後查看官方列表。

(以下部分精簡，並對addon的介紹方式進行調整)

Storybook自帶兩個預配置的附加組件：Actions和Links。您無需進行任何額外的配置即可使用它們。

• Actions: 允許您在“Action Logger”面板中記錄組件觸發的事件。
• Links: 允許您在組件之間添加導航。

Knobs: 允許您通過在運行時直接從UI修改React屬性來自定義組件。安裝方法：npm i --save-dev @storybook/addon-knobs，註冊方法：在.storybook/addons.js中導入。使用withKnobs裝飾器包裝故事。

Info: 允許您添加有關故事的更多信息，例如其源代碼、描述和React propTypes。安裝方法：npm i --save-dev @storybook/addon-info，註冊方法：在.storybook/preview.js中使用addDecorator。

自動化測試

Storybook的一個重要方面（本文未介紹）是將其用作運行自動化測試的平台。您可以執行各種測試，從單元測試到功能測試和視覺回歸測試。不出所料，有一些附加組件旨在增強Storybook作為測試平台的功能。我們不會詳細介紹它們，因為它們值得單獨成文，但仍然想提及它們。

• Specifications: 允許您直接在故事文件中編寫單元測試。
• Storyshots: 允許您根據故事執行Jest快照測試。

Storybook 作為服務

Kadira 還提供 Storybook 作為一項名為 Storybook Hub 的服務。它允許您在其上託管 Storybook，並將協作提升到一個新的水平。除了標準功能外，它還與 GitHub 集成，並且可以為您的每個拉取請求生成一個新的 Storybook。您還可以在 Storybook 中直接留下評論，以與您的同事討論更改。

結論

如果您覺得維護項目中的UI組件開始變得痛苦，請退一步看看您錯過了什麼。您可能只需要所有相關方之間方便的協作平台。在這種情況下，對於您的React項目，Storybook是您的完美工具。

您是否已經在使用Storybook？您打算嘗試一下嗎？為什麼？或者為什麼不呢？我很樂意在評論中聽到您的聲音。

(FAQ部分精簡，並調整結構)

常見問題解答 (FAQ)

• React Storybook與其他UI開發工具有何不同？ React Storybook允許開發者獨立構建組件，使開發過程更快更高效，並提供實時可視化測試環境。
• 我可以在其他JavaScript框架中使用React Storybook嗎？ 是的，它支持Vue.js和Angular等框架。
• 如何向我的Storybook添加附加組件？ 通過npm或yarn安裝，添加到.storybook/addons.js文件，並根據文檔進行配置。
• React Storybook的學習曲線如何？ 如果您熟悉JavaScript和React，應該很快就能上手。
• 我可以將React Storybook用於大型項目嗎？ 是的，它被Airbnb、IBM和Lyft等大型組織使用。
• 如何與他人共享我的Storybook？ 可以使用Storybook Deployer將其部署到靜態託管服務，如GitHub Pages或Netlify。
• 我可以在React Storybook中測試我的組件嗎？ 是的，它提供可視化測試環境，並可與Jest等測試庫集成。
• 如何自定義Storybook的外觀？ Storybook提供主題定制、自定義webpack配置和創建自定義附加組件等選項。
• 我可以將React Storybook用於移動應用程序開發嗎？ 是的，它支持React Native。
• React Storybook是開源的嗎？ 是的，它託管在GitHub上，並歡迎來自世界各地開發者的貢獻。

總而言之，對原文進行了大幅度的改寫，使其更簡潔流暢，並保持了原意。 圖片格式保持不變。

以上是React Storybook：輕鬆開髮美麗的用戶界面的詳細內容。更多資訊請關注PHP中文網其他相關文章！