React. Введение в JSX

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

Взгляните на это объявление переменной:

const element = <h1>Привет, мир!</h1>;

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

JSX производит "элементы" React. Мы будем изучать их рендеринг в DOM в разделе Отрисовка элементов. Ниже вы можете найти основы JSX, необходимые для начала работы.

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

Вы можете использовать любой JavaScript-код внутри фигурных скобок. Например, {2 + 2}, {user.name} и {formatName(user)}:

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

const user = {
  firstName: 'Морис',
  lastName: 'Терез'
};

const element = (
  <h1>
      Привет, {formatName(user)}!  </h1>
);

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

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

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

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

function getGreeting(user) {
  if (user) {
    return <h1>Привет, {formatName(user)}!</h1>;  }
  return <h1>Привет, Незнакомец.</h1>;}

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

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

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

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

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

Определение дочерних модулей с JSX

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

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

Внутри JSX-тегов могут содержаться другие теги:

const element = (
  <div>
    <h1>Привет!</h1>
    <h2>Рад вас видеть.</h2>
  </div>
);

Так как JSX ближе к JavaScript, чем HTML, React DOM использует наименования в стиле camelCase (пробелы отсутствуют, первая буква каждого слова (начиная со второго) заглавная) вместо HTML-атрибутов.

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

JSX предотвращает хакерские атаки

Встраивание пользовательского ввода в JSX безопасно:

const title = response.potentiallyMaliciousInput;
// Это безопасно:
const element = <h1>{title}</h1>;

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

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

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

const element = (
  <h1 className="greeting">
    Привет, мир!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Привет, мир!'
);

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

// Примечание: эта конструкция упрощается
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Привет, мир'
  }
};

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

Мы будем изучать рендеринг React элементов в DOM в разделе Отрисовка элементов.

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