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

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

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

Почему JSX?

Реагирует на то, что логика визуализации по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения.

Вместо того, чтобы искусственно отделять технологии , добавляя разметку и логику в отдельные файлы, React разделяет проблемы с слабо связанными элементами, называемыми «компонентами», которые содержат оба.

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

Встраивание выражений в JSX

Вы можете встроить любое выражение JavaScript в JSX, обернув его фигурными фигурными скобками.
Так, например, 2 + 2, user.firstName и formatName(user) все действительные выражения:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

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

После компиляции выражения JSX становятся регулярными вызовами функций JavaScript и оцениваются для объектов JavaScript. Это означает, что вы можете использовать JSX внутри ifоператоров и forциклов, назначать его переменным, принимать его как аргументы и возвращать из функций:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Определение атрибутов с помощью JSX

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

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

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

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

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

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

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

Определение детей с помощью JSX

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

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

Теги JSX могут содержать дочерние элементы:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

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

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

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

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

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

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

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

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

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

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