Add your first React Story to Storybook
Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
Here I show the best configuration for React Storybook, and walk through adding your very first React Component and Story to your Storybook.
Instructor: [00:00] I am going to start by configuring our storybook. First, we import the configure method from storybook/react. Then we define a small utility function from require.context. What this does is it looks through everything in the source folder, and it uses a regex to look for files that end in stories.js.
[00:24] We are going to use this in a function called loadStories. For every file that matches, we're going to require it, like so. Finally, we are going to pass that function to the configure method along with the current module.
[00:49] Next, we are going to go over to our empty source folder and set up our first React component. We are going to import React from React.
[00:59] Then we'll define a small functional component. It's going to take props BG and children, and render them. That's a simple React component.
[01:11] Now, we are going to set up the stories for this React component. Make a new file called button.stories.js. Whatever it is, the file name just has to end in .stories.js to match up with the regex.
[01:24] We are going to import React, import the stories of function from storybook/react. We are going to import the component that we just made.
[01:41] Now, to actually define the story, we declaratively say stories of, and then the category, which is button, the current module. Then we'll say add.
[01:52] Some description goes here, of the particular story that we want. I am just going to say with background, for example.
[01:58] We'll pass a simple function that is essentially a React's element that implements an instance of whatever we are trying to demonstrate with our story.
[02:11] I am going to say, "Hello World," over here, and save it. Now when I run storybook, it's going to show the button that we just implement. When I refresh, you can see over here that we have the new button with the background.
[02:25] If I want to demonstrate other capabilities of the component that I'm demonstrating, I can just make another story and, say, change some of the props, save it, refresh it, and then we'll add a new story here which we can navigate to. That's storybook.