Що таке JSX? Що лежить в його основі?

Повне пояснення

Що це і навіщо

JSX (JavaScript XML) — декларативний синтаксис, що дозволяє описувати UI‑компоненти у вигляді тегів. Він зберігає переваги JavaScript (функції, змінні, умови) і одночасно надає зручний спосіб структурування розмітки.

Ключові принципи/терміни

• JSX → синтаксичне розширення, не підтримується браузером без трансляції.
• Babel (або TypeScript) компілює JSX у React.createElement або відповідний API.
• Теги, що починаються з великої літери, створюють користувацькі компоненти; малі — вбудовані HTML‑теги.
• Властивості передаються як об’єкт, атрибути у JSX відповідають camelCase.

Як це працює

1. Під час збірки Babel/TS розбирає JSX‑текст.
2. Кожен тег → виклик React.createElement(type, props, ...children).
3. Результат — дерево об’єктів (Virtual DOM), яке React порівнює та оновлює реальний DOM.

Практика і реалізація

const Greeting = ({name}: {name: string}) => (
  <div className="greeting">Привіт, {name}!</div>
);

ReactDOM.render(<Greeting name="Іван" />, document.getElementById('root'));

Тестування

• Unit: @testing-library/react рендерить компонент і перевіряє наявність тексту.

import {render, screen} from '@testing-library/react';
render(<Greeting name="Іван" />);
expect(screen.getByText(/Привіт, Іван/)).toBeInTheDocument();

• Integration: перевірка взаємодії між компонентами.

Дизайн‑рішення та моделі даних

• JSX підтримує розмітку як функціональний опис, що полегшує рефакторинг.
• Компоненти можуть бути функціональними або класовими; JSX працює з обома.

Производительность і масштабирование

• Virtual DOM мінімізує реальні оновлення, що зменшує кількість рендерів.
• Підтримка React.memo та useMemo допомагає уникнути зайвих перерахунків.

Безпека і приватність

• JSX не виконує небезпечний код; все, що вставляється у dangerouslySetInnerHTML, потребує ручної перевірки.
• Властивості типізуються через TypeScript, що зменшує ризик runtime‑помилок.

Особливості в контексті React

• JSX є частиною React 18+; Next.js, Remix, Gatsby використовують його за замовчуванням.
• TypeScript підтримує JSX через jsx: react-jsx у tsconfig, що генерує нові API.

Оптимізація та типові помилки

• Не використовуйте key у фрагментах без реального списку.
• Уникайте надмірної вкладеності тегів; розділяйте логіку на підкомпоненти.
• Перевіряйте, що всі атрибути відповідають camelCase (наприклад, className, а не class).

Диагностика і отладка

• Якщо JSX не компілюється, перевірте налаштування Babel/TS (@babel/preset-react).
• Помилки типу «Unexpected token» часто вказують на відсутність транслятора.

Альтернативи

• React.createElement без JSX (ручний код).
• Інші фреймворки: Vue‑SFC, Angular templates, Svelte.

Часті помилки (8)

1. Відсутність key у списках → React не може правильно оновити.
2. Використання class замість className → синтаксична помилка.
3. Неправильне ім’я компонента (починається з маленької літери) → створює HTML‑тег.
4. Не типізовані пропси у TS → runtime‑помилки.
5. Вставка об’єктів без JSON.stringify → не відображається.
6. Використання dangerouslySetInnerHTML без санітизації → XSS.
7. Перевантаження компоненту великою кількістю дочірніх елементів → низька продуктивність.
8. Залишені console.log у продакшн‑коді → збільшує розмір бандла.

Cheatsheet

• JSX → React.createElement.
• Атрибути: camelCase, className, htmlFor.
• Компонент починається з великої літери.
• key у списках.
• dangerouslySetInnerHTML → санітизація.

Follow‑up питання

1. Як працює React.createElement?
2. Чому JSX компілюється в JavaScript‑функції?
3. Які переваги типізації JSX у TypeScript?