Компонент — функция, которая возвращает разметку

В React компонент — это функция. Она принимает объект с данными и возвращает JSX. Имя всегда с большой буквы: Button — компонент, button — HTML-тег.

function Button(props) {
  return <button>{props.label}</button>;
}

props: данные снаружи

Props — параметры компонента. Они приходят от родителя, только читаются и никогда не меняются внутри самого компонента. Это одностороннее движение данных: вниз по дереву.

<Button label="Заказать" />
<Button label="Подробнее" />

Один и тот же компонент, разные данные. Вместо копирования разметки вы описываете её один раз.

Деструктуризация и значения по умолчанию

Писать props.label каждый раз утомляет, поэтому props сразу разбирают:

function Button({ label, size = "md", disabled = false }) {
  return <button className={size} disabled={disabled}>{label}</button>;
}

Значения по умолчанию делают компонент предсказуемым: родитель может передать только label, остальное подставится само.

children: содержимое между тегами

Всё, что вы кладёте между открывающим и закрывающим тегом, приходит в prop children. Так делают обёртки, модальные окна, карточки:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card><h3>Заголовок</h3><p>Текст</p></Card>

События: данные вверх

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

function Search({ onSearch }) {
  return (<input onChange={e => onSearch(e.target.value)} />);
}

Родитель передаёт обработчик, ребёнок сообщает о событии. Такой подход называется «данные вниз, события вверх» и держит поток состояния понятным.

Списки и ключи

Массив превращается в список методом map. У каждого элемента обязателен key — уникальный и стабильный, лучше всего id из базы:

{posts.map(post => (
  <PostCard key={post.id} post={post} />
))}

Индекс массива в качестве ключа работает только для статичных списков. Если элементы добавляются, удаляются или сортируются, индекс приводит к путанице состояния.

Как не превратить проект в свалку

• Один компонент — одна ответственность. Если файл длиннее 200 строк, скорее всего внутри два-три компонента.
• Не передавайте десять props, если можно передать один объект — но не злоупотребляйте: явные props читаются лучше.
• Не тяните состояние высоко без нужды. Чем выше состояние, тем больше компонентов перерисовывается.
• Не кладите запросы в каждый компонент. Данные грузятся в одном месте, дальше идут через props.

Нужен сайт на React, а не статья?

Соберу интерфейс под ключ: компоненты, состояние, запросы к API, роутинг, сборка Vite и деплой. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: React с нуля, хуки useState и useEffect, установка React.