Storybook 教學：React 篇

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

設定 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

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

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

提交更變

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

$ git init

接著：

$ git branch -M main

然後：

$ git add .

最後：

$ git commit -m "first commit"

開始打造第一個元件吧！