Переменные в JSX

В этом решении мы создаём переменные внутри компонента и выводим их в JSX с помощью фигурных скобок.

Создание переменных

const name = "Макс";
const role = "React разработчик";
const emoji = "👋";

Мы объявляем три переменные с помощью const внутри компонента. Эти переменные хранят строковые значения - имя, роль и эмодзи. Переменные создаются до return, чтобы их можно было использовать в JSX.

Вывод переменных в JSX

<div className="emoji">
    {emoji}
</div>

Чтобы вывести значение переменной в JSX, мы оборачиваем её в фигурные скобки {}. React воспринимает всё внутри фигурных скобок как JavaScript код и вычисляет его значение.

Интерполяция в JSX

<h1 className="title">
    Привет! Я {name}
</h1>

Мы можем комбинировать обычный текст и переменные прямо внутри элемента. React склеивает текст "Привет! Я " со значением переменной name. Это называется интерполяцией - встраивание переменных в текст.

Использование className

<div className="welcome-card">

В JSX атрибут class называется className, потому что class - это зарезервированное слово в JavaScript. Мы используем className для добавления CSS классов к элементам.