Pojmenované exporty

export default exportuje jednu věc, tu hlavní. Soubor ale může exportovat i víc věcí, každou pod jejím vlastním názvem. Těm se říká pojmenované exporty a před každou funkci se píše jen export:

// Stitky.jsx
export function StitekNovinka() {
    return <span className="stitek">Novinka</span>;
}

export function StitekVyprodano() {
    return <span className="stitek">Vyprodáno</span>;
}

Import pojmenovaných exportů vyjmenuje jejich názvy ve složených závorkách, oddělené čárkami:

import { StitekNovinka, StitekVyprodano } from "./Stitky.jsx";

Právě na složené závorky si dejte pozor:

• Výchozí export se importuje bez závorek a jméno si zvolíte sami: import Hlavicka from "./Hlavicka.jsx";
• Pojmenované exporty se importují se závorkami, a to přesně pod svými názvy: import { StitekNovinka } from "./Stitky.jsx";. Importujete jen ty, které potřebujete.

Proto je v main.jsx řádek import { createRoot } from "react-dom/client";: createRoot je pojmenovaný export balíčku. Soubor může mít obojí, jeden výchozí export a k tomu libovolný počet pojmenovaných. A exportovat jde jakákoli hodnota, nejen komponenta, třeba export const festival = "Letní zvuky";.

Kdy použít který? Většina projektů v Reactu dává každé komponentě vlastní soubor s výchozím exportem, jako jste to udělali s komponentou Hlavicka. Pojmenované exporty se hodí do souboru s několika malými věcmi, které k sobě patří, třeba s pár štítky nebo vstupenkami, nebo s daty, která používá víc komponent.

Častou chybou je splést si je. Import bez závorek potřebuje výchozí export a import se závorkami pojmenovaný export s tím názvem. Když k sobě nesedí, import dostane undefined, stránka je prázdná a konzole hlásí Element type is invalid: … but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. (komponenta asi není exportovaná, nebo jste si spletli výchozí a pojmenovaný import).