Компоненты

Компонент в React — это самостоятельная, переиспользуемая часть пользовательского интерфейса. Он инкапсулирует свою разметку (через JSX), логику и стили, и может использоваться как отдельный элемент в других частях приложения.

Самый простой способ создать компонент — объявить функцию. Такие компоненты называются функциональными:

function Button() {
  return <button>Нажми меня</button>;
}

Функция-компонент должна возвращать JSX. Этот JSX описывает, что будет отображаться в DOM. Возвращаемое значение может быть одним элементом, фрагментом (<>...</>) или даже null, если компонент ничего не должен рендерить.

Именование компонентов

Имена компонентов всегда начинаются с заглавной буквы. Это правило позволяет React отличать пользовательские компоненты от встроенных HTML-тегов. Например:

<div /> — это HTML-элемент.
<Button /> — это компонент.

Если назвать компонент с маленькой буквы (button), React обработает его как обычный DOM-тег, и код не сработает как ожидается.

Переиспользование и композиция

Компоненты можно вкладывать друг в друга, создавая сложные интерфейсы из простых частей:

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

Каждый из этих компонентов (Header, MainContent, Footer) может быть определён отдельно и использован в других местах.

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