5. JSX в Qwik

Qwik использует JSX — тот же синтаксис разметки, что и React. Однако между ними есть важные различия, которые нужно знать при переходе с React.

Основные отличия от React JSX

1. `class` вместо `className`

В Qwik используется атрибут class, как в обычном HTML:

// React
<div className="container">Hello</div>

// Qwik — как в HTML
<div class="container">Hello</div>

2. Обработчики событий с символом `$`

В Qwik все обработчики событий используют суффикс $:

// React
<button onClick={handleClick}>Click</button>

// Qwik
<button onClick$={handleClick$}>Click</button>
//            ↑ Символ $ делает обработчик QRL (ленивым)

Полный список обработчиков:

onClick$      // Клик
onInput$      // Ввод текста
onChange$     // Изменение значения
onSubmit$     // Отправка формы
onKeyDown$    // Нажатие клавиши
onMouseOver$  // Наведение мыши
onFocus$      // Фокус
onBlur$       // Потеря фокуса

3. Двусторонняя привязка `bind:value`

Qwik поддерживает синтаксис bind:value для двусторонней привязки данных:

// React — двусторонняя привязка вручную
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Qwik — bind:value
const value = useSignal('');
<input bind:value={value} />
// или
<input value={value.value} onInput$={(e, el) => value.value = el.value} />

4. Стили как объект или строка

// Qwik поддерживает оба варианта
<div style="color: red; font-size: 16px">Text</div>
<div style={{ color: 'red', fontSize: '16px' }}>Text</div>

5. Атрибуты HTML vs JSX

// React требует JSX-имена
<label htmlFor="email">Email</label>
<div tabIndex={0}>Focusable</div>

// Qwik ближе к HTML
<label for="email">Email</label>
<div tabIndex={0}>Focusable</div>

Условный рендеринг

export const UserGreeting = component$<{ user: string | null }>((props) => {
  return (
    <div>
      {/* Тернарный оператор */}
      {props.user ? <h1>Привет, {props.user}!</h1> : <h1>Войди в систему</h1>}

      {/* Short-circuit */}
      {props.user && <span>Ты авторизован</span>}

      {/* Fragment */}
      <>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
      </>
    </div>
  );
});

Списки и ключи

export const List = component$<{ items: string[] }>((props) => {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={item}>{item}</li>
        // key работает так же как в React
      ))}
    </ul>
  );
});

JSX Fragment

// Qwik поддерживает React Fragment синтаксис
return (
  <>
    <div>Первый элемент</div>
    <div>Второй элемент</div>
  </>
);

Специфика Qwik JSX

Предотвращение промисов в JSX

Qwik поддерживает async компоненты:

export const AsyncComponent = component$(async () => {
  const data = await fetchData(); // Можно await прямо в компоненте!
  return <div>{data.title}</div>;
});

`useId()` для уникальных ID

export const FormField = component$<{ label: string }>((props) => {
  const id = useId();
  return (
    <>
      <label for={id}>{props.label}</label>
      <input id={id} />
    </>
  );
});