Storybook 教學:React 篇

在開發環境設定 Storybook

Storybook 與 App 的開發模式一起運作,協助將 App 裡 UI 元件的商業邏輯和情境分開來。這裡是 Storybook 入門的 React 版本,其它還有 React NativeVueAngularSvelteEmber

Storybook 和 App 的關係

設定 React Storybook

只要照著幾個步驟,就可以在環境下開始 build 的流程。我們喜歡從設定 build 系統的 degit 開始。用了這套件,就可以下載「範本」(已經預設寫好一些設定的應用程式半成品),它有助於快速追蹤開發流程。

執行以下指令:

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn
💡 範本裡有此版本教學會用到的樣式、檔案和初始設定。

現在,可以來快速檢查應用程式的不同環境是否正常運作:

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start
💡 請留意測試指令的 flag --watchAll,加上此 flag 可以確保所有測試都有跑到。在這篇教學的過程,會介紹不同的測試情境。可以考慮根據情況修改 package.json 腳本。

現在有 3 種前端應用程式模式:自動化測試 (Jest)、元件開發 (Storybook) 和應用程式本身。

3 種模式

根據 App 裡開發不同的部分,可能會想要同時執行多個。然而,我們現在專注在建造單一 UI 元件,所以只會說 Storybook。

提交更變

這時候已經可以安心在本地端 Repository 放進檔案。依照下方指令啟動本地端 Repository,然後將目前做好的東西提交變更。

$ git init

接著:

$ git branch -M main

然後:

$ git add .

最後:

$ git commit -m "first commit"

開始打造第一個元件吧!

Next Chapter
簡易元件
打造獨立的簡易元件