In this blog, we will talk about what is storybook, why should we use it and how to set up storybook for your React project using storybook and create-react-app.
So what is storybook? Storybook is an open source tool that is used for developing UI components in isolation for React, Vue, and Angular.
Why should we use Storybook?
Building User Interfaces is more difficult these days. You are responsible for the layout, logic, personalization, performance, internationalization, accessibility, mobile, browser. And all of that has to work together seamlessly.
Components solve some of these problems but create some too. They are dependent on each other. Changes to one can end up breaking all. And keeping track of large no. of components is difficult. And you end up reinventing the same thing over and over again.
Storybook solves this problem because you can build UI components in isolation. Developers don’t get distracted by flaky data, business login or unfinished API. Developers can focus on hard to reach use cases. It provides reusability. It helps you collaborate with designers, project managers, and other developers.
You can browse components and their use cases in one place. And it’s easy to drop components right into your app.
"Abstraction, Isolation, Autonomy" - Norbert de Langen
A good abstraction is a key to good software. If you create abstractions where you shouldn’t, you create complexity. If you don’t create abstractions where you should, you create complexity.
Complexity is like a dragon, that if you don’t combat effectively, you are feeding it and making the problem worse. Isolation is a possible result of good abstraction. React components abstract a section of UI
Features of Storybook
- UI development environment for UI components
- You can visualize different states of your UI components.
- You can develop them interactively
- It runs outside of your app.
- You can develop without app specific dependencies and requirements.
Installation and set up
Let’s install storybook globally first.
npm i -g @storybook/cli
Now let’s create a react application using create-react-app
cd ~
create-react-app my-storybook
cd my-storybook
Install storybook in your react application. getstorybook command adds storybook support to your “Create React App” based project.
cd my-storybook
getstorybook
Start the storybook server
cd my-storybook
yarn run storybook
Then you can create a directory called components inside src directory and add your components in the stories /index.js like so:
storiesOf('Header', module)
.add('header', () => <Header/>);
.add('footer', () => <Header/>);So technically, a story is a function that returns something that can be rendered to screen. A Storybook can be comprised of many stories for many components.
Actions
The events can be seen in action
Directory Structure
Add Ons:
Storybook comes with a way to list stories and visualize them. Add-ons implement extra features for Storybooks to make them more useful. Storybook comes with Knobs, Actions, Source, Docs, Accessibility etc.
You can also add your own custom addons as well.
We will learn more about add ons in the upcoming blogs.