Урок 4 · React

Разметка внутри JavaScript и чем она не HTML

JSX похож на HTML, но собирается в вызовы JavaScript. Поэтому часть правил другая.

Почему это следующий шаг

Компоненты в маршруте уже начались. JSX — их запись, и на ней спотыкаются в первый вечер.

Как сделать

У компонента одно корневое значение: обёртка или фрагмент. class становится className, for становится htmlFor. В фигурных скобках — выражение JavaScript, не строка атрибута. Имя компонента с большой буквы. Комментарий внутри JSX другой, чем в HTML. Не клади рядом два соседних тега без общей обёртки и не жди, что браузер сам починит JSX: его сначала собирает инструмент.

function Greeting() {
  return <p className="lead">Привет, веб</p>;
}

Что проверить

• Компонент возвращает один корень.
• Класс записан как className.
• В консоли сборки нет синтаксической ошибки JSX.