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.
