JSX je JavaScript

JSX vypadá jako HTML, ale prohlížeče mu nerozumí. Než se váš kód spustí, nástroj každý kus JSX převede na obyčejné volání funkce. (V projektu na vašem počítači je tím nástrojem Vite, tady to dělá stránka cvičení.) Tento řádek:

const nadpis = <h1>Letní zvuky</h1>;

se zjednodušeně řečeno změní na tohle:

const nadpis = jsx("h1", { children: "Letní zvuky" });

Funkce jsx() pochází z Reactu. Vytvoří objekt, který prvek popisuje: jeho tag a to, co je uvnitř, tedy jeho potomky (anglicky children). Z těchto objektů pak React vytvoří skutečné prvky na stránce. Sami jsx() psát nebudete, ale když víte, že tam je, pochopíte pravidla JSX, o kterých je tato lekce.

První pravidlo: komponenta vrací jeden prvek. Funkce vrací jednu hodnotu a dva prvky vedle sebe by byly dvě volání vedle sebe, jsx("h1", …) jsx("ul", …), a to není JavaScript. Proto červená zpráva pod náhledem hlásí JSX expressions must have one parent element. Vložte je do jednoho prvku, třeba do main, a budou jednou hodnotou.

Někdy ale prvek navíc na stránce nechcete. Komponenta, která vrací několik položek seznamu, je nemůže vložit do prvku div, protože v ul mají být jen prvky li. Na to má JSX fragment, prázdný tag <>…</>. Drží prvky v kódu pohromadě, ale na stránku nic nepřidá:

function SobotniKapely() {
    return (
        <>
            <li>Sový sbor, 16:00</li>
            <li>Plecháčci, 21:00</li>
        </>
    );
}

<SobotniKapely /> v ul vloží do seznamu rovnou dva prvky li.