Cучасна онлайн-база безоплатних та платних ресурсів для старту в IT
Наші канали:
@aplaywork
@osvita_vdoma
@top_vacansii
@BrainHubbb
@engimproving
@staty_boss
Сайт: mediacat.in.ua
Реклама @ad_mediacat_bot
Адмін @aplay_publish
Post #1598
608
Що таке JSX і як він працює?
JSX (JavaScript XML) — це синтаксис, що поєднує HTML-подібний код із JavaScript. Він використовується в React, щоб зробити написання компонентів зручнішим. Завдяки JSX, розробники можуть легко створювати UI-елементи, не відходячи від логіки застосунку.
Чим JSX відрізняється від HTML?
✔️Усі теги мають бути закриті:
✔️
✔️Атрибути та стилі записуються у camelCase:
Як це працює?
JSX-компілятор (наприклад, Babel) перетворює код у стандартний
Де використовується JSX?
🔹 Динамічні дані:
🔹 Рендеринг списків:
🔹 Умовний рендеринг:
JSX — це ключовий елемент React, що робить написання компонентів інтуїтивним і ефективним. Якщо ви плануєте розвиватися у фронтенді, варто з ним подружитися!
#поради_itcat #jsx
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
- 👍 4
- 👨💻 2
