Rozdělení stránky

Zatím byla celá stránka festivalu v komponentě App. Na nadpis a odstavec to stačí. Skutečná aplikace ale má hlavičku, program, vstupenky, patičku… a App by brzy měla stovky řádků, ve kterých se nic nedá najít.

Proto se stránka v Reactu rozděluje na komponenty, jednu pro každou část. Napsat komponentu už umíte: je to funkce, jejíž název začíná velkým písmenem a která vrací JSX. Tady je hlavička festivalové stránky jako samostatná komponenta:

function Hlavicka() {
    return (
        <header>
            <h1>Letní zvuky</h1>
            <p>Pátek a sobota, tři pódia</p>
        </header>
    );
}

export default function App() {
    return (
        <>
            <Hlavicka />
            <Program />
        </>
    );
}

Hlavicka vrací svou část stránky a App z částí skládá celek: <Hlavicka /> znamená „zavolej funkci Hlavicka a dej sem, co vrátí“. Stránka vypadá úplně stejně jako předtím. App se ale teď čte jako obsah knihy: nejdřív hlavička, pak program. Když budete chtít hlavičku změnit, víte, kde ji hledat. (Program se píše stejně a v tomto cvičení ho napíšete.)

Pár pravidel, která už znáte:

• Název začíná velkým písmenem: Hlavicka, ne hlavicka. Malým písmenem začínají prvky HTML jako <header>, velkým vaše komponenty.
• Komponenta, která mezi svými tagy nic nemá, se píše jako jeden samouzavírací tag: <Hlavicka />.
• Komponenta vrací jeden prvek nebo fragment <>…</>, stejně jako App.

Jak velká má komponenta být? Přesné pravidlo neexistuje. Dobré znamení je, když ji pojmenujete jedním nebo dvěma slovy: hlavička, program, karta kapely. Kdybyste na popis toho, co komponenta dělá, potřebovali dlouhý název, nejspíš toho dělá moc a dá se rozdělit dál.