部品を使い回す

React入門 / 全 6 枚

コピペと再利用

同じ見た目のカードを増やすとき、コピーして貼るのと、部品を再利用するのとでは、直すときの手間が変わります。左は書いた数だけ直し、右は WorkCard.jsx を1か所直すだけです。

コピーして貼る

<li className="work-card">
  <h3>レシピ検索アプリ</h3>
  <p>web / 2025</p>
</li>
<li className="work-card">
  <h3>買い物メモツール</h3>
  <p>tool / 2025</p>
</li>

WorkCard を値違いで使う

<WorkCard title="レシピ検索アプリ"
  category="web" year={2025} />
<WorkCard title="買い物メモツール"
  category="tool" year={2025} />

1 / 6

← → キーでも送れます