Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (42 sloc) 2.79 KB
title tocTitle description commit
開始吧
從頭開始
在你的開發環境下, 設定 React Storybook
30939d5

開始吧

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 在埠:9009 :
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

如果要修改樣式,在GitHub儲存庫中有提供 源LESS檔案。

新增資源

我們還需要新增 字型和圖示資料夾到了public/資料夾. 新增 樣式和靜態資源 後,應用程式會奇奇怪怪的. 沒關係. 因為我們還沒有開發應用程式. 現在我們開始構建我們的第一個元件!