React: собирай интерфейс из частей

Подробнее

React обновляет интерфейс из данных

В обычном скрипте ты сам находишь элемент и меняешь текст. В React ты описываешь, как интерфейс выглядит при текущих данных, и меняешь данные. Библиотека заново вызывает компонент и обновляет нужные узлы. Поэтому прямое document.querySelector внутри компонента быстро расходится с тем, что React считает правдой.

Компонент — функция, которая получает вход и возвращает разметку. Одинаковый вход должен давать одинаковую разметку. Запрос на сервер, подписка и запись в хранилище живут в эффектах, а не посреди вычисления разметки.

function Price({ amount }) {
  return <strong>{amount.toLocaleString("ru-RU")} ₽</strong>;
}

export default function Card() {
  return <p>Занятие стоит <Price amount={1800} /></p>;
}

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

• Props передают данные внутрь и не меняются самим компонентом.
• State хранит то, что меняется: счётчик, текст поля, открыто ли меню.
• Списки требуют стабильный key, а не индекс, если элементы удаляются и переставляются.
• Эффект нужен для связи с внешним миром, а не для каждой производной цифры.

Частые первые поломки

Имя компонента с маленькой буквы React воспринимает как обычный тег. Соседние элементы без общей обёртки нельзя вернуть просто так: оберни их во фрагмент. Вызов setState прямо в теле компонента запускает новый рендер и зацикливает страницу. Состояние меняют в обработчике или в эффекте, а не во время рисования.