Несколько слов о JSX (React)
2026-03-10 18:45 Diff
https://otus.ru/nest/post/287/

Теги: javascript, react, web-разработка, web dev, web, web development, jsx, xhtml, .jsx, транспайлеры, nodejs, babel, babel-react-prese, атрибуты, classname, onclick, class="page", classname="page", <button onclick={() => alert('!')}>

В основе React лежит JSX — специальный язык/диалект/технология/разметка (ненужное зачеркнуть). Несмотря на то, что React можно использовать и без JSX, а JSX транслировать не в React-компоненты, всё равно, обычно когда говорят React подразумевают JSX.

Итак JSX – это специальный язык, расширение JavaScript, условно можно его называть XHTML внутри JS. Да-да, раньше все писали JavaScript внутри HTML, а теперь наоборот. Располагается JSX в файлах с расширением .jsx и выглядит вот так:

const text = 'a bit of text'; const page = ( <div className="page"> <h1 className="greeting">Hello, world!</h1> {text && <p>{text}</p>} <button onClick={() => alert('!')}>Click me</button> <Footer/> </div> );

Это не обычный JavaScript

Как несложно заметить – просто так этот код исполняться браузером не будет. Для преобразования JSX в JavaScript код требуются специальные утилиты – транспайлеры. В NodeJS-окружении традиционным является babel, а точнее babel-react-preset – целый набор плагинов, включая преобразующие JSX в React классы.

В результате транспайлинга получится анaлогичный следующему JavaScript код:

const text = 'a bit of text'; const page = React.createElement( 'div', { className: 'page' }, React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' ), text && React.createElement( 'p', null, text ), React.createElement( 'button', { onClick: () => alert('!'); }, 'Click me' ) React.createElement( Footer, null, null ) );

Имея перед глазами исходный код на JSX и результат транспайлинга, проанализируем

Любой тег имеет закрывающийся или является самозакрывающимся. В JSX нельзя написать тег < br >, только вот так: < br/ > (без пробелов, конечно).

Все теги превратились в корректные JS-выражения – создание React-элементов. Атрибуты (className, onClick) теперь передаются в объекте в аргументе вызова функций (второй параметр).

Дочерние элементы тоже передаются в аргументах при создании родительских элементов.

Вместо «class="page"» теперь пишется «className="page"», т.к. class - зарезервированное слово в современном JS.

Текст внутри тегов пишется, как и в HTML, но если мы вдруг захотим написать какое-либо JS-выражение, будь это вызов функции или просто переменная, то нам необходимо интерполировать JavaScript обратно в JSX, и делается это вот так: < p >{text}< /p > (без пробелов).

Несложно увидеть, что код JavaScript можно вставлять и в атрибуты тегов: < button onClick={() => alert('!')} > (без пробелов).

И т.к. теги в результате станут корректными JavaScript-выражениями, то можно использовать всю мощь JS.

Например, {text && < p >{text}< /p >} (без пробелов) в точности означает, что если переменная text не будет falsy, то тогда в разметке будет участвовать тег < p > (без пробелов) со всем его содержимым.

Ну и «вишенка»: обратите внимание на тег < Footer/ > (без пробелов). Да, это нестандартный тег, это наш собственный компонент, который определён выше. И он, в свою очередь тоже содержит свою собственную разметку. И в этом вся мощь JSX!

Имея в приложении определённый набор таких компонент, можно будет собирать страницы подобно конструктору! И это только основы JSX, дальше ещё интереснее.

Есть вопрос? Напишите в комментариях!