開始吧

在你的開發環境下, 設定 React Storybook

此社區翻譯尚未更新為最新的Storybook版本。通過應用此翻譯的中文指南中的更改來幫助我們更新它。 Pull requests 歡迎他們.

Storybook 是在開發模式下與您的應用程式一起執行的. 它可以幫助您構建 UI 元件,並與應用程式的業務邏輯和上下文隔離開來. 本期"學習 Storybook"適用於 React; Vue和Angular版本即將推出.

Storybook and your app

整個頁面 -> 拿出各種元件 -> 分隔出 每個元件 /元件組合用來測試與文件說明

設定 React Storybook

我們需要按照幾個步驟設定 Storybook 環境. 首先,我們想要使用Create React App (CRA) 快速設定我們的環境,並啟用Storybook和 jest-笑話測試我們建立的應用. 讓我們執行以下命令:

# 建立應用:
npx create-react-app taskbox
cd taskbox

# 加入 Storybook:
npx -p @storybook/cli sb init

我們可以快速檢查,我們的應用程式的各種命令是否正常工作:

# 執行 測試引擎(Jest):
yarn test

# 啟動 storybook 在埠:6006 :
yarn run storybook

# 啟動 前端 頁面 在埠:3000:
yarn start

注意: 如果 yarn test 執行錯誤, 你可能需要安裝 watchman 具體問題來自這個Issue.

我們的三個前端應用程式模式: 自動化測試 (Jest) ,元件開發 (Storybook) 和應用程式本身.

3 modalities

根據您正在處理的應用程式的哪個部分,您可能希望同時執行其中一個或多個. 由於我們目前的重點是建立單個 UI 元件,因此我們將堅持執行 Storybook.

重用 CSS

本例子Taskbox 重用了 GraphQL 和 React Tutorial 示例應用中的設計元素,所以我們不需要在本教程中編寫 CSS. 我們只需將 LESS 編譯為單個 CSS 檔案, 並將其包含在我們的應用程式中. 複製和貼上這個編譯的 CSS根據 CRA的規則進入 src/index.css 檔案.

Taskbox UI