Как создавать компоненты в React?

Суть

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

Function-компонент

Самый распространённый способ сегодня:

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

// или стрелочная функция
const Greeting = ({ name }) => <h1>Привет, {name}!</h1>;

Class-компонент

Классический вариант через extends React.Component:

class Greeting extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}!</h1>;
  }
}

Правила

1. Имя с заглавной буквы — иначе JSX считает тег HTML-элементом.
2. Один компонент — одна ответственность; дробите крупные куски.
3. Данные сверху вниз через props; локальное состояние — через useState / this.state.
4. Возвращайте один корневой узел или Fragment.

createElement vs JSX

JSX компилируется в React.createElement. Писать JSX удобнее, но важно понимать, что под капотом — вызовы создания элементов.

На собеседовании

Ожидают: function vs class, props, заглавная буква, отличие «описания UI» от DOM-узла. Не путайте создание компонента (объявление функции/класса) с createElement (создание элемента-описания для рендера).

Практика: начните с function-компонентов и хуков — это современный стандарт. Умение объяснить оба синтаксиса показывает глубину понимания модели React.