Recently, I started using React Storybook for a React app that I've been building. In this post, I'll share my learning on component sharing using storybook and hopefully will encourage you to consider using Storybook in your next react project.
Storybook in a nutshell
Storybook is an open source tool for building UI components and pages in isolation. You will be able to develop your UI components in isolation without needing to start up a complex dev stack.
Why Material UI?
Material-UI is a React component library based on Google Material Design, which allows for faster and easier stylized web development. It has a simple and customizable component library to build faster, beautiful, and more accessible React applications.
Why component sharing?
For example if you have 3 react applications using same components like cards, button, menu bar etc. How do you share the components? Please don't copy and paste . Issues you may face when you copy and paste; What if the number of react apps grow from 3 to 7? Copy and pasting component code with all the dependancies will be error prone. What if a component needs an update? So, I strong recommend not to copy and paste.
We'll solve thisLet's get started by creating a React application
Assuming you've node installed. Let's create a React application using create-react-app.
npx create-react-app storybook
npx it's a package runner tool that comes with npm 5.2+. The above command will download the latest version of create-react-app and its dependancies and set up a new React application called storybook.
Setup storybook
Let's go to the newly created folder storybook
cd storybook
initialize storybook using the following command
npx -p @storybook/cli sb init
Once the setup is done, you should be able to start the storybook using the command
yarn storybook or npm run storybook
Now, that you've storybook ready, let's add material ui package.
npm i @material-ui/core
Now, let's create the card component in Storybook. Under src/components/Card create a Card.js
Now that you've created the card component, let's create the story under src/stories/Card create Card.stories.js
Now, this is how your card story would look like
Card storyNow, that you've learned how to create a component within storybook and write stories. In the next tutorial, you're going to learn on how to import these components into a separate react app so that we write the components once and could be reused anywhere.
Please stay tuned!!!
Top comments (0)