Значения в фигурных скобках

До сих пор в вашем JSX был только неизменный текст. Но компонент — это функция, поэтому перед return в ней может быть любой JavaScript, например переменные. Чтобы показать значение переменной в JSX, поместите её в фигурные скобки:

export default function App() {
    const festival = "Летние звуки";
    const fridayPrice = 45;

    return (
        <main>
            <h1>{festival}</h1>
            <p>Билет на пятницу: €{fridayPrice}</p>
            <p>На двоих: €{fridayPrice * 2}</p>
        </main>
    );
}

Страница покажет:

Летние звуки
Билет на пятницу: €45
На двоих: €90

Без скобок <h1>festival</h1> показало бы слово festival. Между скобками находится JavaScript, и туда можно поместить любое выражение — всё, что имеет значение: переменную, вычисление вроде fridayPrice * 2 или вызов вроде festival.toUpperCase().

Тексты и числа показываются как есть. Массив показывает свои элементы, склеенные вместе: {["пятница", "суббота"]} покажет пятницасуббота, поэтому сначала соедините их: {days.join(" и ")}. true, false, null и undefined не показывают ничего, и это пригодится в уроке «Списки и условия». Объект показать нельзя вовсе: {band} останавливает приложение, а в консоли появляется Objects are not valid as a React child. Показывайте вместо него его свойства, например {band.name}.

В скобки можно поместить только выражение. Инструкция вроде if или for значения не имеет, поэтому {if (open) { … }} — ошибка в коде (Expression expected.). Пишите такое над return, где допустим любой JavaScript; как показывать что-то в JSX только иногда, расскажет урок «Списки и условия».