Найти тему
Frontend-IT

JSX - JavaScript Syntax Extension

JSX (JavaScript Syntax Extension) – это специальный синтаксис, с помощью которого можно объединять CSS, HTML и JavaScript, тем самым формировать полноценные компоненты React.

Рассмотрим такой пример

Можно обратить внимание, что структура данного примера очень похоже на HTML.

Например, есть открывающий тег под названием Card, у этого тега есть два атрибута style и className. У этого открывающего тега есть соответствующий закрывающий тег </Card>.

У родительского элемента <Card> есть дочерний элемент <Card.Img>, у которого есть также свои атрибуты: variant, style, src и т.п. то есть дочерний элемент с собственными атрибутами.

При этом <Card.Img> и <Card> похожи на HTML-теги, но таковыми не являются – это компоненты React.

Еще проще можно сказать, что в приложении, в котором вы найдёте JSX как в примере должны быть компоненты с названием Card и Card.Img.

Кроме того, в этом примере виден синтаксис, который похож на CSS.

У компонента <Card> есть атрибут style и его значение — это на самом деле объект JavaScript. И в этом объекте JavaScript есть, например, такое свойство как backgroundColor.

Отметим, что в CSS есть точно такое же свойство, но оно пишется через дефис: background-color.

В JSX свойство написано слитно, используя CamelCase нотацию.

А вот значение этого свойства – это выражение JavaScript и в этом выражении используются переменные initialColor и opacity.

Следует особо выделить, что синтаксис JSX только похож на HTML и CSS, на самом деле все в примере реализовано с помощью JavaScript.

JSX – это синтаксическая надстройка над JavaScript.

JSX-код из примера выше в итоге будет сконвертирован в вызов функции createElement, которая является методом объекта React. И именно таким образом, как на фото ниже выглядит изнутри JSX.

-2