Введение в JSX

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

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

Этот забавный синтаксис тегов не является ни строкой, ни HTML.

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

JSX генерирует «элементы» React. Мы рассмотрим их отображение в DOM в следующей секции следующем разделе. Ниже вы найдете основы JSX, необходимые для начала работы.

Почему JSX?

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

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

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

Теперь, когда мы разобрались с этим, давайте начнём!

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

В примере ниже мы объявляем переменную name и затем используем её внутри JSX, обернув в фигурные скобки:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

Вы можете поместить любое допустимое JavaScript-выражение внутри фигурных скобок в JSX. Например, 2 + 2, user.firstName, или formatName(user) — всё это допустимые JavaScript-выражения.

В примере ниже мы встраиваем результат вызова JavaScript-функции, formatName(user), в элемент <h1>.

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')
);

Попробуйте на CodePen

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

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 = <a href="https://www.reactjs.org"> link </a>;

Также можно использовать фигурные скобки для встраивания 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». Вы можете рассматривать их как описания того, что вы хотите увидеть на экране. React считывает эти объекты и использует их для построения DOM и поддержания его актуальности.

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

Совет:

Рекомендуется использовать “Babel” language definition для вашего редактора, чтобы и ES6, и JSX-код корректно отображались.