JSX: разметка прямо в коде

React — библиотека для интерфейсов. Страница в нём собирается из компонентов: кнопка, карточка товара, корзина — каждый кусок описан отдельно и знает, как себя нарисовать.

Компонент — это обычная функция. Она возвращает то, что нужно показать:

function Greeting() {
  return <h1>Привет, мир!</h1>
}

Похоже на HTML внутри JavaScript. Это JSX — расширение синтаксиса, которое придумали для React. Браузер JSX не понимает: перед запуском каждый тег превращается в вызов функции.

<h1>Привет, мир!</h1>
// превращается в
React.createElement('h1', null, 'Привет, мир!')

То есть JSX — это не строка с HTML, а удобная запись обычных объектов. Компилятор делает эту замену за вас.

Компонент пишут с большой буквы

function Greeting() { ... } // компонент
<Greeting />                // используем его как тег

С маленькой буквы — встроенные теги: <div>, <p>, <button>. С большой — ваши компоненты. Перепутать нельзя: <greeting /> React примет за неизвестный HTML-тег.

Выражения в фигурных скобках

Внутри JSX можно вставить любое выражение JavaScript — в фигурных скобках:

function Order() {
  const count = 3
  const price = 250
  return <p>Товаров: {count}, к оплате: {count * price} ₽</p>
}
// Товаров: 3, к оплате: 750 ₽

В скобки кладут то, что даёт значение: переменную, вычисление, вызов функции, тернарный оператор. А if и for не кладут — это инструкции, а не выражения. Как обходиться без них, будет в следующих уроках.

Атрибуты: className и другие

Атрибуты пишут почти как в HTML. Два отличия:

• вместо class — className: class в JavaScript занято под классы;
• значение-выражение — в фигурных скобках, а не в кавычках:

const url = 'https://codeful.ru'
<a className="link" href={url}>Сайт</a>

Один корень

Компонент возвращает один элемент. Два соседних тега без обёртки — ошибка:

return (
  <h1>Заголовок</h1>
  <p>Текст</p>          // ошибка: два элемента рядом
)

Их заворачивают в общий родитель. Если лишний <div> не нужен — во фрагмент <>…</>: он ничего не добавляет в разметку.

return (
  <>
    <h1>Заголовок</h1>
    <p>Текст</p>
  </>
)

Круглые скобки вокруг многострочного JSX — не обязательны, но без них return с переносом строки вернёт undefined. Привыкайте ставить сразу.

Закрывать всё

В JSX у каждого тега есть пара или косая черта: <img />, <br />, <input />. Незакрытый <br>, который прощает HTML, здесь — ошибка.

Как здесь проверяются компоненты

В заданиях вы пишете компонент, а тесты его рисуют и смотрят, что получилось на «экране»:

const view = render(<Greeting />)
view.getByText('Привет, мир!') // найти элемент с этим текстом
view.text()                     // весь текст экрана подряд

Если элемента нет, тест покажет, что на экране было на самом деле. import писать не нужно: React и всё, что из него понадобится, уже доступны. А если по привычке напишете import { useState } from 'react' или export default — ничего страшного, проверка их просто пропустит.