Write the First React Storybook Story
Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.
[00:00] Now we are going to write some stories for this TodoMVC app from scratch. First of all, we need to remove this old boilerplate call. I can remove this old content. I can also remove these two button and welcome files as well. We need to focus on the code, let's hide this sidebar.
[00:20] First of all, we need to import React. Then we need to import the storiesOf API from kadira/storybook. Now let's important the component I'm going to use. It's the main section component of our todo app. Now everything is ready to write our first story.
[00:44] I type, "storiesOf main section," with the module as the second parameter. I'm assigning the return of this function called intoStoriesConstant. I type, "stories add," I'm adding the story here, say, "with a single todo item." That's our name of the story.
[01:14] I put a function which return a React component. Here, it's a simple paragraph. Now we can see the story rendered on the storybook. Then it's time to use the actual component so that's our main section component. Let's do that.
[01:35] Main section. I need to pass some props. The first one is todos. This is the list of todos. Then I need to pass another prop called actions. This is some Redux action. I'm not going to worry about it right now. I save this file so I can see the stories rendered on story, but it's ugly because I haven't imported CSS yet.
[02:05] In this project, I'm using some common CSS for all TodoMVC project. Our storybook configuration file is the best place to put this CSS. I'm going to the config.js file on this .story directory, and import the CSS.
[02:23] Now I can save this file, and I can see the CSS applied automatically. Let's try to write another story. I go the stories/index.js file. Let's make this bigger. I'm trying to just write another story called, "With a few todo items."
[02:49] I'm going to write a normal function here, and I'm going to return a React element. I save this file, and I can see the story added to my storybook automatically. I'll get an error because I haven't returned anything from this story. I had to return a React element.
[03:07] First of all, let's try to create a todos array so I can have a list of todos to render on the main section. Now I have a list of todos, and let's return the React element. Main section, and the todos prop. We did this new todos array.
[03:35] I have to use these actions. We don't need to worry about the action right now. I save this file, and I can see my todos available on this storybook right away. Here, I have written all of my stories in a single file called index.js, but now it looks nice, because I need to keep all the relevant stories in a single file. Then I can maintain them properly.
[04:00] I'm going to rename this file as main section. I'm going to create a new file called index.js, because I need to have that file, because otherwise I will get an error. I'm going to import main section into this file.
[04:16] I can actually reload this page, and see if there's any error. It's working pretty fine. I can even change the content here as well. Try React Storybook, and I verify everything's working properly.