返回教程

Storybook 入门

Storybook 是用于 React、Vue 和 Angular 最流行的 UI 组件开发工具。它帮助您在独立的环境中、脱离您的应用来开发和设计 UI 组件。学习 Storybook 可以创建可靠的 UI 组件,您在此过程中将从头构建一个应用 UI。
语言英语西班牙语日语葡萄牙语阿拉伯语德语法语意大利语韩语荷兰语简体中文正体中文
42+
贡献者
10
章节
Intro to Storybook

概述

Storybook 入门教程教授使用 Storybook 进行组件开发的成熟模式。您将从头开始构建 React、Vue 或 Angular UI,同时学习基本的 UI 组件技术。此处的信息来源于专业团队、核心维护者和出色的 Storybook 社区。Airbnb、Dropbox 和 Lonely Planet 的专业开发人员使用 Storybook 更快地构建持久且文档齐全的 UI。

目录
  1. 1
    开始使用
    在您的开发环境中设置 Storybook
  2. 2
    简单组件
    独立构建简单组件
  3. 3
    复合组件
    用更简单的组件组装复合组件
  4. 4
    数据
    学习如何将数据连接到您的 UI 组件
  5. 5
    屏幕
    用组件构建屏幕
  6. 6
    部署
    学习如何在线部署 Storybook
  7. 7
    视觉测试
    学习测试 UI 组件的方法
  8. 8
    插件
    学习如何集成和使用流行的 Controls 插件
  9. 9
    结论
    整合所有知识并学习更多 Storybook 技术
  10. 10
    贡献
    帮助将 Storybook 分享给全世界

您将构建什么

React
React Native
Vue
Angular
Svelte

Taskbox UI

Taskbox,一个任务管理 UI(类似于 Asana),具有多种项目类型和状态。我们将从构建简单的 UI 组件到组装屏幕。每个章节都展示了使用 Storybook 开发 UI 的不同方面。

📖 每个章节都链接到一个可用的提交,以帮助您保持同步。

作者
loading
Tom Coleman
Storybook 核心团队
loading
Dominic Nguyen
Storybook 设计团队
审阅人
loading
João Cardoso
工程师
loading
Carlos Vega
工程师
loading
Carlos Iván Suarez
工程师
loading
Kyle Holmberg
Air 工程师
loading
Daniel Duan
Squarespace 工程师
加入社区
6,975开发者以及更多...
为什么为什么选择 Storybook组件驱动的 UI
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI