What is Storybook and how is it used?

Actually, in this article, I tried to explain the logic of storybook to you.

I hope that will be useful :)

Components, as we know, are piecemeal, we create projects by combining these pieces, and storybook package come to our aid here to ensure integrity.

What is the Storybook?

It helps you build UI components isolated from the business logic and context of your app.

Advantages;

— The biggest advantage in my opinion is to ensure the integrity of the design.
— Creating projects using components that are ready for every situation and design provides great convenience.
— Avoiding component complexity in the project.

Let’s try step by step together…

npx degit chromaui/intro-storybook-react-template storybook-example

This template contains the necessary styles, assets and bare essential configurations for this version of the tutorial.

Than, we need to install all dependencies;

npm install

We should test our app;

npm run test#start storybook
npm run storybook
#start react
npm start

The screens we should see after running our commands are as follows.

--

--

--

Full Stack Developer — Frontend Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is props.children?

Hi, Today I will write about how to write less javascript

Cross-origin communication between window

Upnepa Nigeria Intro

Fix case stmt indentation on the returns

React animations and transitions

How to trigger VueX actions from the backend?

Visualize your data in Angular with Apexcharts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
YUSUF ELİAÇIK

YUSUF ELİAÇIK

Full Stack Developer — Frontend Engineer

More from Medium

How to migrate a react app into an ionic app?

Divide and Conquer your components

SOLID in component architecture 🎉

How to protect /uploads route with a custom policy in Strapi V4