まとめ:Props
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 21/42。
チャレンジ
簡単章のまとめ: props と children から構築された小さなメニュー。
Itemがnameとpriceの props を受け取り、その<li>内に{name}: ${price}をレンダリングするようにします。Cardがchildrenを表示するclassName="card"を持った<div>をレンダリングするようにします。- App 内で、
<Card>...</Card>を使用して<ul id="menu">をラップし、その中に 2つ の Item(name がTeaで price が3、次に name がCakeで price が5。price は数値として指定してください!)をレンダリングします。
自分で試してみよう
<!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>