storybook使用教程_如何使用Storybook构建React开发游乐场

storybook使用教程

by Sarah Sweat

通过莎拉汗

如何使用Storybook构建React开发游乐场 (How to build a React development playground using Storybook)

Lately, I have been wanting to try new things and test out new technologies or patterns in my React components. I needed a place where I could test these things out without launching a new app every time.

最近，我一直想尝试新事物并在React组件中测试新技术或新模式。 我需要一个可以测试这些东西而无需每次都启动新应用程序的地方。

I recently started using React storybook at work in order to establish a new design system for future projects. I also used it to prototype several versions of a new content authoring tool our team is working on. Putting this tool together with my desire to create components and play around with new things in a low stakes way seemed perfect. A few examples of these new “things” are React Context, SlateJs, and React Hooks.

我最近开始在工作中使用React故事书，以便为将来的项目建立新的设计系统。 我还使用它为我们团队正在使用的新内容创作工具的多个版本制作了原型。 将这个工具与我创建组件并以低风险的方式尝试新事物的愿望完美结合。 这些新的“事物”的一些示例是React Context，SlateJs和React Hooks。

This could also be used as a portfolio and a great way to showcase your work. Since Storybook can be deployed as its own app, you can host a webpage where you have a variety of projects and components you can display to potential employers or clients. Once deployed, it’s as easy as sending them a link to your storybook!

这也可以用作作品集和展示作品的好方法。 由于Storybook可以作为自己的应用程序进行部署，因此您可以托管一个网页，在该网页上可以显示给潜在雇主或客户的各种项目和组件。 部署后，就像向他们发送故事书的链接一样简单！

This post will focus on creating the Storybook for React environment and I will aim to post in the future about what I create inside of it!

这篇文章将专注于为React环境创建Storybook，我的目标是将来发布有关其中的内容的信息！

太…故事书是什么？ (Sooo… What is Storybook?)

Taken straight from the Storybook website because I couldn’t say it better myself:

直接从Storybook网站上获取，因为我自己无法说得更好：

“Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated de