Každý tag uzavřený
V HTML některé prvky nemají zavírací tag, třeba <img>, <br> a <input>. V JSX musí být uzavřený každý prvek. Prvek s obsahem dostane zavírací tag jako v HTML a prvek bez obsahu se může uzavřít sám lomítkem před >:
<img src="/react.svg" alt="Logo" />
<br />
<input placeholder="Váš e-mail" />Lomítko znáte z <Uvitani />. Bez něj JSX neví, kde prvek končí. Aplikace se nespustí a červená zpráva pod náhledem hlásí třeba:
App.jsx(4,14): JSX element 'img' has no corresponding closing tag.Totéž platí pro prvky s obsahem: <p> bez </p> prohlížeč v HTML promine, v JSX je to chyba.
Festival zatím nemá logo, a tak si v tomto cvičení půjčí logo Reactu, které je na našem webu na adrese /react.svg.
Jak psát:
Pokyny
Nad nadpis přidejte logo: obrázek img s src="/react.svg" a alt="Logo".
První odstavec má v kódu dva řádky, ale stránka je ukáže jako jeden, protože JSX stejně jako HTML udělá ze zalomení řádku v textu mezeru. Za Pátek a sobota dejte zalomení řádku br, aby věta o pódiích začínala na novém řádku.
Mezi druhý odstavec a tlačítko přidejte textové pole input s placeholder="Váš e-mail".