JSX (JavaScript XML) — це синтаксис, що поєднує HTML-подібний код із JavaScript. Він використовується в React, щоб зробити написання компонентів зручнішим. Завдяки JSX, розробники можуть легко створювати UI-елементи, не відходячи від логіки застосунку.
Чим JSX відрізняється від HTML?
✔️Усі теги мають бути закриті:
<img src="avatar.png" />✔️
class замінено на className, for — на htmlFor✔️Атрибути та стилі записуються у camelCase:
<button onClick={handleClick} />Як це працює?
JSX-компілятор (наприклад, Babel) перетворює код у стандартний
React.createElement(), що генерує віртуальне DOM-дерево. Це забезпечує ефективні оновлення інтерфейсу без зайвих змін у реальному DOM.Де використовується JSX?
🔹 Динамічні дані:
const user = "Anna";
const greeting = <h2>Привіт, {user}!</h2>;
🔹 Рендеринг списків:
<ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>🔹 Умовний рендеринг:
{isAdmin ? <AdminPanel /> : <UserPanel />}JSX — це ключовий елемент React, що робить написання компонентів інтуїтивним і ефективним. Якщо ви плануєте розвиватися у фронтенді, варто з ним подружитися!
#поради_itcat #jsx