> Что такое JSX в React и зачем он нужен (React, JavaScript)

Короткий ответ

JSX - это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript-файлов в React. Он нужен для декларативного описания структуры UI, делая код более читаемым и удобным. Под капотом JSX преобразуется в вызовы React.createElement, создающие виртуальные DOM-узлы.

Подробное объяснение

JSX (JavaScript XML) - это не обязательная, но широко используемая часть React. Он решает проблему смешивания разметки и логики: вместо разделения файлов по технологиям (HTML/CSS/JS), React предлагает разделять по компонентам, где вся логика и разметка живут вместе. JSX делает этот код интуитивно понятным.

Без JSX пришлось бы писать вложенные вызовы React.createElement, что быстро становится громоздким. JSX транслируется в эти вызовы на этапе сборки (обычно через Babel). Важно: JSX не является шаблонизатором - это синтаксический сахар, который даёт полный доступ к возможностям JavaScript (переменные, условия, циклы прямо в разметке).

На практике

JSX используется в каждом React-компоненте. Основные правила: возвращать один корневой элемент (или использовать Fragment), заключать JavaScript-выражения в фигурные скобки {}, использовать className вместо class, обрабатывать события через camelCase (onClick). JSX защищает от XSS-атак - все значения экранируются перед рендерингом.

Пример кода

JSX
// JSX-синтаксис
function Greeting({ name, isLoggedIn }) {
  return (
    <div className="greeting">
      <h1>Привет, {name}!</h1>
      {isLoggedIn && <p>Вы авторизованы</p>}
      <button onClick={() => alert('Нажали!')}>
        Нажми меня
      </button>
    </div>
  );
}

// То же самое без JSX
function GreetingWithoutJSX({ name, isLoggedIn }) {
  return React.createElement(
    'div',
    { className: 'greeting' },
    React.createElement('h1', null, 'Привет, ', name, '!'),
    isLoggedIn && React.createElement('p', null, 'Вы авторизованы'),
    React.createElement('button', { onClick: () => alert('Нажали!') }, 'Нажми меня')
  );
}

Как отвечать на собеседовании

Начни с определения: "JSX - это синтаксический сахар для React.createElement". Подчеркни, что он не обязателен, но делает код чище. Упомяни ключевые отличия от HTML: className, camelCase-события, фигурные скобки для выражений. Если спросят про безопасность - скажи, что JSX предотвращает инъекции. Избегай утверждений, что JSX - это шаблонизатор или что он выполняется в браузере (он транспилируется).

Что проверяет интервьюер

• Понимание, что JSX - это не HTML, а синтаксическое расширение
• Знание процесса транспиляции (Babel → React.createElement)
• Осознание, зачем React использует такой подход (декларативность, компонентный подход)
• Умение отличать JSX от шаблонных языков

Типичные ошибки

• Называть JSX "шаблонизатором" или "языком разметки"
• Думать, что JSX выполняется в браузере напрямую
• Путать className с class, htmlFor с for
• Пытаться использовать if/else внутри фигурных скобок (нужны тернарники или логические операторы)
• Забывать про необходимость единственного корневого элемента