مكون بيعمل كل حاجة

تخيل إنك بتعمل متجر وعندك Product Card.

function ProductCard({ product }) {  return (    <div className="card">      <img src={product.image} />      <h3>{product.name}</h3>      <p>{product.price}</p>      <button>Add to Cart</button>    </div>  );}

في البداية ده تمام. بعد شوية احتجت:

• Product Card عادية.
• Product Card فيها زرار Favorite.
• Product Card للـ Admin فيها Edit و Delete.
• Product Card للموبايل بتصميم مختلف.

ممكن تبدأ تزود props كتير.

<ProductCard  product={product}  showFavorite  showEdit={isAdmin}  showDelete={isAdmin}  showAddToCart  compact/>

ومع الوقت المكون يبقى مليان شروط if، وصعب تعدّله أو تعيد استخدامه.

خلّصت الفصل لما

• تشرح إن الكارت الواحد بدأ بكفاية
• تعرف إن كل شكل جديد بقى prop منطقية
• تعرف إن الشروط جوه المكون بتصعّب التعديل