When Something Goes Wrong

Mistakes happen to everyone, so it's good to know where you find out about them. There are two places.

The console under the page shows errors that happen while the app runs, and React's warnings. When a component uses a name that doesn't exist, for example, the console shows:

ReferenceError: Linup 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.

The error happened in the component App, on line 10 of App.jsx. The message under it comes from React and says in which component the error happened; you can skip its advice about error boundaries for now. When a component fails like this, React can't show the app, so the page is empty.

Warnings are red too, but the app keeps running: React tells you that something is wrong, such as the <welcome /> from the quiz. Whenever the page doesn't do what you expect, look at the console.

Right under the preview, above the console, a red message shows a mistake in how the code is written, such as a tag that isn't closed. With such a mistake, the files can't be turned into JavaScript that the browser runs, so the app doesn't run at all. The message says where the mistake is:

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

That's line 9 of App.jsx, column 14 (the 14th character on the line): the p that starts there has no </p>.