Блок 4 · Урок 2 из 7

Компонент и пропсы

Из чего React собирает интерфейс — переиспользуемые кубики и их настройка.

⏱ ≈ 6 минут ⚛️ React, компоненты 🎯 цель: понимать, что делает агент, когда «выносит в компонент» и «прокидывает пропсы»

Зачем это вам

Когда агент говорит «вынесу в компонент», «прокинем пропсы», «переиспользуем» — вы понимаете, из чего собран ваш интерфейс, и можете грамотно просить переиспользуемые части. Без этого вы будете просить «сделать ещё одну карточку», а агент — копировать код, что приведёт к беспорядку. С этим — скажете «один компонент, разные данные» и получите аккуратное решение.

Суть

React строит страницу из самостоятельных кубиков

Компонент (component) — это переиспользуемый самостоятельный кусок интерфейса. Кнопка, карточка товара, форма, шапка сайта — каждый из них живёт в своём компоненте.

Внутри компонента собраны вместе разметка, логика и внешний вид одного конкретного куска экрана. Это значит: хотите поправить карточку — идёте в один файл, а не ищете её фрагменты по всему коду.

Чтобы один и тот же компонент показывал разные данные — например, карточку кофе и карточку чая — ему передают пропсы (props, properties, параметры компонента). Пропсы работают ровно как аргументы функции: задаёте снаружи, компонент использует внутри.1

Компоненты вкладываются друг в друга, образуя дерево компонентов — иерархию, из которой складывается вся страница: маленькие компоненты (кнопки, поля ввода) входят в средние (форму, карточку), те — в крупные (секцию страницы, саму страницу).2

<ProductCard name="Кофе" price={500} />
<ProductCard name="Чай"  price={300} />

Это JSX (разметка React) — один и тот же компонент ProductCard, разные пропсы → две разные карточки на экране.

📌 Правило «одна форма — много кексов»: если на странице несколько похожих блоков — скорее всего, это один компонент с разными пропсами, а не разный код для каждого.

Аналогия, которую можно пересказать

Форма для кексов и начинка

Форма для кекса— компонент: задаёт структуру один раз
Начинка и посыпка— пропсы: данные и настройки, которыми наполняете компонент
Много кексов из одной формы— переиспользование: один компонент — много экземпляров
Кексы складывают в коробку— вложенность: маленькие компоненты складываются в большие

Форма одна, но один кекс шоколадный, другой с изюмом — ровно как карточки товаров: один компонент, разные данные через пропсы.

Запомните одно

Компонент — форма. Пропсы — начинка.

Одного компонента достаточно, чтобы показать сотню похожих блоков. Вы передаёте разные пропсы — и получаете разные карточки, кнопки, строки списка без дублирования кода. Именно поэтому агент говорит «вынесем в компонент»: он хочет написать код один раз и использовать его много раз.

Что это даёт на практике

Фраза агента → что он имеет в виду

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

Компонент (component) — самостоятельный переиспользуемый кусок интерфейса: разметка, логика и вид вместе.

Пропсы (props, properties) — параметры, которые передают компоненту снаружи, чтобы его настроить; как аргументы функции.

Переиспользование — один компонент превращается во много экземпляров с разными пропсами.

Дерево компонентов — компоненты вложены друг в друга и образуют всю страницу целиком.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Что такое компонент в React?

2. Что такое пропсы?

3. Зачем нужны компоненты?

4. Агент говорит: «Вынесу карточку в компонент и буду прокидывать данные пропсами». Это значит…

Куда мы идём

Программа курса — 7 блоков