A real menu from data
Build a restaurant menu the way a React developer would: small components, data passed as props, lists with keys, and a little logic for special cases.
Thinking in components
This project is small, but it's shaped exactly like real product work. Designers hand over a picture of a menu; developers turn it into a tree of components, decide what data each needs, and wire it together. Getting comfortable with that translation — picture to components to props — is the core skill of a React developer, and you'll use it on every screen you ever build.
Start a React project by drawing boxes around parts of the design. Each box that has its own job becomes a component: the whole menu, each section ("Momo", "Drinks"), each item row, maybe a price tag or badge. Then decide which data each one needs — that becomes its props. Data lives at the top and flows down.
App → holds MENU
└─ Menu → groups items by section
└─ Section → props: title, items
└─ MenuItem → props: item (name, price, special, soldOut)Build bottom-up: get MenuItem right with one hard-coded item, then Section mapping a few items, then the full Menu. Checking each small piece before combining them is much faster than debugging everything at once.