Функциональные компоненты

Учимся создавать собственные компоненты — главные строительные блоки любого React-приложения.

Функциональный компонент — обычная JavaScript-функция, которая возвращает JSX и используется как HTML-тег.

Самый простой компонент

Компонент — это функция, возвращающая разметку. Никакого волшебства:

function Greeting() {
  return <h1>Добро пожаловать!</h1>;
}

Теперь Greeting можно использовать внутри другого компонента как тег — <Greeting />. React вызовет эту функцию и подставит её результат.

Главное правило: имя с большой буквы

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

<greeting />   // React решит, что это HTML-тег <greeting> (его нет)
<Greeting />   // React поймёт: это компонент-функция Greeting

Это частая ошибка новичка: написал function header() с маленькой буквы — и компонент «не рендерится», потому что React ищет несуществующий HTML-тег <header>-как-ваш.

Компонент возвращает JSX

Внутри функции можно выполнять обычный JavaScript до return — вычисления, объявление переменных:

function Clock() {
  const now = new Date();
  const time = now.toLocaleTimeString();
  return <p>Сейчас {time}</p>;
}

Экспорт и импорт

Обычно каждый компонент живёт в своём файле и экспортируется, чтобы его можно было подключить в другом месте:

// Greeting.jsx
function Greeting() {
  return <h1>Привет!</h1>;
}
export default Greeting;

// App.jsx
import Greeting from "./Greeting.jsx";

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}
export default App;

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

Почему именно функции

Раньше компоненты писали через классы, но сегодня стандарт — функции. Они короче, проще читаются, а вся «реактивность» (состояние, эффекты) добавляется через хуки, к которым мы перейдём в следующих разделах. В новом коде классовые компоненты практически не используют.

Итог

Компонент — это функция, возвращающая JSX; используется как тег <Имя />.
Имя обязано начинаться с заглавной буквы — иначе React примет его за HTML-тег.
Компонент можно переиспользовать сколько угодно раз; функции — современный стандарт вместо классов.