Что такое JSX?

Question

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.

Пример:

const element = <h1>Привет, мир!</h1>;

Под капотом JSX преобразуется в вызовы функций, например:

React.createElement('h1', null, 'Привет, мир!');

Привет, мир!

;Под капотом JSX преобразуется в вызовы функций, например:React.createElement('h1', null, 'Привет, мир!');

YeaHub · Accepted Answer

JSX — это синтаксическое расширение JavaScript, разработанное специально для React. Он позволяет писать код, похожий на HTML, который встраивается в JavaScript. Хотя он напоминает HTML, это не HTML: JSX имеет свои правила и ограничения.Почему используется JSX?Читабельность: Код становится более понятным, так как разметка и логика расположены рядом.Гибкость: JSX позволяет использовать JavaScript внутри разметки с помощью {}.Эффективность: React использует JSX для создания виртуального DOM, оптимизируя процесс обновления интерфейса.Как работает JSX?JSX — это всего лишь синтаксический сахар. Перед выполнением браузером он компилируется в вызовы React.createElement(). Например:const element =

Привет!

;Компилируется в:const element = React.createElement('h1', null, 'Привет!');Основные особенности JSXВстраивание JavaScriptВнутри JSX можно использовать выражения JavaScript, заключённые в {}:const name = "Мир"; const element =

Привет, {name}!

;АтрибутыВ JSX используются атрибуты, похожие на HTML, но с особенностями JavaScript. Например, вместо class используется className, а для событий — onClick.const button = ;Дочерние элементыМожно передавать элементы и компоненты как дочерние:const element = (

Заголовок

Текст абзаца

);ФрагментыДля группировки элементов без лишнего контейнера используется React.Fragment или <>.const element = ( <>

Заголовок

Текст абзаца

);Пример использования JSX в компонентеfunction Greeting(props) { return

Привет, {props.name}!

; } function App() { return (

); }Правила JSXЕдиный родительский элемент: Каждый JSX-блок должен быть обёрнут в один корневой элемент.CamelCase для атрибутов: Например, onClick, className.Закрывающие теги: Все элементы должны быть закрыты, даже одиночные: картинка

JSX и безопасностьJSX по умолчанию предотвращает выполнение вредоносного кода, экранируя все вставки JavaScript. Например:const userInput = ""; const element =

{userInput}

; // Вставка будет безопаснойПреимущества:Удобный синтаксис для работы с интерфейсами.Легкость интеграции JavaScript.Ясность кода.Недостатки:Требуется этап компиляции (Babel).Начинающим может быть сложнее освоить по сравнению с обычным HTML.JSX — это инструмент для разработки в React, который сочетает удобство написания разметки с возможностями JavaScript. Он делает код более выразительным и гибким, упрощая процесс создания интерфейсов.