Коротко

JSX — синтаксическое расширение JavaScript, которое выглядит как HTML внутри кода. Babel/компилятор превращает его в вызовы React.createElement (или аналог в runtime).

const el = <h1 className="title">Привет</h1>;
// примерно то же, что:
React.createElement("h1", { className: "title" }, "Привет");

Зачем спрашивают

Проверяют, понимаешь ли ты, что JSX — не «магия браузера», а синтаксис, и знаешь отличия от HTML (className, htmlFor, camelCase событий).

Важные детали

  • В JSX один корневой узел (или фрагмент <>...</>).
  • В фигурных скобках {} можно вставлять выражения JS.
  • Булевы атрибуты и null/undefined/false не рендерятся как текст.
  • Списки нуждаются в стабильном key.

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

  • Путать JSX с шаблонами Vue/Angular.
  • Писать class вместо className.
  • Класть в JSX тяжёлую логику без вынесения в функции — читать больно.

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

«JSX — удобный синтаксис для описания UI в React. Компилируется в вызовы создания элементов. Это JS, а не HTML: другие имена атрибутов и выражения в {}.»