JSX (JavaScript XML)
JSX (иногда упоминается как JavaScript XML) — похожее на XML расширение синтаксиса языка JavaScript[1]. Изначально созданный компанией Facebook для использования с React, JSX был принят многими другими веб-фреймворками[2][3]. Являясь синтаксическим сахаром, JSX, как правило, транспилируется во вложенные вызовы функций JavaScript, структурно схожие с исходным JSX.
При использовании с TypeScript файлы имеют расширение «.tsx»[4].
Разметка
[править | править код]Ниже приведён пример кода JSX:
const App = () => { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> ); } Вложенные элементы
[править | править код]Несколько элементов на одном уровне должны быть обёрнуты в один родительский элемент, такой как элемент <div>, показанный выше, фрагмент, обозначенный через <Fragment> или его сокращённую форму <>, либо возвращены в виде массива[5][6][7].
Атрибуты
[править | править код]JSX предоставляет набор атрибутов, разработанных для соответствия атрибутам HTML. Компоненту также можно передавать пользовательские атрибуты[8]. Все атрибуты будут получены компонентом в виде «пропсов» (props).
JavaScript-выражения
[править | править код]Выражения JavaScript (но не инструкции) могут быть использованы внутри JSX с помощью фигурных скобок {}[7]:
<h1>{10 + 1}</h1> Приведённый выше пример будет отрисован как:
<h1>11</h1> Условные выражения
[править | править код]Инструкции if-else не могут быть использованы внутри JSX, но вместо них можно использовать условные выражения. Приведённый ниже пример отрисует { i === 1 ? 'true' : 'false' } как строку 'true', потому что i равно 1.
const App = () => { const i = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } Этот код будет отрисован как:
<div> <h1>true</h1> </div> Функции и JSX могут использоваться в условных конструкциях[7]:
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, прежде чем он сможет быть обработан веб-браузерами[9][2]. Эта обработка обычно выполняется во время процесса сборки перед развёртыванием приложения.
См. также
[править | править код]Примечания
[править | править код]- ↑ Draft: JSX Specification (англ.). JSX. Facebook. Дата обращения: 7 апреля 2018.
- ↑ 1 2 Larsen, John. React Hooks in Action With Suspense and Concurrent Mode : [англ.]. — Manning, 2021. — P. 5. — ISBN 978-1720043997.
- ↑ Robin Wieruch. The Road to React : [англ.]. — Leanpub, 14 September 2018. — ISBN 978-1720043997.
- ↑ Documentation - JSX (англ.). www.typescriptlang.org. Дата обращения: 13 июля 2025.
- ↑ Clark, Andrew. React v16.0§New render return types: fragments and strings (англ.). React Blog (26 сентября 2017).
- ↑ React.Component: render (англ.). React.
- ↑ 1 2 3 Wieruch, Robin. The Road to React. — Leanpub, 14 September 2018. — ISBN 978-1720043997.
- ↑ Clark, Andrew. React v16.0§Support for custom DOM attributes (англ.). React Blog (26 сентября 2017).
- ↑ Fischer, Ludovico. React for Real: Front-End Code, Untangled : [англ.]. — Pragmatic Bookshelf, 2017-09-06. — ISBN 9781680504484.
Ссылки
[править | править код]- facebook.github.io/jsx — официальный сайт JSX, Draft: JSX specification (англ.)