Итоги: пропсы
Часть раздела Основы путешествия по React на Coddy — урок 21 из 42.
Задание
ЛегкоИтоги главы: небольшое меню, созданное с помощью пропсов и children.
- Сделайте так, чтобы
Itemпринимал пропсыnameиpriceи рендерил{name}: ${price}в своем<li>. - Сделайте так, чтобы
Cardрендерил<div>сclassName="card", который отображает егоchildren. - В App используйте
<Card>...</Card>, чтобы обернуть<ul id="menu">, и внутри него отрендерите два компонента Item: nameTeaс price3, затем nameCakeс price5(цены в виде чисел!).
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React4Пропсы (Props)
Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы