Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Getting Started with React Storybook

3:41 React lesson by

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.


egghead.io comment guidelines

Avatar
egghead.io

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 2:20] stories directory. I can change this directory to whatever I wish. Let's go to the [inaudible 2:27] 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 3:17] 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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?