Set up Storybook for React from Scratch

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 set up Storybook to display React components from scratch.

Instructor: [00:00] Start from an empty folder. You know this, when you type ls, there is nothing in this folder. I'm going to start the project with yarn init -y, which answers yes for all the initializing questions and gives me a package JSON.

[00:14] Now, I'm going to add my dependencies, so I type yarn ad -t for devDependencies. I'm going to add storybook/react for the React version as well as babel-core for Babel.

[00:30] When you are done installing, you should see storybook/react and babel-core in your devDependencies section of your package.json. We're also going to add React and ReactDOM as real dependencies.

[00:45] When the installation is finished, you should have React and ReactDOM in your dependencies section of your package.json file. Now, I'm using the makedir command to set up two folders, .storybook -- which is the special folder for storybook -- and source.

[01:02] We're going to leave the source folder empty, but I'm going to set up a empty config file in .storybook. This is required for storybook to run. Finally, heads of package.json and add an npm script.

[01:24] This is not required, but it makes it much more convenient to run your storybook in future. Just type storybook start -storybook -p 6006 which is standard port -c.storybook for the folder and that's it.

[01:47] When you run npm run storybook, it's going to start up a server on localhost 6006, which you can navigate to and see the result. That's your storybook.

Joonas Kallunki
Joonas Kallunki
~ 4 years ago

Why is it using Yarn to install packages but NPM to run?

venelinpetrov
venelinpetrov
~ 4 years ago

Note that the installation step is outdated in this video, you need Babel7 and Babel loader instead npm i -D @babel/core babel-loader@next

Christopher Debove
Christopher Debove
~ 3 years ago

+1 @venelinpetrov. As of now if you install @storybook/react without specifying a version, it will install the version 5 of storybook. This version depends now on babel 7 (which is scoped into @babel scope)