Automatic setup

Note: be sure you have a in your project or the above command will fail.

If you want to set up Storybook manually for your React project, this is the guide for you.

Step 1: Add dependencies

Add @storybook/react to your project. To do that, run:

npm install @storybook/react --save-dev

Add react, react-dom, @babel/core, and babel-loader

Then add the following NPM script to your package.json in order to start the storybook later in this guide:

{
  "storybook": "start-storybook"
}
}

Step 3: Create the config file

For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.

To do that, create a file at .storybook/config.js with the following content:

Now create a ../src/index.stories.js file, and write your first story like this:

import React from 'react';
export default { title: 'Button' };
export const withText = () => <Button>Hello Button</Button>;
export const withEmoji = () => (
  <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
);

Each story is a single state of your component. In the above case, there are two stories for the demo button component:

Finally: Run your Storybook

Now everything is ready. Run your storybook with:

Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack’s hot module reloading.