Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!
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.
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.
