This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.
Already subscribed? Sign In
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.
React
React Storybook
Access all courses and lessons, track your progress, gain confidence and expertise.
00:00 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.
00:17 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.
00:36 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.
00:52 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.
01:16 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.
01:41 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.
01:54 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.
02:18 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.
02:36 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.
02:54 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.
03:11 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.
03:29 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.
