JSX синтаксис

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, позволяющее описывать структуру пользовательского интерфейса в виде декларативного кода, напоминающего HTML. Он не является обязательной частью JavaScript, но используется в React для удобного создания компонентов.

JSX позволяет писать компоненты как функции или классы, возвращающие разметку. Несмотря на визуальное сходство с HTML, JSX имеет свои особенности:

const element = <h1>Привет, мир!</h1>;

При компиляции JSX преобразуется в вызовы React.createElement, которые создают виртуальные DOM-элементы.

Встраивание выражений

В JSX можно использовать любые выражения JavaScript, заключая их в фигурные скобки {}:

const name = "Алексей";
const element = <h1>Привет, {name}!</h1>;

Сюда входят арифметические операции, вызовы функций, тернарные операторы и другие выражения:

const isLoggedIn = true;
const element = <div>{isLoggedIn ? "Вы вошли" : "Гость"}</div>;

Важно: нельзя использовать инструкции (if, for) напрямую внутри фигурных скобок; для условного рендеринга применяются тернарные операторы или вспомогательные функции.

Атрибуты в JSX

Атрибуты в JSX напоминают HTML, но с некоторыми отличиями:

  • Имена атрибутов пишутся в camelCase, а не в нижнем регистре:
const element = <input type="text" maxLength={10} />;
  • Значения атрибутов могут быть строками, числами, логическими значениями или выражениями:
const size = 30;
const element = <div style={{ width: size + "px" }}>Контент</div>;
  • Для булевых атрибутов достаточно указать их имя:
const element = <input disabled />;

Стиль и классы

JSX не использует class для CSS-классов. Вместо этого применяется атрибут className:

const element = <div className="container">Контент</div>;

Для inline-стилей применяется объект style, где свойства пишутся в camelCase:

const style = { backgroundColor: "blue", fontSize: "16px" };
const element = <div style={style}>Текст синим цветом</div>;

Вложенные элементы

JSX поддерживает вложенные элементы, что позволяет строить сложные интерфейсы:

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Абзац текста</p>
    <ul>
      <li>Пункт 1</li>
      <li>Пункт 2</li>
    </ul>
  </div>
);

Каждый вложенный элемент должен быть закрыт, включая одиночные теги (<img />, <input />, <br />).

Фрагменты

Чтобы избежать лишних DOM-узлов, JSX поддерживает фрагменты. Они позволяют возвращать несколько элементов без оборачивания в <div>:

const element = (
  <>
    <h1>Заголовок</h1>
    <p>Абзац</p>
  </>
);

Фрагменты могут быть пустыми <>...</> или с явным тегом <React.Fragment>.

Рендеринг массивов

JSX позволяет рендерить списки элементов через метод map:

const numbers = [1, 2, 3];
const listItems = numbers.map((num) => <li key={num}>{num}</li>);
const element = <ul>{listItems}</ul>;

Ключевой момент: каждому элементу списка нужно назначать уникальный key, чтобы React корректно обновлял виртуальный DOM.

Условный рендеринг

Для условного отображения элементов применяются тернарные операторы или логическое И &&:

const isAdmin = true;
const element = (
  <div>
    {isAdmin && <button>Удалить</button>}
    {!isAdmin ? <p>Нет доступа</p> : <p>Доступ разрешен</p>}
  </div>
);

Комментарии в JSX

Комментарии внутри JSX пишутся особым образом:

const element = (
  <div>
    {/* Это комментарий */}
    <p>Текст</p>
  </div>
);

Обычные JavaScript-комментарии // или /* */ работают только вне JSX-блока.

Безопасность и экранирование

JSX автоматически экранирует значения выражений, предотвращая XSS-атаки:

const userInput = "<script>alert('hi')</script>";
const element = <div>{userInput}</div>; // Безопасно: скрипт не выполнится

Для вставки необработанного HTML используется атрибут dangerouslySetInnerHTML, но его применение требует осторожности.

Отличия JSX от HTML

  • JSX использует className вместо class и htmlFor вместо for.
  • Все теги должны быть закрыты.
  • Выражения JS вставляются в {}.
  • Булевы атрибуты пишутся только именем.
  • Стиль задаётся объектом style с camelCase свойствами.

Компиляция JSX

JSX нельзя использовать напрямую в браузере. Инструменты вроде Babel преобразуют JSX в React.createElement:

const element = <h1>Привет</h1>;
// Превращается в:
const element = React.createElement("h1", null, "Привет");

Такой подход обеспечивает совместимость с обычным JavaScript и виртуальным DOM React.

JSX представляет собой мощный инструмент для создания динамических интерфейсов, объединяя декларативный синтаксис разметки с выразительной силой JavaScript. Он позволяет легко структурировать компоненты, управлять состоянием и создавать сложные UI без громоздких манипуляций с DOM.

Оглавление