Wenn etwas schiefgeht

Jedem passieren Fehler, deshalb ist es gut zu wissen, wo du von ihnen erfährst. Es gibt zwei Stellen.

Die Konsole unter der Seite zeigt Fehler, die auftreten, während die App läuft, und Warnungen von React. Verwendet eine Komponente zum Beispiel einen Namen, den es nicht gibt, zeigt die Konsole:

ReferenceError: Progamm is not defined
    at App (App.jsx:10)
An error occurred in the <App> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

Der Fehler ist in der Komponente App aufgetreten, in Zeile 10 von App.jsx. Die Meldung darunter stammt von React und sagt, in welcher Komponente der Fehler passiert ist; ihren Hinweis auf Error Boundaries kannst du vorerst überspringen. Wenn eine Komponente so scheitert, kann React die App nicht anzeigen, und die Seite bleibt leer.

Warnungen sind auch rot, aber die App läuft weiter: React weist darauf hin, dass etwas nicht stimmt, zum Beispiel beim <willkommen /> aus dem Quiz. Wenn die Seite nicht tut, was du erwartest, wirf einen Blick in die Konsole.

Direkt unter der Vorschau, über der Konsole, erscheint eine rote Meldung, wenn der Code falsch geschrieben ist, zum Beispiel bei einem Tag, das nicht geschlossen ist. Mit so einem Fehler lassen sich die Dateien nicht in JavaScript umwandeln, das der Browser ausführt, die App läuft also gar nicht. Die Meldung sagt, wo der Fehler liegt:

App.jsx(9,14): JSX element 'p' has no corresponding closing tag.

Das ist Zeile 9 von App.jsx, Spalte 14 (das 14. Zeichen der Zeile): Das p, das dort beginnt, hat kein </p>. Diese Meldungen sind auf Englisch, genau wie die in der Konsole.