Interaction between React and Storybook

Question

We already know that Storybook is for building UI components and keeping them isolated from the business logic. I have implemented some basic examples of StoryBook.

Now I am very curious to know about the Storybook internal behavior means how it interacts with the react main application, the workflow of the Storybook after executing the npm run storybook command starting from the entry point to exit?

I'd also like to know why we don't use npm start for running the storybook?

Thanks :)

Answer 1

Storybook doesn't interact with your react application.
It is just a library for components in your project.

It gives you a variety set of tools to create examples of components usage.
This is why you need to write stories separately from actual react application. And all these stories have no any intersection with your app.

Command npm run storybook just build all the stories that you've written and build useful ui for that so you can browse them easily. That becomes extremely useful when you have a big code base.
Because it is difficult to know every component you have in project and how it works. And Storybook provides us with an instrument to have all components more structured.

You can also use npm start for that. It is just about how you configure scripts in package.json.