Štítky a kapitoly

Kuchařka funguje, teď vám pomůže vybírat. Štítky řeknou, které recepty jsou vegetariánské a které rychlé, a kapitoly oddělí polévky od hlavních jídel. A moučníky? Ty zatím žádné nejsou a kuchařka to má napsat.

Štítky. Vegetariánský recept dostane štítek Vegetariánské a recept, který trvá méně než 20 minut, štítek Rychlé. Každý štítek je span s třídou stitek, v kartě pod názvem. Recept může mít oba štítky, jeden z nich, nebo žádný.

Kapitoly. Kuchařka má tři kapitoly: Polévky (recepty, jejichž chod je "polévka"), Hlavní jídla ("hlavní jídlo") a Moučníky ("moučník"). Každá kapitola je section s názvem v h2 a pod ním s kartami jejích receptů, v pořadí, v jakém jsou v poli. Kapitola bez receptů pod svým názvem napíše Zatím tu nejsou žádné recepty.

Tři kapitoly, které vypadají stejně, jsou práce pro komponentu: je pro ni připravený nový prázdný soubor Kapitola.jsx. V props může dostat název kapitoly a její recepty a App může recepty pro každou kapitolu vyfiltrovat.

Tip: u každé podmínky si rozmyslete, co dává. recept.vegetarianske je true, nebo false. Ale jaká je délka prázdného pole a co React ukáže, když ji dostane?

A to je celý projekt. Vaše kuchařka je postavená z dat: přidejte do recepty.js recept, třeba moučník, a objeví se ve správné kapitole se správnými štítky, aniž byste změnili jedinou komponentu. Tak fungují aplikace v Reactu: komponenty říkají, jak mají data vypadat, a stránka se řídí daty. Zatím se ale data, když je stránka otevřená, nikdy nezmění. V další lekci, Události, začnou vaše komponenty reagovat na uživatele: na kliknutí a na psaní.