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

總結

總結已學到的,接著學習更多 Storybook 技巧
此社群翻譯還未更新至最新版本的 Storybook。請透過英文版本的更變,協助我們更新此翻譯。 歡迎發送 Pull Request.

恭喜!你已經做好在 Storybook 裡的 UI。一路下來,學到如何打造、組合、測試和部署 UI 元件。如果都照著做,部署上去的 Storybook 和程式碼應該會長得像這樣:

📕 GitHub 專案:chromaui/learnstorybook-code
🌎 已部署的 Storybook

Storybook 在 React、React Native、Vue、Angular、Svelte 和其它 framework 都是很犀利的工具。有熱鬧的開發者社群以及豐富的外掛。這份介紹擷取其可能性最淺薄的一部份。只要採用 Storybook,我們有自信讓你對效率和打造堅強的 UI 感到驚艷。

繼續學習

想要深入探索?這些資源會有幫助。

  • Storybook 官方文件記載 API、社群連結與外掛集散地。
  • 快快樂樂學 Storybook 工作流程隆重介紹 Squarespace、Major League Soccer、Discovery Network 和 Apollo GraphQL 裡高效率團隊的最佳工作流程方法。
  • 視覺測試手冊深入探討在 Storybook 以視覺測試元件。免費的 31 頁電子書。
  • Discord 與 Storybook 社群聊天互動。只要你幫助其他 Storybook 使用者,Storybook 使用者也會幫你。
  • Storybook 部落格展示能夠讓 UI 開發工作流程一致的最新版本與功能。

Storybook 入門教學是誰做的?

Chromatic 製作了文字、程式碼與影片剪輯。這份教學是受到 Chromatic 很受歡迎的 GraphQL + React 教學系列所啟發。

還想要有更多這樣的教學和文章嗎?請加入 Storybook 的郵寄清單。

Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
參與
一起把 Storybook 分享至全世界
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify