Введение в JSX (Introducing JSX)

Рассмотрим эту переменную декларацию (в оригинале: variable declaration):

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

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

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

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

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

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

Например, 2 + 2, user.name, и 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')
);

Посмотреть на CodePen.

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

JSX это выражение Too (JSX is an Expression)

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

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

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

Указание дочерних элементов с JSX

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

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

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

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

Внимание:

Так как JSX ближе к JavaScript, чем HTML, React DOM использует CamelCase-стиль именования свойств в отличие от HTML имен атрибутов.

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

 

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

Для безопасной вставки пользовательского ввода в JSX:

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

По умолчанию, React DOM экранирует любые величины, помещаемые в JSX перед их отрисовкой. Таким образом, это гарантия того, что мы не получим ничего взятого вне приложения. Все преобразуется в строку, перед отрисовкой (rendered). Это помогает предотвратить 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» схемы синтаксиса для выбранного редактора, чтобы и ES6, и JSX код правильно подсвечивался/выделялся