Add React Storybook to a Project
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.