Set up Storybook for React from Scratch
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.