Skip to main content
Практика завдань

Що таке JSX у React?

JSX (JavaScript XML) — це розширення синтаксису для JavaScript, яке використовується в React для опису структури інтерфейсу користувача. JSX дозволяє писати компоненти, які виглядають як HTML, але насправді є кодом JavaScript.

Чому JSX?

  • Зручність та читабельність. JSX дозволяє описувати елементи інтерфейсу в знайомому форматі, схожому на HTML, при цьому маючи всі переваги JavaScript.
  • Інтеграція логіки. JSX дозволяє вбудовувати JavaScript-вирази безпосередньо в розмітку, спрощуючи створення динамічних та інтерактивних інтерфейсів.
  • Компиляція в JavaScript. JSX не є стандартним синтаксисом JavaScript, тому він компілюється в звичайний код JavaScript за допомогою транспайлерів, таких як Babel.

Приклад використання JSX

jsx
function Greeting() { const name = "John"; return <h1>Hello, {name}!</h1>; }

У цьому прикладі JSX використовується для повернення елемента <h1>, який відображає привітальне повідомлення. {name} — це JavaScript-вираз, вставлений всередину JSX.

Важливі особливості JSX

  • Елементи JSX завжди повинні бути обгорнуті в один кореневий елемент. Наприклад, якщо повертається кілька елементів, їх потрібно обгорнути в контейнер, такий як <div>, або використовувати React.Fragment.
  • JSX використовує camelCase для іменування атрибутів, таких як className замість class, та htmlFor замість for.

JSX та компоненти:

JSX спрощує створення компонентів з динамічними даними та вбудованою логікою. Це спрощує створення інтерфейсів у React.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань
Назад
Далі