[Перевод] JSX — подробности11.01.2017 10:04

Этой публикацией я открываю серию переводов раздела «Продвинутые руководства» (Advanced Guides) официальной документации библиотеки React.js.

JSX — подробности

Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, ...children).

JSX код:

  Click Me

компилируется в:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Также можно использовать самозакрывающую форму для тегов, у которых нет потомков. Например:

компилируется в:

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

Протестировать, как различные конструкции JSX компилируются в JavaScript, можно в онлайн компиляторе Babel

Спецификация типов элементов React

Начальная часть JSX тега определяет тип элемента React.

Типы, определенные с Прописной буквы, указывают на то, что тег ссылается на компонент React. Эти теги в процессе компиляции ссылаются на именованную переменную, содержащую компонент React. Поэтому, обратите внимание, — эта переменная должна находится в области видимости. Например: Если вы используете выражение JSX — , то переменная Foo должна находится в области видимости.

React должен находится в области видимости

Т.к. JSX компилируется в вызовы функции React.createElement, библиотека React всегда должна находиться в области видимости вашего кода JSX.

Например: обе строки import необходимы в данном коде, т.к. React и CustomButton не включены непосредственно в JavaScript:

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return ;
}

Если вы не используете какой-либо упаковщик JavaScript и добавляете React непосредственно в тег