Add React Storybook to a Project

Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

[00:00] Now we are looking at to-do NBC app, created using React and Redux. We are going to add React Storybook into this project. First of all, you need to install a global command line utility called getstorybook. Let's do that.

[00:14] I type, "npm install -g," globally, "getstorybook." This will install the getstorybook command line utility from NPM. Now I have a command line utility called getstorybook in my terminal, and I can simply run inside my project.

[00:37] It will identify my app, and it will install and configure React Storybook for me. Everything is ready. Now I can run this NPM script to start my storybook. I type, "npm run storybook." This will start my storybook on port 9009.

[00:59] I can access this using my browser. I type, "http://localhost:9009." This is our storybook. Storybook is a way we can visualize different states about UI components. For an example, we have button component.

[01:17] Here, we have two its states, one with text and with some emoji. I can click on these states, and I can see the different component, different button component. I can even click on these buttons, and see the actual action as well on the action local panel.

[01:36] Now it's time to look at the actual code. Now first look at this.storybook directly. All these changes are done by the getstorybook command line utility. I'll go into the .storybook directory, and I go into the config.js file.

[01:51] This is the basic configuration file. It will tell Storybook we have to locate stories. Now we are looking at the directory called sources/stories. This is the directory we are uploading stories from. Now let's look at this directory.

[02:08] Now we are looking at this directory, and we have different files. Now let's look at the index.js file. This file contains few stories. Story is a visual state of our UI component. For an example, for the button component, we have two stories with text and with some emoji.

[02:26] That's what we are looking at on this storybook. I can actually even change the things on this story. For an example, I can change the button text, button label into, "Hello button." Let's say, "React." I can see the changes right away on the screen.

[02:44] I can even change the actual component as well. Here, we use an example button component. I can go into that component. Let's change the background color into yellow, and set the border color into red. You can actually change the component, and see the changes right away on the screen.

[03:08] Finally, let's look at the package.json file. Here, we can see there is a new devDependency called @kadira/storybook, and also there are two NPM scrape. One for the NPM run storybook command. You can see this command for the NPM run storybook, and this is for the NPM run build storybook.

[03:27] This build storybook command actually convert our storybook into a static website, so I can deploy it anywhere I want.

~ 30 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today