Итоги

В этом уроке вы узнали, что:

• JSX превращается в вызовы функций JavaScript: <h1>Hi</h1> становится jsx("h1", { children: "Hi" }), который создаёт объект, из которого React строит элемент.
• Компонент возвращает один элемент. Несколько элементов помещают в один общий элемент или во фрагмент <>…</>, который ничего не добавляет на страницу.
• Каждый элемент закрыт — закрывающим тегом или косой чертой: <img />, <br />, <input />.
• Класс элемента — это className, а у подписи есть htmlFor. Если написать class или for, React предупредит об этом в консоли.
• В фигурных скобках находятся выражения JavaScript: {festival}, {price * 2}, {days.join(" и ")}. Тексты и числа показываются, true, false, null и undefined — нет, а объекты показать нельзя. Инструкции вроде if пишутся над return.
• Атрибуты получают значения в скобках, без кавычек: src={logo}, alt={`${festival} — логотип`}.
• style — это объект с именами в camelCase: style={{ color: "teal", fontSize: 24 }}. Число означает пиксели.
• Комментарий в JSX — это {/* … */}.

В следующем уроке, «Компоненты», вы разделите приложение на компоненты в отдельных файлах и будете импортировать их там, где они нужны.

Но сначала небольшая практика: карточка одной группы. Её данные лежат в объекте band в App, а стили карточки — в style.css.