介绍学习故事书

这是一篇通过构建工作UI来教你Storybook的教程

加载
多米尼克阮
@domyen

TLDR: 十博体育备用网址推出 学习故事书-一个快速,平易近人,免费的教程开始与故事书. 在从头开始构建UI时,了解基本的UI组件技术. 与实际的代码提交保持同步.

如果您像我一样从事前端工作,您可能听说过Storybook(最初称为React Storybook). 一开始你可能会忽略它. 另一天,另一个开发工具.

然而,越来越多的开发人员和精明的设计师使用Storybook来构建ui. Airbnb、Dropbox、IBM、Lonely Planet和Mozilla的团队每天都依赖它. 而且Storybook已经超越React,支持几乎所有主要视图层. 到目前为止,你可能想知道这种炒作到底是怎么回事?

未来UI开发的工具

为了理解Storybook,让十博体育备用网址简单地绕一下前端的风景. 受React、Vue和Angular等新视图层的启发,UI开发正在经历一场复兴.

人们不再用页面思考,而是用组件思考. 组件仍然输出熟悉的HTML, CSS, 和JavaScript三, 但是产生这种产出的方式已经进化了.

向组件抛出属性,并观察组件呈现不同的排列.

有了React,开发者就有了像这样的新工具 道具, 上下文, 状态 呈现UI. 这些“现代”视图层共享的核心创新是组件结构,它可以很容易地将复杂的ui分解成简单的模块.

面向组件的开发需要新的工具来帮助开发人员集中精力构建UI组件. Storybook是最流行的、功能齐全的UI组件工具. 它也是唯一支持大多数视图层的工具.

好吧,但是故事书 do?

Storybook帮助您更快地构建持久ui. 它以开发模式与应用一起运行,并提供一个“沙盒”来构建与应用业务逻辑或上下文隔离的UI组件. 这使您可以专注于清楚地定义组件API——组件接受的一组输入.

开发人员通过向组件传递一组独特的输入来生成不同的变体(类似于单元测试中的规范),从而创建“故事”。. 在Storybook中索引并记录了这些故事,因此您可以在开发过程中直观地检查它们,或者稍后在测试过程中重新访问它们.

学习故事书 -动手教程

越来越多的前端团队依赖于Storybook. 但是没有太多的资源 如何从第一原则使用故事书.

汤姆·科尔曼I 创建学习故事书, 一个免费的9章教程, 使用Storybook教授经过验证的组件开发模式.

在Storybook中,您将了解基本的UI组件技术,同时从头构建UI(非常适合基于项目的学习者).

构建Taskbox,一个任务管理UI

你将学习

您将学习来自专业团队的最佳实践, 核心维护者, 以及神奇的故事书社区. 此外,从更广泛的背景来理解为什么这些最佳实践存在. 每一章都介绍了使用Storybook的不同方面,并同步到 真正的承诺 在一个可用的演示应用程序中.

  • 🏗设置开发环境
  • 🔨独立构建一个简单组件
  • 🛠将简单组件组装成复合组件
  • 💡用容器连接数据
  • 💻构造屏幕
  • 🚦测试一个UI组件库
  • 🚀部署故事书

这对谁来说很好

故事书应该面向所有人,无论你是高级、初级、开发人员还是设计师. 如果你跟随, 您将掌握独立UI组件开发的核心概念,并在Storybook中毫无问题地构建完整的UI. 很好:

  • 👩‍💻经验丰富的开发人员 谁听说过Storybook,并想要一个有效的教程,强调关键功能和工作流
  • 👩‍🎓新开发人员 谁想学习Github、Artsy和Priceline的专业团队使用的工具.
  • 👩‍🎨产品设计师 对UI组件和螺母感兴趣 & 构建组件库的螺栓.

我希望 学习故事书 帮助你,嗯,学习故事书!

贡献者欢迎

学习故事书 开源. 十博体育备用网址的目标是把《十博体育网站》介绍给全世界. 十博体育备用网址正在寻找 Vue和Angular的贡献者 (示例代码目前是React)和帮助 翻译教程 与其他语言.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

访问控制和集成

彩色更新
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10