storybook_Storybook for React入门

storybook

What is Storybook? Storybook is a tool to develop components independent of your app. This approach is well-suited for developing React components. Storybook uses its own web server (separate from your React app) to setup a user interface that displays an individual component under different scenarios/stories. See screenshot at the bottom.

什么是故事书？ 故事书是一种独立于您的应用程序开发组件的工具。 这种方法非常适合开发React组件。 Storybook使用其自己的Web服务器(与React应用程序分开)来设置一个用户界面，该界面在不同的场景/故事下显示单个组件。 请参阅底部的屏幕截图。

Why should you use Storybook?

为什么要使用Storybook？

1. If you are working on a large-scale application with a team, you can isolate your component so that external factors don’t interfere with the component development. As such, this approach allows your components to be more pure and reusable.
   如果您与团队一起处理大型应用程序，则可以隔离组件，以免外部因素干扰组件开发。 因此，这种方法使您的组件更加纯净和可重用。
2. You can showcase your components individually to stakeholders for feedback.
   您可以分别向利益相关者展示您的组件，以获取反馈。
3. You can examine the effects of prop changes to your component.
   您可以检查道具更改对组件的影响。

Example: Let’s take a look at an example. Our stakeholder wants to see how the button looks in different background colors. So, we