Menu
Coddy logo textTech

まとめ:Props

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

challenge icon

チャレンジ

簡単

章のまとめ: props と children から構築された小さなメニュー。

  1. Itemnameprice の props を受け取り、その <li> 内に {name}: ${price} をレンダリングするようにします。
  2. Cardchildren を表示する className="card" を持った <div> をレンダリングするようにします。
  3. 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>

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