Menu
Coddy logo textTech

ステップ 2:Propsを使ったカード

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 40/42。

challenge icon

チャレンジ

簡単

カードを再利用可能にします。

  1. namebio の props を受け取り、ステップ 1 と同じ構造(card div、id="profile-name"id="profile-bio")を prop の値を使ってレンダリングする ProfileCard を定義します。
  2. 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>

基本概念のすべてのレッスン