Представляем JSX

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

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

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

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

Почему JSX?

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

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

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

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

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

const intro = Welcome to JSX from W3resorce;
const jsxElement = <h1>Hello, {intro}</h1>;
ReactDOM.render(
  jxsElement,
  document.getElementById('root')
);

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

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

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: Ogbonna,
  lastName: Vitalis
};
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

Атрибуты в JSX указаны в кавычках.

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

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

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

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

Замечания:

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

Например, класс становится className в JSX, а tabindex становится tabIndex.

Указание детей с JSX

Для каждого открытого тега JXS должен быть соответствующий закрывающий тег JXS. Если тег пуст, вы можете сразу же закрыть его с помощью />, как XML. Иллюстрация ниже прояснит

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

Теги JSX могут также содержать другие теги JSX как их дочерние элементы, как показано в фрагменте ниже.

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

Предотвращение инъекционных атак с помощью JSX

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

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

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

Когда JSX передаются, они компилируются до вызовов React.createElement ().

В React эти два примера равны и идентичны

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 и поддержания его в актуальном состоянии.

В следующем уроке мы рассмотрим процесс рендеринга элементов реагирования в DOM.