面向新用户的应用内导览

只需 3 分钟编写你的第一个 Story

乔·沃恩

2023 年 6 月 29 日 — @joevaugh4n

最后更新 2023 年 6 月 29 日

当你开始学习一项新技能时，没有什么比拥有一位优秀的老师更好的了。Storybook 也是如此。世界领先的前端团队使用 Storybook 构建他们的 UI，但如果你是自学，理解基础知识可能会感到棘手。

今天，我很高兴分享 Storybook 7.1 中应用内导览开发者体验的预览。它教导新用户如何从 Storybook 内部开始使用 Storybook！这对所有开发者都有帮助，无论他们是前端新手还是 Storybook 新手。

等等，为什么？

新用户经常提到，从首次安装 Storybook 到实际在他们的应用中使用它，这个飞跃是艰难的。我们的文档向你展示如何编写 Story，但你不应该在站点之间切换标签来学习 Storybook 的工作原理。

我们正在将 onboarding 构建到新的 Storybook 体验中，以展示为你的应用的所有变体编写 Story 是多么容易。

导览旨在让新手了解实际使用 Storybook 是什么样的。当 Storybook 在新的 React 项目中初始化时，它会启动，向你展示 Storybook UI 的不同部分如何协同工作。

侧边栏显示你的 Storybook 项目的内容。

预览画布是隔离的 iframe，你的组件在其中渲染。控制项让你交互式地更改传递给组件的 props 和数据，以查看其响应方式，而无需接触底层的组件代码。

Story 是 Storybook 的核心概念。每个 Story 代表你 UI 的不同状态。例如，具有多个 props 的 Button 可以以几种不同的方式渲染。Storybook 的超能力在于让你在一个地方看到所有这些变体，而无需加载你的应用并手动点击来重现状态。

新的 onboarding 教你如何在应用内编写你的第一个 Story。它从 Story 格式基础的必要元数据的导览开始。

接下来，你将调整代码片段以生成你自己的 Story。

立即在最新的 7.1 预发布版本中尝试新的 onboarding 教程。在没有 Story 的新 React 项目中运行此命令

npx storybook@next init

我们很想听听你的想法，所以请与我们分享你的反馈。

设置时遇到问题？打开 GitHub Issue 或前往我们的社区 Discord 中的 #prerelease 支持论坛。

我们的目标是从应用内导览开始帮助你学习 Storybook。接下来，我们将添加更多关于 Storybook 测试和文档的教程内容。如果你想了解更多关于这些主题的信息，请查看我们的指南和YouTube 频道。

如果你是一位经验丰富的用户，并且想帮助我们进一步开发此导览（或为其他框架添加兼容性），我们欢迎你加入我们的开源团队并做出贡献。了解更多关于入门的信息或在 Discord 中与我们的维护者聊天。

是的，我们未来会逐步将其推广到 Storybook 的核心框架 Vue、Angular 和 Web Components。