Project: Shopping list

Review the goal and steps of the shopping list project.

Project: Shopping list

In this project we will build a small shopping list app. Three pieces: an Item that draws one row, a ListBody that draws the whole list, and an EmptyState shown when the list is empty.

Each lesson adds one piece; the last lesson joins everything. We keep the data as a fixed array; state comes in later groups.

First we lay out the skeleton: a section and a heading.

Data model

Each item in the shopping list has three fields: id (unique identity), name (product name) and qty (quantity).

Example: { id: 1, name: "Bread", qty: 2 }. We will use id as the key and name as the label. qty shows up later.

Keeping the data fixed makes the components easy to write; interaction comes in later groups.

Exercise ShoppingApp skeleton

Complete the skeleton. Write a ShoppingApp component that returns <section> with <h1>Shopping List</h1> inside. Export it.

Show example solution

function ShoppingApp() {
  return <section><h1>Shopping List</h1></section>;
}

export default ShoppingApp;

Test yourself

Which component is written first in this project?
```
We go from the small piece to the big one.
```
- ListBody
- EmptyState
- Item
- Router
Show answer

Item — Item comes first; ListBody then calls it.

Project: Shopping list: fill in the missing part

<section><h1>____</h1></section>

Show answer

<section><h1>Shopping List</h1></section>

Project: Shopping list: match the terms

Item

Draws one row
ListBody

Draws the whole list
EmptyState

Shows empty message
section

Outer shell

Next lesson: Item component

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies