JSX (иногда упоминается как JavaScript XML) — похожее на XML расширение синтаксиса языка JavaScript. Изначально созданный компанией Facebook для использования с React, JSX был принят многими другими веб-фреймворками. Являясь синтаксическим сахаром, JSX, как правило, транспилируется во вложенные вызовы функций JavaScript, структурно схожие с исходным JSX.

JSX-код обычно размещают в файлы с расширением «.jsx» использовании с TypeScript в файлы с расширением «.tsx».

Разметка Ниже приведён пример кода JSX: const App = () => { return ( <div> <header>Header</header> <section>Content</section> <footer>Footer</footer> </div> ); }

Вложенные элементы Несколько элементов на одном уровне должны быть обёрнуты в один родительский элемент, такой как элемент <div>, показанный выше, фрагмент, обозначенный через <Fragment> или его сокращённую форму <>, либо возвращены в виде массива.

Атрибуты JSX предоставляет набор атрибутов, разработанных для соответствия атрибутам HTML. Компоненту также можно передавать пользовательские атрибуты. Все атрибуты будут получены компонентом в виде «пропсов» (props).

JavaScript-выражения Выражения JavaScript (но не инструкции) могут быть использованы внутри JSX с помощью фигурных скобок {}: <h1>{10 + 1}</h1>

Приведённый выше пример будет отрисован как: <h1>11</h1>

Условные выражения Инструкции if-else не могут быть использованы внутри JSX, но вместо них можно использовать условные выражения. Приведённый ниже пример отрисует как строку 'true', потому что i равно 1. const App = () => { const i = 1;

return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } Этот код будет отрисован как: <div> <h1>true</h1> </div>

Функции и JSX могут использоваться в условных конструкциях: const App = () => { const sections = [1, 2, 3];

return ( <div> {sections.map((n, i) => ( /* 'key' — это специальный атрибут React для отслеживания элементов списка и их изменений */ /* Каждый 'key' должен быть уникальным */ <div key={"section-" + n}> Section {n} {i === 0 && <span>(first)</span>} </div> ))} </div> ); }

Этот код будет отрисован как: <div> <div>Section 1 <span>(first)</span></div> <div>Section 2</div> <div>Section 3</div> </div>

Код, написанный на JSX, требует преобразования с помощью такого инструмента, как Babel, прежде чем он сможет быть обработан веб-браузерами. Эта обработка обычно выполняется во время процесса сборки перед развёртыванием приложения.

См. также ECMAScript for XML

Примечания

Ссылки , Draft: JSX specification (англ.)

Категория:JavaScript Категория:Открытые форматы