Back to Intro to Storybook
Chapters
  • 開始
  • 簡易元件
  • 複合元件
  • 資料
  • 頁面
  • 部署
  • 進行測試
  • 外掛
  • 總結
  • 參與

Storybook 教學:React 篇

在開發環境設定 Storybook
此社群翻譯還未更新至最新版本的 Storybook。請透過英文版本的更變,協助我們更新此翻譯。 歡迎發送 Pull Request.

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,然後將目前做好的東西提交變更。

Copy
git init

接著:

Copy
git branch -M main

然後:

Copy
git add .

最後:

Copy
git commit -m "first commit"

開始打造第一個元件吧!

Keep your code in sync with this chapter. View bf3514f on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
簡易元件
打造獨立的簡易元件
✍️ Edit on GitHub – PRs welcome!
Join the community
6,614 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI