Знайомство з JSX в React

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

JavaScript в HTML

Однією з чудових речей в JSX є те, що він поєднує в собі можливості JavaScript і HTML. Ми можемо використовувати вирази та логіку JavaScript безпосередньо в HTML-коді. Щоб вбудувати JavaScript, візьміть його у фігурні дужки, наприклад, так: { JavaScript код }.

Як працює JSX: Приклад

Давайте розглянемо JSX в дії на простому прикладі. Припустимо, ми хочемо відрендерити елемент заголовку в React-додатку:

У цьому прикладі ми використовуємо JSX для створення константи під назвою element, яка містить елемент <h1> з текстом "Hello, React!".

Примітка

В основі React бере цей JSX-код і ефективно рендерить його в DOM, роблячи його безшовним і потужним способом створення користувацьких інтерфейсів.