Getting Started with React Storybook

Arunoda Susiripala

React

React Storybook

React Storybook is a UI component development environment for React. With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook. For more information, have a look at our documentation.

First of all, we need to have a React app. Let's create one with create-react-app. Enter create-react-app, and I set the name as Hello Storybook. This will create a React app from scratch, and it will install all the NPM dependencies.

My app is ready now. I can go inside this app, and add Storybook into this app. Before that, I need another tool called getstorybook, so let's install that. I type npm install getstorybook, and I am doing it NPM globally, so I add a G flag. Hit enter.

This will install a global utility called getstorybook. I can use that tool to add Storybook to any React project. I have the getstorybook tool so I can go into my React app, and I can use this getstorybook tool.

I simply type getstorybook, and hit enter. The Storybook will identify my create-react-app base app, and install all the dependencies, and configure Storybook for me. Everything is ready, so I can simply type npm run storybook to start the Storybook.

This will start Storybook on port 9009. I can go into http://localhost:9009 to access my Storybook. Here, we have the welcome screen, and a button component with two different states. One with real text -- the hello button as its text -- and one with some emoji. You can see the emojis.

I can also click on these buttons, and see the actions in the action logger. Let's have a look at the code. Here, our getstorybook tool configure our app for the Storybook so we can start writing stories right away.

First, we have a .storybook directory, and here's a config.js file. This config.js file is the main configuration for Storybook. It tells us where to load stories. A story is one state of our UI component. We can have multiple stories for a single component, and we have many stories for multiple components.

Our stories are located at this inaudible stories directory. I can change this directory to whatever I wish. Let's go to the inaudible directory, and go to the stories, and index.file. We have a few stories. We have one story for the hello button.

This is what you are looking at, hello button story. I can change the button labeling to hello button React, or anything you wish. I can see the changes reflected to the screen right away. I can also change the actual component by going to the component.

I can change the color or something. I can change the code or color. Let's change the background color to yellow. I should add update. You can see the changes right away. Our getstorybook tool also change our package.json as well.

Let's have a look at the package.json. First, we can see a new inaudible dependencies called addcolor/storybook. This is the Storybook module. We have two NPM scrape. One for the Storybook, npm run storybook command, and one for the npm run build-storybook command.

With the npm run build-storybook command, you can export your Storybook into a static website, and you can deploy it anywhere you want. This is Storybook.