JSX .Что это за расширение , где и для чего используется

Часто при изучении React, изучающие его пользователи, сталкиваются с таким
понятием как «JSX». Возникает непонимание и вопрос, а что это такое JSX и почему
эту технологию так нахваливают? Давайте разбираться вместе.
Хочется заметить, что React может функционировать и без JSX, но именно работа с
этой технологией выделяет его среди подобных ему инструментов и делает
привлекательным для его последователей. Кстати, этот технологический подход к
программированию впервые был презентован во время использования библиотеки
React.

Итак, а что это такое JSX?

JSX — это “микс” из синтаксиса JavaScript, HTML и немного CSS. А по своей сути
это является инструментом, для распределения элементов страницы внутри
разметки при помощи JavaScript. Его синтаксис прост, например:

const element = <p> Я элемент, размещенный на странице</p>

JSX проповедует идею, что нужно держать разметку силами JavaScript и не
разделять технологии, размещая разметку и логику в отдельные файлы.
Основываясь на этой «идее», React создает собственные компоненты, которые
содержат внутри себя и разметку и логику. Сама «идея» не новая и вызывает много
споров в сети о «правильности» в ее применении, но сейчас не об этом. Потому что
именно такой подход к разработке сделал из React одним из самых популярных
инструментов для веб-программирования.

Как можно выстроить выражения в JSX?

JSX позволяет довольно просто выстраивать сложные выражения и встраивать
переменные прямо внутри этих выражений, например:
const name = ‘Тихон Платонович’;
const element = <h1>Приветствую Вас, {name}!</h1>;
То есть, можно создать любую переменную, в нашем случае это «name» и обрамив
ее «египетскими» скобками, вставить в код JSX. Кстати, когда нужно будет вставить
любой какой-нибудь скрипт JavaScript внутри кода JSX, это все делается при помощи
«{}». Например:

function peopleName(user) {
return user.firstName + ‘ ‘ + user.secondName;
}

const user = {
firstName: ‘Игнатий’,
secondName: ‘Порфириевич’
};

const element = (
<h1>
Приветствую тебя, {peopleName(user)}! </h1>
);

ReactDOM.render(
element,
document.getElementById(‘root’)
);

JSX код и браузер

По факту, JSX код «не понятен» браузеру. Поэтому он во время компиляции
трансформируется в альтернативную функцию JavaScript. Отсюда и происходит
утверждение, что на Реакт может и не использовать JSX.
Но в тоже время, JSX проще чем JavaScript. А трансформация JSX в JS дает нам
возможность использовать код JSX внутри выражений JavaScript, к примеру это
можно делать в выражениях «if» или «for». Например:
function getGreeting(user) {
if (user) {
return <h1>Приветствую тебя, {firstName(user)}!</h1>; }
return <h1>Приветствую тебя, мистер «Х».</h1>;}

JSX и атрибуты

Внутри любого выражения JSX можно вставить любые атрибуты. Например:
const element = <div background-color= “red“></div>
Иногда в атрибуте нужно использовать какое-нибудь выражение JS, в этом случае
такая манипуляция происходит при помощи символов «{}», например:
const element = <img src={site.logoUrl}></img>;

Несколько особенностей JSX

1. JSX — это то, что сделает ваш код более лаконичным, если использовать чистый
   JavaScript в React. Вы это сразу заметите, если пропишите одни и те же действия
   разными подходами.
2. При наименовании чего-либо в JSX всегда используется «верблюжий стиль»,
   когда первое слово пишется с маленькой буквы, а следующие слова с большой.
   Например: classAge, secondName и т. д.
3. JSX очень сильно напоминает HTML, но когда начнете глубже изучать эту
   технологию, то поймете, что по факту это синтаксис XML.
4. JSX-синтаксис также строг как и XHTML, поэтому в нем нужно закрывать все теги,
   даже те, которые в HTML можно не закрывать. Например: ,
   и др.
5. CSS свойства, которые записываются в JSX слегка отличаются от синтаксиса
   «чистого» CSS, к этому нужно быть готовыми. К примеру: названия свойств
   прописываются только в camelCase или трудно реализовать CSS, когда нужно
   указать медиа-запрос, придать стиль анимации и др.
6. JSX упрощает работу с формами HTML.
7. JSX в автоматическом режиме сканирует выражения — это смягчает риск XSS-
   атаки.
8. Все горизонтальные пробелы в выражениях сокращаются до одного.
9. Комментарии в код, добавляются как и комментарии в JavaScript.
10. И др.

Возможно вам будет интересно почитать статью “Введение в React JS. Что это за библиотека?”

Заключение

JSX — это то, что идет в комплекте с React, поэтому, если вы решили изучить Реакт,
то вам обязательно нужно попробовать технологию JSX, потому что с ней ваша
разработка будет продвигаться быстрее, чем с чистым JavaScript. JSX — это очень
лаконичный и понятный синтаксис, попробовав его однажды, вы вряд ли на Реакте
будете писать по-другому.