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

• ECMAScript for XML

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