Пропсы: карточки команды

ЛЁГКИЙ

Задача #33 · Пропсы

Условие

На сайтах часто повторяются одинаковые блоки с разным содержимым - карточки товаров, профили, ссылки. В React для этого делают один компонент-шаблон и передают в него данные через пропсы (props). В App.js создайте переиспользуемый компонент MemberCard и выведите список участников команды. React подключён в предпросмотре автоматически. Сверяйтесь с вкладкой «Результат».

Что нужно сделать

Сделайте карточку участника: имя, роль, город и кнопка «Поздороваться».
В App подготовьте данные двух участников - Никита и Елена (как во вкладке «Результат»).
По клику на кнопку показывайте приветствие с именем участника.
Выведите обе карточки из массива данных, не копируя разметку вручную дважды.

Подсказка для новичка

Пишите код под комментарием // >>> Пишите код здесь <<<. Один шаблон карточки + разные данные через пропсы. Список понятий - в «Дополнительной информации», эталон - во вкладке «Результат».

Стартовый код

Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.

Вот так должно получиться

Две карточки: Никита и Елена

Команда проекта

Никита

Роль: UX-дизайнер

Город: Москва

Елена

Роль: Backend-инженер

Город: СПб

Как пользоваться IDE

Предпросмотр — как выглядит ваша страница.
Результат — какой итог должен получиться.
Описание задачи — полное условие и справка.
Задание — краткие шаги 1–2–3 снизу.
Помощник — подсказки по шагам.
Черновик — ссылка на ваш код.
Сброс кода — стартовый шаблон.

Свойства этой задачи

Props (пропсы) - данные от родителя дочернему компоненту; внутри только читают.
function MemberCard({ fullName, role, city, onHello }) - деструктуризация пропсов.
className="member-card" / className="app" - классы в JSX.
<h1>, <h2>, <p>, <button> - разметка.
const team = [...] + Array.map() - список карточек.
key={member.id} - стабильный id элемента списка.
onClick, type="button", alert(...) - клик и сообщение.
body, #root, .app h1 - CSS превью.

Пишите код только в App.js. Ниже - важные понятия по теме задачи.

Стили превью (CSS)

body - font-family: system-ui, sans-serif, margin: 16px, background: #f5f3ff.
#root - max-width: 320px.
.app h1 - margin: 0 0 10px, font-size: 20px, color: #312e81.

Оболочка превью (HTML, не редактируется)

<!DOCTYPE html>, <html lang="ru">, <meta charset="UTF-8" />, <title> React Preview.
<div id="root"> + монтирование App через ReactDOM.

Что такое props

Когда вы пишете <MemberCard fullName="Никита" role="..." />, React собирает атрибуты в объект props. Внутри компонента props только читают - менять их нельзя. Чтобы показать другие данные, родитель передаёт новые значения или перерисовывает компонент.

Деструктуризация

function MemberCard({ fullName, role, city, onHello }) - удобнее, чем каждый раз писать props.fullName.

Список через map()

Один шаблон MemberCard + массив данных team - и вы получаете сколько угодно карточек. Атрибут key помогает React отличать элементы списка друг от друга.

Функция как проп

onHello={handleHello} передаёт обработчик в дочерний компонент. В кнопке вызывают onClick={() => onHello(fullName)}, чтобы передать имя в alert.

Коротко: MemberCard с деструктуризацией → team + map + key → handleHello / onClick → «Проверить».

Задание Переместить налево

Сделайте переиспользуемую карточку участника и выведите двух человек из данных в App.js. Сверяйтесь с вкладкой «Результат».

Задачи:

Сделайте карточку участника с нужной вёрсткой.
Примите данные карточки через пропсы.
Подготовьте список участников и обработчик приветствия.
Выведите карточки из списка данных.
Нажмите Проверить.

Пишите только в App.js. React подключён в предпросмотре автоматически.

Если условие кажется непонятным - откройте вкладку «Описание задачи».

Автосохранение