Основи JSX у React

У React ми використовуємо розширення синтаксису JavaScript під назвою JSX (JavaScript XML) для створення користувацьких інтерфейсів. JSX дозволяє нам писати компоненти React, які описують, як має виглядати інтерфейс користувача. Для цього React використовує синтаксис під назвою 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 автоматично оновлює відображення, коли дані змінюються.