Vlastní komponenta

Stránka z jedné velké komponenty by se brzy špatně četla. Proto ji rozdělíte na menší komponenty, každou s vlastním názvem a úkolem. Tady je druhá komponenta, Uvitani, ve stejném souboru jako App:

function Uvitani() {
    return <p>Vítejte na festivalu!</p>;
}

export default function App() {
    return (
        <main>
            <h1>Letní zvuky</h1>
            <Uvitani />
            <Uvitani />
        </main>
    );
}

App používá Uvitani, jako by to byl tag z HTML: <Uvitani />. Lomítko před > tag hned uzavře, protože uvnitř nic není. React zavolá funkci Uvitani a na její místo vloží to, co vrátí, a to tolikrát, kolikrát ji použijete. Stránka pak obsahuje toto HTML:

<main>
    <h1>Letní zvuky</h1>
    <p>Vítejte na festivalu!</p>
    <p>Vítejte na festivalu!</p>
</main>

Žádné <Uvitani> na stránce není, jen to, co funkce vrátila. Komponenta je váš vlastní kus stránky, který můžete použít všude, kde ho potřebujete. V lekci Props bude jedna komponenta ukazovat různé kapely, každou s jejím názvem.

Název musí začínat velkým písmenem: podle toho React pozná vaše komponenty od tagů z HTML. <main> je prvek z HTML, <Uvitani /> je komponenta.

export default má jen App, protože main.jsx potřebuje jen App. Uvitani se používá jen v tomto souboru.