Компоненты

Компонент — это функция, которая возвращает JSX. Он описывает один кусок интерфейса: шапку, пункт списка, кнопку. Разбивая страницу на компоненты, вы получаете небольшие файлы, которые легко читать и использовать повторно.

Компонент в отдельном файле

Каждый компонент обычно лежит в своём файле в папке src/components/. Создайте папку и файл src/components/Header.jsx:

// src/components/Header.jsx
export default function Header() {
  return (
    <header>
      <h1>Мои задачи</h1>
    </header>
  );
}

Имя файла совпадает с именем компонента. export default делает функцию доступной для других файлов.

Использование

Чтобы вывести компонент, его импортируют и пишут как тег:

// src/App.jsx
import Header from './components/Header.jsx';
 
export default function App() {
  return (
    <div>
      <Header />
      <p>Задач пока нет.</p>
    </div>
  );
}

React вызовет функцию Header и вставит её разметку на место тега. На странице http://localhost:5173 появится заголовок, а под ним — абзац.

Повторное использование

Один компонент можно вывести сколько угодно раз. Создайте src/components/TodoItem.jsx:

// src/components/TodoItem.jsx
export default function TodoItem() {
  return <li>Новая задача</li>;
}

// src/App.jsx
import Header from './components/Header.jsx';
import TodoItem from './components/TodoItem.jsx';
 
export default function App() {
  return (
    <div>
      <Header />
      <ul>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </ul>
    </div>
  );
}

На странице будет список из трёх одинаковых пунктов. Чтобы пункты отличались, компоненту передают данные — об этом следующий урок.

Дерево компонентов

Компоненты вкладываются друг в друга и образуют дерево. Сверху — App, ниже — его дети:

App
├── Header
└── ul
    ├── TodoItem
    ├── TodoItem
    └── TodoItem

Такое дерево видно в расширении браузера React Developer Tools — оно помогает разбираться, из чего собрана страница.

Правила

Частая ошибка

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

function header() {
  return <h1>Мои задачи</h1>;
}
 
// <header /> выведет пустой HTML-тег header, а не ваш компонент.
// Правильно: function Header() и <Header />

Ошибки при этом нет — просто на странице ничего не появится, поэтому её трудно заметить.