Benannte Exporte

export default exportiert eine einzige Sache, die Hauptsache der Datei. Eine Datei kann aber auch mehrere Dinge exportieren, jedes unter seinem eigenen Namen. Das sind benannte Exporte, und du schreibst vor jede Funktion nur export:

// Etiketten.jsx
export function NeuEtikett() {
    return <span className="etikett">Neu</span>;
}

export function AusverkauftEtikett() {
    return <span className="etikett">Ausverkauft</span>;
}

Beim Import benannter Exporte listest du ihre Namen in geschweiften Klammern auf, durch Kommas getrennt:

import { NeuEtikett, AusverkauftEtikett } from "./Etiketten.jsx";

Auf die geschweiften Klammern musst du achten:

• Ein Default-Export wird ohne Klammern importiert, und den Namen wählst du selbst: import Kopfzeile from "./Kopfzeile.jsx";
• Benannte Exporte werden mit Klammern importiert, unter genau ihren Namen: import { NeuEtikett } from "./Etiketten.jsx";. Du importierst nur die, die du brauchst.

Deshalb steht in main.jsx import { createRoot } from "react-dom/client";: createRoot ist ein benannter Export des Pakets. Eine Datei kann beides haben, einen Default-Export und beliebig viele benannte. Und sie kann jeden Wert exportieren, nicht nur Komponenten, zum Beispiel export const festival = "Sommerklang";.

Welchen verwendest du wann? Die meisten React-Projekte geben jeder Komponente eine eigene Datei mit einem Default-Export, so wie du es bei Kopfzeile gemacht hast. Benannte Exporte passen zu einer Datei mit mehreren kleinen Dingen, die zusammengehören, etwa ein paar Etiketten oder Tickets, oder zu Daten, die mehrere Komponenten verwenden.

Die beiden zu verwechseln ist ein häufiger Fehler. Ein Import ohne Klammern braucht einen Default-Export, und einer mit Klammern braucht einen benannten Export mit diesem Namen. Passen sie nicht zusammen, bekommt der Import undefined, die Seite ist leer, und die Konsole meldet 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.