Что такое JSX?

Расширение синтаксиса JavaScript, используемое в React для описания структуры пользовательского интерфейса. Позволяет писать HTML-подобный код внутри файлов JavaScript, который затем транспилируется в обычный JavaScript (вызовы React.createElement).

Основные преимущества:

• Наглядность: Позволяет писать компоненты с декларативным синтаксисом, похожим на HTML, что упрощает чтение и понимание кода.
• Компонентная модель: Органично вписывается в компонентный подход React, облегчая создание и управление UI-элементами.
• Интеграция с JavaScript: Позволяет легко встраивать JavaScript-выражения (переменные, функции) непосредственно в разметку с помощью фигурных скобок {}.

Пример:

// Пример компонента React с использованием JSX
function Welcome(props) {
  return <h1>Привет, {props.name}!</h1>;
}

Трансформируется в:

// Эквивалентный код на чистом JavaScript
function Welcome(props) {
  return React.createElement("h1", null, "Привет, ", props.name, "!");
}