Zusammenfassung

In dieser Lektion hast du gelernt:

• Eine Seite wird in Komponenten aufgeteilt, eine für jeden Teil, und App setzt sie wie ein Inhaltsverzeichnis zusammen. Der Name einer Komponente beginnt mit einem Großbuchstaben, und sie wird als Tag verwendet: <Kopfzeile />.
• Jede Komponente liegt meist in einer eigenen Datei, die nach ihr benannt ist: Kopfzeile.jsx. Eine Datei ist ein Modul: Was darin steht, gibt es nur dort, außer die Datei exportiert es.
• export default function Kopfzeile() exportiert die Hauptsache der Datei. import Kopfzeile from "./Kopfzeile.jsx"; importiert sie, ohne geschweifte Klammern, unter einem Namen deiner Wahl.
• export function FreitagTicket() ist ein benannter Export, und eine Datei kann viele haben. import { FreitagTicket, WochenendeTicket } from "./Tickets.jsx"; importiert sie, mit geschweiften Klammern, unter genau ihren Namen.
• ./ in einem Pfad ist der Ordner der Datei mit dem Import, und ../ ist ein Ordner höher. Ein Name ohne diese, etwa "react", ist ein Paket.
• Ein fehlender Export oder ein Import mit den falschen Klammern ergibt Element type is invalid in der Konsole, ein fehlender Import ergibt ReferenceError: … is not defined, und ein falscher Pfad zeigt sich in der roten Meldung unter der Vorschau.
• Komponenten können andere Komponenten verwenden, und zusammen bilden sie einen Baum. Jede Datei importiert die Komponenten, die sie verwendet. Eine Komponente lässt sich beliebig oft verwenden, und wenn du sie änderst, ändert sich jede Kopie.

In der nächsten Lektion, Props, gibst du Komponenten ihre eigenen Daten, damit jede Bandkarte eine andere Band zeigt.

Vorher aber noch etwas Übung: eine Seite mit praktischen Informationen für die Besucher des Festivals. App.jsx ist fast leer, und die Komponenten und ihre Dateien schreibst du selbst.