Часто при изучении 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
- JSX — это то, что сделает ваш код более лаконичным, если использовать чистый JavaScript в React. Вы это сразу заметите, если пропишите одни и те же действия разными подходами.
- При наименовании чего-либо в JSX всегда используется «верблюжий стиль», когда первое слово пишется с маленькой буквы, а следующие слова — с большой. Например: classAge, secondName и т. д.
- JSX очень сильно напоминает HTML, но когда начнете глубже изучать эту технологию, то поймете, что по факту это синтаксис XML.
- JSX-синтаксис так же строг, как и XHTML, поэтому в нем нужно закрывать все теги, даже те, которые в HTML можно не закрывать. Например: <br>, <hr> и др.
- CSS свойства, которые записываются в JSX, слегка отличаются от синтаксиса «чистого» CSS, к этому нужно быть готовыми. К примеру: названия свойств прописываются только в camelCase, или трудно реализовать CSS, когда нужно указать медиа-запрос, придать стиль анимации и др.
- JSX упрощает работу с формами HTML.
- JSX в автоматическом режиме сканирует выражения — это смягчает риск XSS-атаки.
- Все горизонтальные пробелы в выражениях сокращаются до одного.
- Комментарии в код добавляются, как и комментарии в JavaScript.
- И др.
Заключение
JSX — это то, что идет в комплекте с React, поэтому если вы решили изучить Реакт, то вам обязательно нужно попробовать технологию JSX, потому что с ней ваша разработка будет продвигаться быстрее, чем с чистым JavaScript. JSX — это очень лаконичный и понятный синтаксис; попробовав его однажды, вы вряд ли на Реакте будете писать по-другому.

JavaScript