לדלג לתוכן

6.3 טיפוסים בריאקט תרגול

תרגול - טיפוסים בריאקט

תרגיל 1 - טיפוסי Props מורכבים

צרו קומפוננטה DataTable שמקבלת ב-props:

  • title - כותרת הטבלה (מחרוזת)
  • columns - מערך של אובייקטים, כל אחד עם header (מחרוזת) ו-accessor (מחרוזת)
  • data - מערך של אובייקטים מטיפוס Record<string, string | number>
  • striped - האם להציג שורות בצבעים מתחלפים (בוליאני אופציונלי)

הגדירו interface מתאים לכל הטיפוסים. הקומפוננטה צריכה להציג טבלת HTML עם כותרות ונתונים.

תרגיל 2 - טיפוסי אירועים

צרו קומפוננטה InteractiveBox שמגיבה לאירועים שונים:

  • לחיצת עכבר - מציגה את הקואורדינטות
  • הקלדה בשדה טקסט - מציגה את הטקסט שהוקלד
  • שליחת טופס - מציגה הודעה
  • hover - משנה את צבע הרקע

הגדירו פונקציות handler נפרדות לכל אירוע עם הטיפוסים הנכונים. אל תשתמשו ב-any.

תרגיל 3 - CSSProperties

צרו קומפוננטה ThemeBox שמקבלת:

  • theme מטיפוס "light" | "dark" | "colorful"
  • customStyle מטיפוס React.CSSProperties (אופציונלי)
  • children מטיפוס React.ReactNode

הקומפוננטה מגדירה סגנון בסיסי לפי ה-theme ומאפשרת דריסה עם customStyle. הגדירו אובייקט Record<string, React.CSSProperties> שממפה כל theme לסגנון מתאים.

תרגיל 4 - קומפוננטה גנרית

צרו קומפוננטה גנרית Dropdown<T> שמקבלת:

  • options - מערך של T
  • getLabel - פונקציה שמחזירה את הטקסט להצגה
  • getValue - פונקציה שמחזירה ערך ייחודי (מחרוזת)
  • selected - הערך הנבחר (T או null)
  • onChange - callback שמקבל את האופציה שנבחרה

השתמשו בקומפוננטה עם שני טיפוסים שונים: מערך של מחרוזות פשוטות, ומערך של אובייקטי Product עם id, name, ו-price.

תרגיל 5 - הרחבת אטריביוטי HTML

צרו קומפוננטה TextInput שמרחיבה את React.InputHTMLAttributes<HTMLInputElement> ומוסיפה:

  • label - תווית (מחרוזת)
  • error - הודעת שגיאה (מחרוזת אופציונלית)
  • helperText - טקסט עזרה (מחרוזת אופציונלית)

הקומפוננטה מעבירה את כל שאר ה-props ל-input הפנימי עם ...rest. כשיש error, הקומפוננטה מציגה את השגיאה באדום.

השתמשו בקומפוננטה עם אטריביוטים סטנדרטיים כמו type, placeholder, required, maxLength.

תרגיל 6 - טיפוסים מורכבים

צרו מערכת של קומפוננטות לתצוגת צ׳אט:

טיפוסים:
- User - עם id (מספר), name (מחרוזת), avatar (מחרוזת)
- Message - עם id (מספר), text (מחרוזת), sender (User), timestamp (Date), type ("text" | "image" | "system")

קומפוננטות:
- ChatMessage - מציגה הודעה בודדת עם אווטאר, שם השולח, הטקסט, והזמן
- ChatWindow - מקבלת מערך של Message ומציגה ChatMessage לכל אחת
- ChatInput - שדה טקסט עם כפתור שליחה, עם callback onSend: (text: string) => void

ודאו שכל ה-props מטויפסים עם interfaces מפורשים.

שאלות

  1. מה ההבדל בין React.ReactNode ל-React.ReactElement?
  2. למה אנחנו מציינים את סוג האלמנט בטיפוס האירוע (למשל HTMLButtonElement)?
  3. מתי נשתמש בקומפוננטה גנרית ומתי בקומפוננטה רגילה?
  4. מה היתרון של הרחבת React.InputHTMLAttributes לעומת הגדרת כל prop ידנית?