JSX в деталях

JSX — синтаксический сахар для функции React.createElement(component, props, ...children). Этот JSX-код:

<MyButton color="blue" shadowSize={2}>
  Нажми меня
</MyButton>

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

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Нажми меня'
)

Вы также можете использовать самозакрывающийся тег, если отсутствуют дочерние элементы. Поэтому код:

<div className="sidebar" />

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

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

Если вы хотите проверить, как JSX-код компилируется в JavaScript, попробуйте онлайн-компилятор Babel.

Указание типа React-элемента

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

Типы, написанные с большой буквы, указывают, что JSX-тег ссылается на React-компонент. Эти теги компилируются в прямую ссылку на именованную переменную, поэтому, если вы используете JSX-выражение <Foo />, то Foo должен быть в области видимости.

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

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

К примеру, в данном коде оба импорта являются необходимыми, даже если на React и CustomButton нет прямых ссылок из JavaScript:

import React from 'react';import CustomButton from './CustomButton';
function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color="red" />;
}

Если вы не используете сборщик JavaScript и загружаете React с помощью тега <script>, то он уже доступен как React в глобальной области видимости.

Использование записи через точку

Вы также можете ссылаться на React-компонент, используя запись через точку. Это удобно, если у вас есть модуль, который экспортирует много React-компонентов. К примеру, если MyComponents.DatePicker является компонентом, то вы можете обратиться к нему напрямую, используя запись через точку:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Представьте, что здесь цвет {props.color} виджета выбора даты.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;}

Названия типов пользовательских компонентов должны начинаться с большой буквы

Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, к примеру <div> или <span>, что в результате приведёт к тому, что в React.createElement будет передана строка 'div' или 'span'. Типы, начинающиеся с заглавной буквы, такие как <Foo />, компилируются в React.createElement(Foo) и соответствуют компоненту, который был объявлен или импортирован в вашем JavaScript-файле.

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

К примеру, этот код будет работать не так, как ожидается:

import React from 'react';

// Неправильно! Это компонент и он должен быть записан с заглавной буквы:function hello(props) {  // Правильно! Использование <div> разрешено, так как это валидный HTML-тег:
  return <div>Привет, {props.toWhat}</div>;
}

function HelloWorld() {
  // Неправильно! React думает, что <hello /> - это HTML-тег,  // потому что он записан с маленькой буквы:  return <hello toWhat="Мир" />;
}

Для того, чтобы исправить это, мы переименуем hello в Hello и станем использовать <Hello />, когда будем ссылаться на него:

import React from 'react';

// Правильно! Это компонент и он должен быть записан с заглавной буквы:function Hello(props) {  // Правильно! Использование <div> разрешено, так как это валидный HTML-тег:
  return <div>Привет, {props.toWhat}</div>;
}

function HelloWorld() {
  // Правильно! React знает, что <Hello /> это компонент,  // потому что он написан с заглавной буквы.  return <Hello toWhat="Мир" />;
}

Выбор типа во время исполнения

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

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Неправильно! JSX-тип не может являться выражением