This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Add your first React Story to Storybook

    Shawn WangShawn Wang

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss