JSX как расширение JavaScript

JSX (JavaScript XML) представляет собой синтаксическое расширение JavaScript, предназначенное для описания структуры пользовательских интерфейсов в декларативном стиле. В Preact, как и в React, JSX позволяет писать разметку, которая визуально напоминает HTML, прямо внутри JavaScript-кода, обеспечивая тесную интеграцию логики и представления.

Основные принципы JSX

  1. Смешение разметки и логики JSX позволяет внедрять JavaScript-выражения внутрь разметки через фигурные скобки {}. Например:

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

    Здесь значение переменной name динамически подставляется в текст элемента.

  2. Возвращаемые элементы Любой JSX-элемент после компиляции превращается в вызов функции h() из Preact:

    const element = <div className="container">Содержимое</div>;
// транспилируется в:
const element = h('div', { className: 'container' }, 'Содержимое');

    Это объясняет, почему JSX не является строкой HTML, а полноценным объектом, который Preact может рендерить.

Атрибуты и свойства

JSX использует camelCase для именования свойств вместо привычного HTML-стиля. Например, class в HTML преобразуется в className, for — в htmlFor. Пример:

const button = <button className="btn" disabled={true}>Нажми меня</button>;

Атрибуты могут быть динамическими, через JavaScript-выражения:

const isActive = true;
const link = <a href="/home" className={isActive ? 'active' : ''}>Главная</a>;

Вложенные элементы и дочерние компоненты

JSX поддерживает вложенность элементов, что позволяет строить сложные интерфейсы:

const list = (
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
);

Дочерние компоненты также могут быть выражены через JSX:

function Card({ title, content }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

const app = <Card title="Заголовок" content="Текст карточки" />;

Каждый вызов JSX-компонента возвращает объект, который Preact превращает в DOM-узлы при рендеринге.

Выражения и условия в JSX

JSX позволяет включать любые корректные JavaScript-выражения. Для условий часто используется тернарный оператор:

const isLoggedIn = true;
const message = <div>{isLoggedIn ? 'Привет, пользователь!' : 'Пожалуйста, войдите'}</div>;

Для рендеринга списков используется метод map():

const items = ['Яблоко', 'Банан', 'Вишня'];
const list = (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

Ключи key важны для оптимизации работы виртуального DOM при обновлении элементов.

Стилизация и inline-стили

JSX поддерживает inline-стили через объект Jav * aScript:

const style = { color: 'red', fontSize: '20px' };
const heading = <h1 style={style}>Красный заголовок</h1>;

Каждое свойство стиля записывается в camelCase, и числовые значения без единиц трактуются как пиксели.

Фрагменты JSX

Для группировки нескольких элементов без создания лишнего DOM-узла используется Fragment:

import { Fragment } from 'preact';

const group = (
  <Fragment>
    <h1>Заголовок</h1>
    <p>Параграф</p>
  </Fragment>
);

Сокращённая запись:

const group = <>
  <h1>Заголовок</h1>
  <p>Параграф</p>
</>;

Особенности работы с Preact

  1. Лёгкий виртуальный DOM Preact использует компактный виртуальный DOM, и JSX элементы напрямую компилируются в вызовы h(), что обеспечивает минимальный размер библиотеки и высокую производительность.

  2. Минимальные отличия от React Практически весь синтаксис JSX идентичен React, но Preact не поддерживает некоторые менее используемые API. Основная работа с компонентами и JSX остаётся полностью совместимой.

  3. Прямой рендеринг

import { render, h } from 'preact';

const app = <h1>Привет, Preact!</h1>;
render(app, document.getElementById('root'));

JSX превращается в дерево виртуальных узлов, которое Preact оптимально монтирует в реальный DOM.

Итоговые акценты

  • JSX — это не HTML, а синтаксический сахар для JavaScript.
  • Встроенные выражения {} позволяют динамически изменять разметку.
  • В Preact JSX компилируется в вызовы h(), создавая виртуальный DOM.
  • Поддерживаются условия, циклы и вложенные компоненты.
  • CamelCase для атрибутов и объекты для inline-стилей — обязательные особенности JSX.

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

Оглавление