Každá komponenta ve vlastním souboru

Skutečné aplikace v Reactu mají každou komponentu ve vlastním souboru, pojmenovaném po ní: Hlavicka v Hlavicka.jsx, Paticka v Paticka.jsx. Soubory zůstanou krátké, komponentu najdete podle názvu souboru a jednu komponentu můžete použít na několika místech aplikace.

Každý takový soubor je modul: část programu s vlastními proměnnými a funkcemi. Co v modulu vytvoříte, existuje jen v něm, takže App.jsx funkci napsanou v Hlavicka.jsx nevidí. Aby App mohla použít komponentu Hlavicka, jsou potřeba dvě věci:

1. Hlavicka.jsx komponentu exportuje, tedy nabídne ji ostatním souborům. To dělá export default před funkcí.
2. App.jsx ji importuje řádkem na začátku souboru.

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

// App.jsx
import Hlavicka from "./Hlavicka.jsx";

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

default znamená, že je to hlavní věc souboru, takzvaný výchozí export. Soubor může mít nejvýš jeden. Název za import je jméno, které komponenta dostane v App.jsx. Mohli byste zvolit jakékoli, ale používejte název komponenty, ať každý ví, o co jde.

Text v uvozovkách říká, kde soubor je. ./ znamená „složka, ve které je tento soubor“, takže "./Hlavicka.jsx" je soubor Hlavicka.jsx vedle App.jsx. Funguje to jako adresy v HTML: "./komponenty/Hlavicka.jsx" by byl soubor ve složce komponenty a "../Hlavicka.jsx" o složku výš. Název bez ./, třeba "react", není váš soubor, ale balíček: kód, který napsal někdo jiný a který je v projektu nainstalovaný.

Teď už přečtete celý main.jsx: importuje createRoot z balíčku react-dom/client (ke složeným závorkám se dostaneme v dalším cvičení), App z App.jsx a styly ze style.css. Import stylů je vloží do stránky.

Cvičení má dva nové soubory, Hlavicka.jsx a Paticka.jsx, oba prázdné. Jejich záložky jsou nad editorem. Program zatím zůstane v App.jsx, vlastní soubor dostane později v této lekci.

Typické chyby:

• Bez export default je stránka prázdná a konzole hlásí Element type is invalid: … but got: object. You likely forgot to export your component from the file it's defined in… (komponenta asi není exportovaná).
• Bez řádku s import: ReferenceError: Hlavicka is not defined.
• Bez ./ ukáže červená zpráva pod náhledem, že balíček „Hlavicka.jsx“ tu importovat nejde. Když se název liší od názvu souboru, třeba "./hlavicka.jsx", zpráva řekne, že takový soubor neexistuje.