Правила JSX

Собираем чек-лист правил JSX, чтобы перестать ловить ошибки «Adjacent JSX elements» и «class is not a valid attribute».

Правила JSX — небольшой набор отличий от HTML, которые вытекают из того, что JSX компилируется в JavaScript.

1. Один корневой элемент

Функция-компонент возвращает один элемент. Нельзя вернуть два соседних тега — это всё равно что в JavaScript написать return a b;. Обернём в общий контейнер:

// ❌ Ошибка: два корневых элемента
function Bad() {
  return (
    <h1>Заголовок</h1>
    <p>Текст</p>
  );
}

// ✅ Один корень
function Good() {
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </div>
  );
}

2. Фрагмент, чтобы не плодить div

Лишний <div> иногда мешает вёрстке. Чтобы вернуть несколько элементов без обёртки, используют фрагмент — пустые теги <>...</>:

function Good() {
  return (
    <>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </>
  );
}

Фрагмент группирует элементы, но сам не создаёт узла в DOM.

3. className вместо class

Слово class зарезервировано в JavaScript, поэтому в JSX CSS-класс задаётся через className. Аналогично for у <label> становится htmlFor:

<label className="field" htmlFor="email">Почта</label>
<input id="email" />

4. Закрывайте все теги

В HTML можно писать <br> или <img> без закрытия. В JSX любой тег обязан быть закрыт — одиночные через слеш в конце:

<img src="cat.png" alt="кот" />
<input type="text" />
<br />

5. camelCase для атрибутов и обработчиков

Атрибуты из нескольких слов пишутся в camelCase: onclick → onClick, tabindex → tabIndex, maxlength → maxLength. Значения-выражения передаются в фигурных скобках:

<button onClick={handleClick} tabIndex={0}>
  Кнопка
</button>

6. Инлайн-стиль — это объект

Атрибут style принимает не строку, а объект, где свойства в camelCase. Обратите внимание на двойные фигурные скобки: внешние — «вход в JS», внутренние — сам объект:

<p style={{ color: "red", fontSize: "20px" }}>Важно</p>

Памятка отличий

Итог

• Компонент возвращает один корневой элемент; несколько — оборачивайте в <div> или фрагмент <>...</>.
• class → className, for → htmlFor, атрибуты в camelCase, все теги закрыты.
• style принимает объект, поэтому пишется в двойных фигурных скобках.