JSX

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

Хотя JSX выглядит как HTML, на самом деле это синтаксический сахар. Под капотом каждый JSX-элемент преобразуется в вызов функции React.createElement(). Например, запись:

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

на этапе сборки превращается в:

const element = React.createElement('h1', null, 'Привет, мир!');

Это позволяет React эффективно создавать и управлять элементами интерфейса.

Обязательный корневой элемент

Компонент должен возвращать один корневой элемент. Если нужно вернуть несколько соседних элементов, их следует обернуть в общий тег (например, <div>) или использовать фрагмент:

// С фрагментом (рекомендуется, если не нужен лишний div)
return (
  <>
    <h1>Заголовок</h1>
    <p>Текст</p>
  </>
);

Вставка переменных и выражений

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

function Welcome({ name }) {
  const isLoggedIn = true;
  return (
    <div>
      <h1>Привет, {name}!</h1>
      {isLoggedIn && <p>Вы вошли в систему.</p>}
    </div>
  );
}

Внутри {} можно использовать любые JavaScript-выражения: переменные, вызовы функций, тернарные операторы. Но нельзя использовать if или for напрямую — для этого нужно выносить логику за пределы JSX.

JSX не является обязательным для использования React, но он значительно упрощает чтение и написание компонентов, делая структуру интерфейса визуально похожей на HTML.