Основи JSX у React

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

JSX виглядає схожим на HTML, але пишеться всередині JavaScript. Це дозволяє описувати елементи інтерфейсу прямо у коді компонента, замість того щоб створювати їх крок за кроком за допомогою JavaScript.

Хоча JSX схожий на HTML, це не HTML. Насправді JSX перетворюється у JavaScript, який розуміє React. Це робить JSX виразним і потужним, залишаючись частиною мови JavaScript.

У JSX можна безпосередньо вставляти вирази JavaScript у розмітку. Це спрощує відображення динамічних даних і керування тим, що з’являється на екрані. Нижче наведено той самий компонент, що й раніше, але вже з використанням JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Тут JSX використовується для опису інтерфейсу користувача. Синтаксис {name} дозволяє вставляти значення JavaScript у інтерфейс. React автоматично оновлює відображення, коли дані змінюються.