Dvě stránky v jedné aplikaci

Starý web měl dva soubory HTML a odkaz načetl ten druhý. Aplikace v Reactu má jedinou stránku a React do ní vykreslí, cokoli říká stav. Kterou stránku návštěvník vidí, je proto taky stav: stranka v komponentě App, buď "uvod", nebo "program". App si nechá záhlaví a zápatí a v main ukáže jednu ze dvou stránek, pomocí podmíněného operátoru z lekce Seznamy a podmínky:

<main className="mx-auto max-w-5xl px-4 md:px-8">
    {stranka === "uvod" ? <Uvod /> : <Program />}
</main>

Každá stránka je komponenta ve vlastním souboru. Program.jsx je hotový, s nadpisem, odstavcem a hlavičkou tabulky ze staré stránky s programem. Uvod.jsx je prázdný: přesunou se do něj z App.jsx tři sekce úvodní stránky. Komponenta vrací jeden prvek a sekce jsou tři, takže je Uvod vrátí ve fragmentu, <>…</>.

Tlačítka, ne odkazy. Tlačítka v záhlaví mění stav, stejně jako záložky dnů v lekci Sdílený stav: Hlavicka dostane v props funkci, která ho mění, <Hlavicka onPrejit={setStranka} />, a její tlačítka ji zavolají, třeba onClick={() => onPrejit("program")}. Jsou to tlačítka, protože nevedou na jinou adresu: mění něco na téhle stránce. A logo vede na úvod, jako na starém webu.

Většina skutečných webů v Reactu používá pro stránky router, třeba React Router, o kterém mluví konec kurzu Reactu. Každá stránka s ním má vlastní adresu, třeba /program, takže v prohlížeči funguje tlačítko Zpět a na každou stránku se dá poslat odkaz. Pro dvě stránky našeho kina stačí jeden stav. Rozdíl ale poznáte: když návštěvník stránku znovu načte, je zase na úvodu, protože stav začíná hodnotou "uvod".