Shrnutí

V této lekci jste se naučili, že:

• JSX se mění na volání funkcí JavaScriptu: <h1>Ahoj</h1> se změní na jsx("h1", { children: "Ahoj" }), které vrátí objekt, podle kterého React prvek vytvoří.
• Komponenta vrací jeden prvek. Více prvků patří do jednoho prvku kolem nich nebo do fragmentu <>…</>, který na stránku nic nepřidá.
• Každý prvek je uzavřený, zavíracím tagem nebo lomítkem: <img />, <br />, <input />.
• Třída prvku je className a popisek má htmlFor. S class nebo for React varuje v konzoli.
• Ve složených závorkách jsou výrazy JavaScriptu: {festival}, {cena * 2}, {dny.join(" a ")}. Texty a čísla se ukážou, true, false, null a undefined ne a objekty ukázat nejde. Příkazy jako if patří nad return.
• Atributy dostanou hodnoty v závorkách, bez uvozovek: src={logo}, alt={`Logo festivalu ${festival}`}.
• style je objekt s názvy v camelCase: style={{ color: "teal", fontSize: 24 }}. Číslo znamená pixely.
• Komentář v JSX je {/* … */}.

V další lekci, Komponenty, rozdělíte aplikaci na komponenty ve vlastních souborech a budete je importovat tam, kde je potřebujete.

Nejdřív si ale vše procvičte na kartě jedné kapely. Její data jsou v objektu kapela v App a vzhled karty je v style.css.