Глава 8. Компоненты и композиция интерфейса
Зачем эта глава
Компоненты — это кирпичики интерфейса. Понимая композицию, ты сможешь собирать большие страницы из маленьких блоков.
Теория (коротко)
Компонент — функция, которая возвращает JSX.
Композиция — это вложение компонентов друг в друга.
function Header() {
return <header>Логотип</header>;
}
function Page() {
return (
<div>
<Header />
<main>Контент</main>
</div>
);
}
Подсказка: если компонент становится большим, разбивай его на части.
Задания
Задание: структура страницы
- Сделай компоненты Header, Sidebar, Footer.
- Собери страницу из этих компонентов.
- Добавь контент в каждый блок.
Проверка себя
Ты можешь разбить интерфейс на компоненты и собрать их обратно.
Мини-проект
Цель: каркас блога.
Требования: Header, список статей, Footer.
Критерий готовности: все части страницы отдельными компонентами.
Словарь главы
- Композиция
- Сборка интерфейса из маленьких компонентов.
- Переиспользование
- Один и тот же компонент можно вставлять много раз.