返回教程

Storybook 简介

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

概述

Storybook 简介教授使用 Storybook 进行组件开发的实用模式。您将学习基本的 UI 组件技术,同时使用 React、Vue 或 Angular 从头开始构建 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,616开发者以及更多
为什么为什么选择 Storybook组件驱动的 UI
开源软件
Storybook

维护者
Chromatic
特别感谢 Netlify 以及 CircleCI