为什么我应该在React中使用Storybook?

huangapple go评论85阅读模式
英文:

Why should I use storybook with React?

问题

我是新手React,遇到了storybook这个工具。问题是为什么我们需要使用storybook?它解决了哪些问题?

英文:

I am new to React and came across tool as storybook. The question is Why do we need to use storybook? and what problems does it solve?

答案1

得分: 1

你显然不需要使用Storybook。但在许多情况下,它可能会有所帮助。Storybook有助于开发自己的组件并查看其在应用程序之外的行为。

例如,您正在准备一个特殊的按钮组件,该按钮根据应用的品牌进行样式设置,您只想开发这个特定的内容,添加并检查样式,以及查看它如何响应事件等。您可以在隔离环境中执行此操作,而无需运行整个应用程序以使您的工作变得可能。

但是,根据我多年的经验,我强烈建议使用像Storybook这样的方法。它真的非常有帮助。此外,我的一个朋友开始使用Cypress仅对组件及其行为进行测试,将其视为一种单元测试。

英文:

You do not need to use Storybook obviously. But in many cases it can be helpful. Storybook helps developing you own components and see its behavior outside your application.

For example, you are preparing a special button component which is styled according to the app branding and you would like to develop only this particular thing, add and check styles check how it reacts to events etc. You can do it in isolation instead of running the whole app to make you work possible.

Having some years of experience ahead I would however strongly recommend using such approach like Storybook. It's really helpful. Moreover, a friend of mine start using Cypress to test only components and its behavior as a kind of unit tests.

答案2

得分: 0

Storybook 提供了一种在应用程序之外独立开发和测试 React 组件的方式。这使您可以专注于开发每个组件,而不必担心它将如何融入您的应用程序的其他部分。Storybook 还提供了一种与他人共享您的组件的方式,以便他们可以看到它们的工作方式并提供反馈。

英文:

Storybook provides a way to develop and test React components in isolation from your application. This allows you to focus on developing each component without worrying about how it will fit into the rest of your application. Storybook also provides a way to share your components with others, so they can see how they work and provide feedback.

huangapple
  • 本文由 发表于 2020年1月6日 17:16:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/59609407.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定