Storybook for React

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.

Image result for storybook react

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.

1+

Leave a Reply