Что такое JSX?

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

Почему используется JSX?

- Читабельность: Код становится более понятным, так как разметка и логика расположены рядом.

- Гибкость: JSX позволяет использовать JavaScript внутри разметки с помощью {}.

- Эффективность: React использует JSX для создания виртуального DOM, оптимизируя процесс обновления интерфейса.

Как работает JSX?

JSX — это всего лишь синтаксический сахар. Перед выполнением браузером он компилируется в вызовы React.createElement(). Например:

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

Компилируется в:

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

Основные особенности JSX

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

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

Атрибуты
В JSX используются атрибуты, похожие на HTML, но с особенностями JavaScript. Например, вместо class используется className, а для событий — onClick.

const button = <button className="primary" onClick={() => alert("Клик!")}>Кликни</button>;

Дочерние элементы
Можно передавать элементы и компоненты как дочерние:

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Текст абзаца</p>
  </div>
);

Фрагменты
Для группировки элементов без лишнего контейнера используется React.Fragment или <>.

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

Пример использования JSX в компоненте

function Greeting(props) {
  return <h1>Привет, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Мир" />
      <Greeting name="React" />
    </div>
  );
}

Правила JSX

- Единый родительский элемент: Каждый JSX-блок должен быть обёрнут в один корневой элемент.

- CamelCase для атрибутов: Например, onClick, className.

- Закрывающие теги: Все элементы должны быть закрыты, даже одиночные:

<img src="image.jpg" alt="картинка" />

JSX и безопасность

JSX по умолчанию предотвращает выполнение вредоносного кода, экранируя все вставки JavaScript. Например:

const userInput = "<script>alert('вредоносный код')</script>";
const element = <div>{userInput}</div>; // Вставка будет безопасной

Преимущества:

- Удобный синтаксис для работы с интерфейсами.

- Легкость интеграции JavaScript.

- Ясность кода.

Недостатки:

- Требуется этап компиляции (Babel).

- Начинающим может быть сложнее освоить по сравнению с обычным HTML.

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