面向新用户的应用内引导

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

Joe Vaughan

Jun 29, 2023 — @joevaugh4n

最后更新 Jun 29, 2023

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

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

等等，但为什么？

新用户经常提到，从首次安装 Storybook 到真正在他们的应用中使用它，这一步很难迈出。我们的文档展示了如何编写 Story，但你不应该需要在不同网站之间切换来学习 Storybook 的工作原理。

我们将引导功能构建到新的 Storybook 体验中，以展示为应用的所有变体编写 Story 是多么容易。

引导之旅旨在让新手感受实际使用 Storybook 的体验。它会在新的 React 项目中初始化 Storybook 时启动，向你展示 Storybook 界面的不同部分如何协同工作。

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

预览画布是独立的 iframe，用于渲染你的组件。控件允许你交互式地更改赋予组件的 props 和数据，以查看其响应方式，而无需修改底层组件代码。

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

新的引导功能教你如何在应用内编写你的第一个 Story。它从引导你了解支撑 Story 格式的基本元数据开始。

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

现在就在最新的 7.1 预发布版本中尝试新的引导教程。在一个没有 Story 的新的 React 项目中运行它

npx storybook@next init

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

设置时遇到问题？在 GitHub 上创建一个 Issue 或前往我们的社区 Discord 中的 #prerelease 支持论坛。

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

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

是的，未来我们将逐步向 Storybook 的核心框架 Vue、Angular 和 Web Components 推出它。