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 a Welcome Page with Sequential Stories to a React 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 how to add a landing/welcome page to your Storybook, so that first-time viewers get to read a message from you or have some orientation around the structure of the Storybook you are building. We also introduce the idea of sequential additions to your Storybook config so you can get a sense of how to modify it for your own needs.

    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 We are going to add a welcome page of our storybook, almost like any other page, except we are going to add it in the storybook folder.

    00:10 In here, we are going to import the usual React and storybook/react, imports. We are going to define the story, much like we do everywhere else. We add the module, then we say, "To your new storybook," with a ta-da emoji -- that's very important -- and then a little welcome message, "Welcome to your new storybook."

    00:43 Now, all you do to set it up is head to the config, and notice how we didn't name it .stories.js. We just named it welcome story. That's enough because we can just add it here. Because it's sequentially above the rest of the stories, it's always going to show up first.

    01:03 When I run the storybook, and I refresh it on the screen, it's going to show the welcome page. It's going to be the first thing that any user sees when they see the storybook.

    Discuss

    Discuss