Назария

JSX и компоненты

Зачем React

В курсе DOM мы строили интерфейс так: данные в переменных → функция render() очищает контейнер и создаёт элементы заново → события меняют данные и снова вызывают render(). Это работает, но с ростом приложения появляется много ручной работы: найти нужный элемент, не забыть перерисовать, сохранить фокус в поле, не пересоздавать то, что не изменилось.

React берёт эту идею и делает всю ручную работу сам. Ты описываешь, как должен выглядеть интерфейс при данных такие-то, а React сам решает, какие элементы DOM добавить, поменять или удалить. React — самая популярная библиотека интерфейсов: на нём сделаны Facebook, Instagram, Netflix, Airbnb и тысячи других сайтов.

Компонент — это функция

Интерфейс в React собирается из компонентов. Компонент — обычная функция, имя которой начинается с большой буквы, а возвращает она разметку:

function Welcome() {
  return <h1>Привет!</h1>;
}

Разметка прямо внутри JavaScript — это JSX. Браузер JSX не понимает: перед запуском его переводят в обычный JavaScript (этим занимаются сборщики вроде Vite; на нашем сайте перевод делается автоматически). <h1>Привет!</h1> превращается в вызов React.createElement("h1", null, "Привет!").

Вывести на страницу

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome />);

createRoot подключает React к элементу страницы (обычно <div id="root">), а render показывает в нём компонент. Компонент используют как тег: <Welcome />. Это делается один раз — дальше React обновляет страницу сам.

В настоящем проекте React подключают через import:

import { useState } from "react";
import { createRoot } from "react-dom/client";

На этом сайте React уже подключён как глобальные React и ReactDOM, поэтому импорты не нужны.

Правила JSX

JSX похож на HTML, но это JavaScript, поэтому есть отличия:

function Card() {
  return (
    <div className="card">                       {/* class → className */}
      <label htmlFor="email">Почта</label>        {/* for → htmlFor */}
      <input id="email" type="email" />           {/* одиночные теги закрываются: /> */}
      <img src="cat.png" alt="Кот" />
    </div>
  );
}

class → className, for → htmlFor (это зарезервированные слова JavaScript).
Все теги закрываются: <br />, <input />.
Многострочный JSX берут в круглые скобки ( ... ) после return.
Комментарий внутри JSX — {/* ... */}.

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

В фигурных скобках {} можно написать любое JavaScript-выражение — React подставит результат:

const user = { name: "Аня", score: 42 };

function Profile() {
  return (
    <div>
      <h2>{user.name.toUpperCase()}</h2>
      <p>Очки: {user.score * 10}</p>
      <p>Уровень: {user.score > 40 ? "профи" : "новичок"}</p>
      <img src={`/avatars/${user.name}.png`} alt={user.name} />
    </div>
  );
}

Выражение — то, что даёт значение: переменная, вызов функции, a ? b : c. Инструкции if, for внутри {} писать нельзя — их пишут до return или заменяют выражениями.

Условный показ

{isAdmin && <span className="badge">admin</span>}      // показать или ничего
{isOnline ? <span>в сети</span> : <span>не в сети</span>}  // одно из двух

false, null и undefined React не рисует — поэтому условие && <элемент> показывает элемент только при истинном условии. Осторожно с числами: {count && <p>...</p>} при count = 0 нарисует 0. Пиши {count > 0 && ...}.

Стиль — объект

Атрибут style в JSX — не строка, а объект с CSS-свойствами в camelCase. Отсюда двойные скобки: внешние — «здесь JavaScript», внутренние — сам объект:

<p style={{ color: "gray", fontSize: 14, marginTop: "8px" }}>Подпись</p>

Числа для размеров React дополняет px сам (fontSize: 14 → 14px). Но чаще стили пишут в CSS, а в JSX указывают className.

Компоненты внутри компонентов

Компоненты складываются как конструктор:

function Header() {
  return <header><h1>Магазин</h1></header>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Товары скоро будут</p>
    </div>
  );
}

Один корень и фрагменты

Компонент возвращает один элемент. Два соседних тега без обёртки — ошибка. Если лишний <div> не нужен, используют фрагмент <>...</> — он группирует элементы, но сам в DOM не попадает:

function Columns() {
  return (
    <>
      <td>Имя</td>
      <td>Очки</td>
    </>
  );
}

Итог

Компонент — функция с большой буквы, возвращает JSX; используется как тег <Компонент />.
ReactDOM.createRoot(элемент).render(<App />) — показать приложение.
JSX: className, htmlFor, закрытые теги, выражения в {}, стиль — объект.
Условия: && и ? :; несколько элементов без обёртки — фрагмент <>...</>.