ステップ 2:Propsを使ったカード
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 40/42。
チャレンジ
簡単カードを再利用可能にします。
nameとbioの props を受け取り、ステップ 1 と同じ構造(card div、id="profile-name"、id="profile-bio")を prop の値を使ってレンダリングするProfileCardを定義します。- App 内で、name が
Grace Hopper、bio がInvented the compilerの ProfileCard を1つレンダリングします。
自分で試してみよう
<!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>