This video is available to students only

Composing components

Composing components.

After building the Badge and Review components in the previous lessons, we have the basics necessary for the RestaurantCard component, let's go through the process of creating it.


We won't be creating the component from scratch, as it would be too much typing effort, and I don't want you to just copy-paste code, so let's just focus on the process.

As we are going through the process, there will be a few files with pre-configured code to show us every step in this lesson. We will temporarily use files located in the progress folder:RestaurantCard.basic.tsx and RestaurantCard.unstyled.tsx. We will be commenting/uncommenting them in the imports of our stories file, then use the final version of the component: RestaurantCard.tsx. Note that both RestaurantCard.basic.tsx and RestaurantCard.unstyled.tsx are there for presentational purposes, and you're free to delete the entire progress folder if you want to.

If you're not running Storybook, please start it. Now let's get to it.

Defining the scenarios#

The first step is to think about the requisites of the component. Here are the possible scenarios for it:

  1. The restaurant is currently open (default scenario)

  2. The restaurant is new on the platform

  3. The restaurant is currently closed

  4. Loading indicator

We can also prepare some mock data, and based on it, we can define the props for the component. Here's what RestaurantCard.basic.tsx looks like, with a minimal template to show these scenarios:

In Storybook, every one of these scenarios would become a story. Let's create a RestaurantCard.stories.tsx file and write the stories in it:

Good! This is the playground, and we will see the component evolve as we evolve the code. We can already play with controls to simulate the various scenarios the component handles:


This page is a preview of Storybook for React Apps

Start a new discussion. All notification go to the author.