JSX (JavaScript XML)

Ниже приведён пример кода JSX:

const App = () => {
   return (
     <div>
       <header>Header</header>
       <section>Content</section>
       <footer>Footer</footer>
     </div>
   );
}

Вложенные элементы#edit

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

Атрибуты#edit

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

JavaScript-выражения#edit

Выражения JavaScript (но не инструкции) могут быть использованы внутри JSX с помощью фигурных скобок {}^[7]:

<h1>{10 + 1}</h1>

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

<h1>11</h1>

Условные выражения#edit

Инструкции 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]. Эта обработка обычно выполняется во время процесса сборки перед развёртыванием приложения.

• ECMAScript for XML

1. ^ Draft: JSX Specification (англ.). JSX. Facebook. Дата обращения: 7 апреля 2018. Архивировано из оригинала 2 апреля 2022 года.
2. ^ a b Larsen, John. React Hooks in Action With Suspense and Concurrent Mode : [англ.]. — Manning, 2021. — P. 5. — ISBN 978-1720043997.
3. ^ Robin Wieruch. The Road to React : [англ.]. — Leanpub, 14 September 2018. — ISBN 978-1720043997.
4. ^ Documentation - JSX (англ.). www.typescriptlang.org. Дата обращения: 13 июля 2025. Архивировано 18 июля 2025 года.
5. ^ Clark, Andrew. React v16.0§New render return types: fragments and strings (англ.). React Blog (26 сентября 2017). Дата обращения: 23 сентября 2025. Архивировано 3 октября 2017 года.
6. ^ React.Component: render (англ.). React. Дата обращения: 23 сентября 2025. Архивировано 15 марта 2023 года.
7. ^ a b c Wieruch, Robin. The Road to React. — Leanpub, 14 September 2018. — ISBN 978-1720043997.
8. ^ Clark, Andrew. React v16.0§Support for custom DOM attributes (англ.). React Blog (26 сентября 2017). Дата обращения: 23 сентября 2025. Архивировано 3 октября 2017 года.
9. ^ Fischer, Ludovico. React for Real: Front-End Code, Untangled : [англ.]. — Pragmatic Bookshelf, 2017-09-06. — ISBN 9781680504484.

• facebook.github.io/jsx — официальный сайт JSX, Draft: JSX specification (англ.)