6.2 קומפוננטות ופרופס תרגול

תרגול - קומפוננטות ופרופס¶

תרגיל 1 - כרטיס משתמש¶

צרו קומפוננטה UserCard שמקבלת ב-props:
- name - שם (מחרוזת)
- email - אימייל (מחרוזת)
- role - תפקיד (מחרוזת)

הציגו את הפרטים בכרטיס מעוצב. הגדירו interface עבור ה-props. הציגו ב-App שלושה כרטיסים עם נתונים שונים.

תרגיל 2 - כפתור עם אופציות¶

צרו קומפוננטה Button שמקבלת:
- label - הטקסט (מחרוזת, חובה)
- variant - סוג הכפתור: "primary" | "secondary" | "danger" (אופציונלי, ברירת מחדל "primary")
- disabled - האם הכפתור מנוטרל (בוליאני אופציונלי, ברירת מחדל false)
- onClick - פונקציה שתופעל בלחיצה

הכפתור צריך לקבל צבע רקע שונה לפי ה-variant (למשל: כחול, אפור, אדום). הציגו ב-App כמה וריאציות של הכפתור.

תרגיל 3 - כרטיס עם children¶

צרו קומפוננטה Card שמקבלת:
- title - כותרת (מחרוזת)
- footer - טקסט תחתון (מחרוזת אופציונלית)
- children - תוכן פנימי

הקומפוננטה מציגה את הכותרת למעלה, את ה-children באמצע, ואת ה-footer למטה (רק אם הוא קיים).

השתמשו בקומפוננטה עם תכנים שונים ב-children:

<Card title="About me">
    <p>I am a developer.</p>
    <p>I love React.</p>
</Card>

<Card title="Contact" footer="Last updated: today">
    <a href="mailto:a@b.com">Email me</a>
</Card>

תרגיל 4 - רשימת מוצרים¶

צרו שתי קומפוננטות:

ProductItem - מקבלת:
- name - שם המוצר
- price - מחיר
- onAddToCart - callback שנקרא בלחיצה על כפתור "הוסף לסל" ומעביר את שם המוצר

ProductList - מציגה כמה ProductItem ומטפלת ב-callback עם הודעת console.log.

תרגיל 5 - הרכבת קומפוננטות¶

בנו עמוד פרופיל מורכב מהקומפוננטות הבאות:

Avatar - מקבלת src ו-size (ברירת מחדל 80), מציגה תמונה עגולה
Badge - מקבלת text ו-color, מציגה תגית קטנה צבעונית
ProfileHeader - מקבלת name, title, avatarUrl, ומערך badges. משתמשת ב-Avatar וב-Badge כדי להציג את הכל
ProfilePage - משתמשת ב-ProfileHeader ובקומפוננטות נוספות לפי בחירתכם

תרגיל 6 - קומפוננטת Layout¶

צרו קומפוננטת Layout שמייצגת מבנה עמוד:

header - prop מסוג React.ReactNode שמוצג בחלק העליון
sidebar - prop מסוג React.ReactNode (אופציונלי) שמוצג בצד
children - התוכן הראשי
footer - prop מסוג React.ReactNode (אופציונלי) שמוצג בתחתית

הציגו ב-App עמוד שלם עם כל החלקים:

<Layout
    header={<h1>My Website</h1>}
    sidebar={<nav><a href="#">Home</a></nav>}
    footer={<p>Copyright 2026</p>}
>
    <p>Main content goes here.</p>
</Layout>

שאלות¶

מה ההבדל בין props ל-state? (רמז: state נלמד בהמשך, אבל מה תוכלו לנחש?)
למה props הם read-only?
מה ההבדל בין children לבין props רגילים?
מתי נשתמש ב-callback props?
מתי כדאי לפצל קומפוננטה גדולה לקומפוננטות קטנות?