Что такое компонент?

Компонент — основная строительная единица React: независимый переиспользуемый кусок интерфейса, который принимает данные (props) и возвращает описание UI (React-элементы).

Как выглядит

const UserCard = ({ user, onSelect }) => {
  return (
    <div className="card" onClick={() => onSelect(user.id)}>
      <img src={user.avatar} alt="" />
      <span>{user.name}</span>
    </div>
  );
};

// использование — как тег
<UserCard user={me} onSelect={openProfile} />

Функциональный компонент — это просто функция «props → JSX». Есть и классовая форма (class extends React.Component с методом render), сегодня она считается легаси.

Свойства

• Композиция — интерфейс собирается из компонентов как из конструктора: страницы из секций, секции из виджетов, виджеты из кнопок. Вложенность передаётся через props.children.
• Изоляция — у каждого экземпляра свои props и state; два <Counter /> на странице живут независимо.
• Переиспользование — один компонент — много мест использования с разными props.
• Чистота рендера — при одних и тех же props/state компонент должен возвращать тот же UI, без побочных эффектов в теле.

Компонент против элемента

Компонент — «шаблон» (функция/класс). Элемент — результат его вызова: лёгкий объект { type, props }, описывающий, что рендерить. <UserCard /> в JSX создаёт элемент, а не вызывает компонент напрямую — вызывает его React во время рендера.

Коротко для собеседования

Компонент — переиспользуемая функция (или класс), принимающая props и возвращающая JSX. Из компонентов композицией собирается всё приложение; каждый экземпляр изолирован (свой state), а рендер должен быть чистым. Компонент — шаблон, элемент — объект-описание конкретного узла дерева.