Oleh Hrebeniuk

JSX - это препроцессор, который добавляет синтаксис XML к JavaScript. Вы можете использовать React без JSX, но JSX делает React более элегантным.

JSX - синтаксис, похожий на XML / HTML, используемый в React, расширяет ECMAScript, так что XML / HTML-подобный текст может сосуществовать с кодом JavaScript / React. Синтаксис предназначен для использования препроцессорами (т. е. транспилерами, такими как Babel), чтобы преобразовать HTML-подобный текст, найденный в файлах JavaScript, в стандартные объекты JavaScript, которые будут анализировать движок JavaScript.

В основном, используя JSX, вы можете писать сжатые структуры HTML / XML (например, DOM подобные древовидные структуры) в том же файле, что и код JavaScript, а затем Babel преобразует эти выражения в код JavaScript. В отличие от прошлого, вместо того, чтобы помещать JavaScript в HTML, JSX позволяет нам помещать HTML в JavaScript.

Рассмотрим объявление переменной:

1
const element = <h1>Hello, world!</h1>;

Синтаксис этого смешного тега не является строкой HTML. Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с мощью JavaScript. JSX создает «элементы» React. Мы рассмотрим рендеринг в DOM в следующем разделе. Ниже вы можете найти основы JSX, необходимые для начала работы.

Выражения в JSX

Вы можете встроить любое выражение JavaScript в JSX, обернув его фигурными фигурными скобками.

Например, 2 + 2, user.firstName и formatName (user) - допустимые выражения:

1
function formatName(user) {
2
  return user.firstName + ' ' + user.lastName;
3
}
4

5
const user = {
6
  firstName: 'Harper',
7
  lastName: 'Perez'
8
};
9

10
const element = (
11
  <h1>
12
    Hello, {formatName(user)}!
13
  </h1>
14
);
15

16
ReactDOM.render(
17
  element,
18
  document.getElementById('root')
19
);

Мы разделяем JSX на несколько строк для удобства чтения. Хотя этого не требуется, при этом мы рекомендуем обертывать его в круглые скобки, чтобы избежать ловушки автоматической точки с запятой.

JSX - это выражение

После компиляции выражения JSX становятся обычными объектами JavaScript.

Это означает, что вы можете использовать JSX внутри операторов if или for, назначать его переменным, принимать его как аргументы и возвращать из функций:

1
function getGreeting(user) {
2
  if (user) {
3
    return <h1>Hello, {formatName(user)}!</h1>;
4
  }
5
  return <h1>Hello, Stranger.</h1>;
6
}

Определение атрибутов в JSX:

Вы можете использовать кавычки для указания строковых литералов в качестве атрибутов:

1
const element = <div tabIndex="0"></div>;

Вы также можете использовать фигурные скобки для вставки JavaScript в атрибут:

1
const element = <img src={user.avatarUrl}></img>;

Не помещайте кавычки вокруг фигурных скобок выражения JavaScript. Вы должны либо использовать кавычки (для строковых значений), либо фигурные скобки (для выражений), но не оба в одном и том же атрибуте.

Предупреждение

Поскольку JSX ближе к JavaScript, чем HTML, React DOM использует соглашение об именах - camelCase вместо имен атрибутов HTML. Например, class становится className в JSX, а tabindex становится tabIndex.

Определение дочерних елементов в JSX

Если тег пуст, вы можете его закрыть с помощью />, как в XML:

1
const element = <img src={user.avatarUrl} />;

Но если вам нужны дочерние элементы вы можете поступить следующим образом:

1
const element = (
2
  <div>
3
    <h1>Hello!</h1>
4
    <h2>Good to see you here.</h2>
5
  </div>
6
);

JSX предотвращает атаки инъекцией

Безопасно встраивать пользовательский ввод в JSX:

1
const title = response.potentiallyMaliciousInput;
2
// This is safe:
3
const element = <h1>{title}</h1>;

По умолчанию React DOM исключает любые значения, написанные в JSX, перед их рендерингом. Таким образом, это гарантирует, что вы никогда не сможете выполнить то, что явно не написано в вашем коде. Перед рендерингом все преобразуется в строку. Это помогает предотвратить XSS (Cross-site scripting) атаки.

JSX представляет объекты

Babel компилирует JSX по вызову React.createElement(). Два примера ниже идентичны:

1
const element = (
2
  <h1 className="greeting">
3
    Hello, world!
4
  </h1>
5
);

1
const element = React.createElement(
2
  'h1',
3
  {className: 'greeting'},
4
  'Hello, world!'
5
);

React.createElement() выполняет несколько проверок, чтобы помочь вам писать код без ошибок, но по существу он создает такой объект:

1
// Note: this structure is simplified
2
const element = {
3
  type: 'h1',
4
  props: {
5
    className: 'greeting',
6
    children: 'Hello, world'
7
  }
8
};

Эти объекты называются элементами React. Вы можете думать о них как о описаниях того, что вы хотите видеть на экране. React читает эти объекты и использует их для построения и обновления DOM.

Мы рассмотрим рендеринг элементов React в DOM в следующем разделе.

Tip

Мы рекомендуем использовать «Babel» для вашего редактора, чтобы как ES6, так и JSX-код были правильно подсвечивался.

Введение в JSX