How to Implement a Storybook in React Applications

How to Implement a Storybook in React Applications

Storybook is the world’s best and popular UI component development tool among developers. It helps developers to design and develop UI components in an isolated environment. It runs in an isolation environment to the main application so the developer would not have to worry about the dependencies.

Getting Started by creating a new app: Open the terminal and run the following commands: 1.

Create an application using create-react-app:

npm or yarn create the react-app application 2.

Move to application directory:

cd application

Getting started with React storybook: Add the following dependencies to the dev-dependencies as we only need the storybook modules during development and not required at run time. “devDependencies”: “@babel/core”:

{

“^7.2.2”,

“@storybook/addon-actions”: “@storybook/addon-info”:

“^4.0.0”,

“@storybook/addon-links”: “@storybook/react”: “babel-loader”:

}

“^3.3.13”,

“^3.3.13”,

“^3.3.13”,

“^8.0.5”

Add the following script inside the package.json file: “script”:

{ “storybook”:

“start-storybook -p 9001 -s public”,

}

Setting up storybook in your Project: 1.Create a .storybook directory in your root directory.

Create a config.js file. This file will check all the src directory file with extension `filename.stories.js`

3. To add the external cdn or bootstrap links to your storybook create a file name as preview-head.html and link your css and cdn links.

4. To add some addon to storybook register those add-ons in the addons.js file in the .config directory

Create a button component inside the src/components directory.

6. Create a button component and its story in the src/components/button directory.

This will create three isolation button stories one for default button, one button with a primary color and one with danger color.

Now to see the component on the storybook run `npm or yarn run storybook`.

Open chrome and with http:localhost:9001

To know more about implementing the Storybook in React Applications, hire dedicated React developers and get the best results.

Connect With Source Url:https://www.ongraph.com/how-to-implement-astorybook-in-react-applications/