Add a Welcome Page with Sequential Stories to a React Storybook

Shawn Wang
InstructorShawn Wang

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

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.

80xer
80xer
~ 3 years ago

What extensions did you use to enter emoji?

Myles Lewando
Myles Lewando
~ 2 years ago

What extensions did you use to enter emoji?

  • On Mac, <kbd></kbd> + <kbd>Ctrl</kbd> + <kbd>Space</kbd>
  • On Windows, <kbd>Ctrl</kbd> + <kbd>.</kbd>
LitChem
LitChem
~ 2 years ago

I find on Windows in VScode: (Windows button + .)