Introduction to React Storybook
Our teams has recently started using Storybook for react application that we are building.
What is Storybook?
Storybook is an user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.
Why Storybook ?
As storybook allows you to run and view your react components in isolated manner, so imagine developing a component and firing it up itself.
Assuming your component receives props as input, storybook allows you to pass in some props values when instantiating it. It also has several handy add-ons that allow you to parametrise your props and try different values when viewing your component.
Storybook runs its own web server, separate from your react app, and provides catalogue view for components that you choose to use it with.
Getting Started:
The easiest way to get started with Storybook is to use the getstorybook tool, a CLI that scans your app and will make small changes to get storybook working.
First create react application using following command:
npx create-react-app my-app
cd my-app
npx -p @storybook/cli sb init
After this command a react project with configured storybook will be created.
To run this storybook project run command npm run storybook in terminal.
Then it will open browser on port 9009 , Congrats, you have successfully created storybook project.
By default Welcome and Button stories are created.
Writing Stories:
The primary purpose of a component explorer is to allow you to isolate and work on a component in by itself, rather than in the larger context of a complete application.
To do this, you describe exactly the inputs the component should see — the “state” of the component. The explorer will then simply render the component in that state. This is advantageous because it allows you get the component just the way you need, without having to manipulate a larger application to achieve that state in the context of the whole app.
To get the component into the state you want to write a story, which is Storybook’s API for describing states in terms of a rendered React element — i.e. a component and set of props:
Once you’ve written a story, it’s simply a matter of browsing the story inside the storybook UI to see that component rendered with props you’ve supplied it.
Why is it Useful ?
As developers, our goal is usually to build software incrementally, with the goal of new features being written in a modular manner. To ensure that our code operates correctly, we usually capture its behavior in a set of unit tests.
Storybook allows you to see and interact with your components in an isolated way, similar to how unit tests scope the testing of your component code.
