Eine Datei für jede Komponente

Echte React-Apps legen jede Komponente in eine eigene Datei, die nach der Komponente benannt ist: Kopfzeile in Kopfzeile.jsx, Fusszeile in Fusszeile.jsx. Die Dateien bleiben kurz, du findest eine Komponente am Namen ihrer Datei, und eine Komponente lässt sich an mehreren Stellen der App verwenden.

Jede solche Datei ist ein Modul: ein Teil des Programms mit eigenen Variablen und Funktionen. Was du in einem Modul anlegst, gibt es nur in diesem Modul, deshalb kann App.jsx eine Funktion aus Kopfzeile.jsx nicht sehen. Damit App Kopfzeile verwenden kann, braucht es zwei Dinge:

1. Kopfzeile.jsx exportiert die Komponente, bietet sie also anderen Dateien an. Das macht export default vor der Funktion.
2. App.jsx importiert sie mit einer Zeile am Anfang der Datei.

// Kopfzeile.jsx
export default function Kopfzeile() {
    return (
        <header>
            <h1>Sommerklang</h1>
            <p>Freitag und Samstag, drei Bühnen</p>
        </header>
    );
}

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

export default function App() {
    return (
        <>
            <Kopfzeile />
            <Programm />
        </>
    );
}

default heißt, dass es das Hauptding der Datei ist, und eine Datei hat höchstens eins. Der Name nach import ist der Name, den die Komponente in App.jsx bekommt. Du könntest einen beliebigen wählen, aber nimm den Namen der Komponente, damit alle wissen, was gemeint ist.

Der Text in Anführungszeichen sagt, wo die Datei liegt. ./ heißt „der Ordner, in dem diese Datei liegt“, "./Kopfzeile.jsx" ist also die Datei Kopfzeile.jsx neben App.jsx. Das funktioniert wie Adressen in HTML: "./komponenten/Kopfzeile.jsx" läge im Ordner komponenten und "../Kopfzeile.jsx" einen Ordner höher. Ein Name ohne ./, etwa "react", ist keine deiner Dateien: Er ist ein Paket, Code, den jemand anderes geschrieben hat und der im Projekt installiert ist.

Jetzt kannst du main.jsx ganz lesen: Es importiert createRoot aus dem Paket react-dom/client (die geschweiften Klammern kommen in der nächsten Übung), App aus App.jsx und style.css, das Stylesheet. Der Import eines Stylesheets setzt seine Styles in die Seite.

Diese Übung hat zwei neue Dateien, Kopfzeile.jsx und Fusszeile.jsx, und beide sind leer. Ihre Tabs sind über dem Editor. Programm bleibt vorerst in App.jsx; später in dieser Lektion bekommt es eine eigene Datei.

Typische Fehler:

• Ohne export default ist die Seite leer, und die Konsole sagt Element type is invalid: … but got: object. You likely forgot to export your component from the file it's defined in…
• Ohne die import-Zeile: ReferenceError: Kopfzeile is not defined.
• Ohne ./ meldet die rote Meldung unter der Vorschau, dass das Paket „Kopfzeile.jsx“ nicht importiert werden kann. Bei einem Namen, der anders geschrieben ist als der der Datei, etwa "./kopfzeile.jsx", meldet sie, dass es die Datei nicht gibt.