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

React. Продвинутые руководства. Часть Первая


Этой публикацией я открываю серию переводов раздела «Продвинутые руководства» (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 непосредственно в тег