Summary

In this lesson, you learned that:

• React makes the page from your data. You describe what the page should show, and when the data changes, React updates the page itself, with no querySelector() or textContent.
• A React app has index.html with an empty <div id="root">, main.jsx, which shows <App /> in it and is the same in every exercise, and App.jsx, where you work.
• A component is a function whose name starts with a capital letter and which returns JSX, tags written right in the code. export default function App() lets main.jsx import App.
• JSX of several lines goes in parentheses after return, all in one element, such as main.
• You use a component as a tag, <Welcome />, as many times as you need. A name with a small letter, such as <welcome />, is an HTML tag, not your component.
• A mistake in how the code is written shows in red under the preview, with the file, line and column, and the app doesn't run. Errors while the app runs and React's warnings show in the console.

In the next lesson, JSX, you'll look more closely at the tags in your components: where they differ from HTML, and how to put values from your code into them.

But first, a little practice: a page for the festival's tickets. App.jsx has only the heading, and you'll write two components for it yourself.