Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

---
title: How to add Complex Components to Storybook
slug: adding-the-homepage
description: Let's analyze the HomePage component and add it to Storybook.
privateVideoUrl: https://fullstack.wistia.com/medias/d2gt5fj04m
isPublicLesson: false
---

We just worked on the `RestaurantsSection` component and integrated it to the `HomePage` in the previous module. How cool would it be if we also added that page to Storybook as well? Let's do that!

## Analyzing the component

Given that pages might include a variety of components which require many different functionalities (e.g. routing, state management, theming, etc), it's possible that we end up spending quite some effort to properly add a full page to Storybook. Given that in this course, we went from simpler to more complex components, we already made Storybook pretty smart when we got to this lesson, so we won't have too much trouble. That's why I think it's better to leave adding the pages last in your Storybook.

Regarding the `src/pages/HomePage/HomePage.tsx` component and its usage in the app, let's break down all the functionality it needs to render properly:

1.  **Styled components**

The `HomePage` contains lots of components that use [styled-components](https://styled-components.com/) for theming, so the styled-components support is necessary. Given we already added a global decorator for this in the [theme support lesson](./decorators-theme-support), there's no need to do anything more as it is already applied to all stories!

2.  **State management (Redux)** 

The shopping cart button in the `PageTemplate` used inside of the `HomePage` communicates to a [Redux](https://redux.js.org/) store in order to keep things in sync between the food items that are added to the shopping cart from the restaurant pages and will break if there's no Redux store available. We already added support in the previous lesson, so there's no need to do anything here!

3.  **Data fetching**

The `RestaurantsSection` component used in the `HomePage` fetches data, and we already know how to mock these requests using MSW. We will be using the same mocks in this lesson.

### Creating the stories file

Now that we know our path forward, run Storybook and create a stories file at `src/pages/HomePage/HomePage.stories.tsx` with the boilerplate that you're used to, with only one minor difference: Given that the `HomePage` component does not have any props, we don't pass args down to the component in the _Template_ function. Also, let's link the Figma design as well: <https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=135%3A258>

```tsx
// src/pages/HomePage/HomePage.stories.tsx
import { ComponentStory, ComponentMeta } from '@storybook/react'

Let's analyze the HomePage component and add it to Storybook.