Karta receptu

Čas na projekt! Tento miniprojekt využije komponenty, props, seznamy a podmínky z minulých lekcí. Stejně jako v miniprojektech kurzu JavaScriptu pokyny říkají, co má stránka dělat, a jak to napíšete, je na vás.

Projekt. Postavíte kuchařku. Každý recept dostane kartu s názvem, s tím, jak dlouho trvá, a s tím, co do něj patří. Ve třech cvičeních vytvoříte kartu, ukážete všechny recepty i se surovinami a nakonec přidáte štítky pro vegetariánské a rychlé recepty a rozdělíte kuchařku do kapitol.

Soubory. Recepty jsou v souboru recepty.js, v poli recepty, které soubor exportuje. Každý recept vypadá takhle:

{
    id: 1,
    nazev: "Česnečka",
    chod: "polévka",
    minuty: 15,
    vegetarianske: true,
    suroviny: ["česnek", "brambory", "kmín", "chléb"],
}

App.jsx je už importuje. KartaReceptu.jsx je prázdný: komponentu, která do něj patří, napíšete celou sami.

Úkol. Napište komponentu KartaReceptu. Dostane v props recept a ukáže ho v prvku article s třídou recept: název v h3 (h2 později dostanou kapitoly kuchařky) a pod ním, jak dlouho recept trvá a kolik má surovin:

Česnečka
15 minut
Počet surovin: 4

App zatím ukáže jen kartu prvního receptu, recepty[0]. (Všechny přijdou na řadu v dalším cvičení.)

Tip: počet surovin je délka pole suroviny receptu.