Summary

In this lesson, you learned that:

• JSX turns into calls of JavaScript functions: <h1>Hi</h1> becomes jsx("h1", { children: "Hi" }), which makes an object that React builds the element from.
• A component returns one element. Several elements go into one element around them, or into a fragment <>…</>, which adds nothing to the page.
• Every element is closed, with its closing tag or with a slash: <img />, <br />, <input />.
• The class of an element is className, and a label has htmlFor. With class or for, React warns in the console.
• Curly braces hold JavaScript expressions: {festival}, {price * 2}, {days.join(" and ")}. Texts and numbers show, true, false, null and undefined don't, and objects can't. Statements such as if go above return.
• Attributes get values in braces, without quotes: src={logo}, alt={`${festival} logo`}.
• style is an object with camelCase names: style={{ color: "teal", fontSize: 24 }}. A number means pixels.
• A comment in JSX is {/* … */}.

In the next lesson, Components, you'll split the app into components in files of their own, and import them where you need them.

But first, a little practice: a card for one band. Its data is in the object band in App, and the card's styles are in style.css.