7.5 Error Boundaries, Portals ו Suspense תרגול

תרגול - Error Boundaries, Portals ו-Suspense¶

תרגיל 1 - Error Boundary מותאם אישית¶

צרו Error Boundary מותאם עם יכולות מתקדמות.

דרישות:
- הציגו הודעת שגיאה ידידותית למשתמש
- כפתור "נסה שוב" שמאפס את השגיאה
- כפתור "צפה בפרטים" שמציג/מסתיר את ה-stack trace
- רישום השגיאה ל-console עם מידע נוסף (שם הקומפוננטה שנפלה)
- צרו כמה קומפוננטות שזורקות שגיאות ועטפו כל אחת בנפרד

תרגיל 2 - מערכת מודלים עם Portal¶

צרו מערכת מודלים (modals) מלאה באמצעות Portals.

דרישות:
- קומפוננטת Modal בסיסית שמתרנדרת ב-document.body
- סגירה על לחיצה מחוץ למודל, על Escape, ועל כפתור סגירה
- מניעת גלילה ב-body כשמודל פתוח
- תמיכה במודלים מקוננים (מודל שפותח מודל)
- אנימציית כניסה ויציאה (fade)
- וריאנטים: ConfirmDialog (אישור/ביטול), AlertDialog (הודעה עם אישור)

צרו קומפוננטות Tooltip ו-Dropdown שמשתמשות ב-Portals.

דרישות:
- Tooltip: מופיע על hover, מיקום דינמי (מעל, מתחת, ימין, שמאל), חץ שמצביע לאלמנט
- Dropdown: נפתח על לחיצה, נסגר על לחיצה בחוץ, תמיכה בפריטים מקוננים (submenu)
- שניהם חייבים לעבוד נכון גם כשההורה יש לו overflow: hidden
- מיקום אוטומטי - אם אין מקום למטה, מופיע למעלה

תרגיל 4 - טעינה עצלה עם Suspense¶

צרו אפליקציה עם טעינה עצלה (lazy loading).

דרישות:
- צרו 4-5 דפים (קומפוננטות) בקבצים נפרדים
- טענו את הדפים עם React.lazy
- הוסיפו Suspense עם fallback מותאם (skeleton loader)
- הוסיפו preloading - כשהעכבר מרחף על הלינק, מתחילה טעינת הדף
- מדדו את גודל ה-bundle לפני ואחרי פיצול הקוד (הסבירו את המושג)
- הוסיפו Error Boundary לכל דף שנטען עצלנית

תרגיל 5 - מערכת התראות עם Portal¶

צרו מערכת התראות (Toast notifications) מלאה.

דרישות:
- התראות מופיעות בפינה העליונה באמצעות Portal
- תמיכה במיקומים שונים (פינה עליונה/תחתונה, ימין/שמאל)
- סוגי התראות: success, error, warning, info עם צבעים שונים
- אנימציית כניסה (slide-in) ויציאה (fade-out)
- סגירה אוטומטית אחרי timeout מוגדר
- אפשרות לסגירה ידנית
- מקסימום התראות מוצגות בו-זמנית (5) - חדשה דוחפת ישנה

תרגיל 6 - אפליקציה מלאה עם שלושת המנגנונים¶

צרו אפליקציה שמשלבת Error Boundaries, Portals ו-Suspense.

דרישות:
- אפליקציית חנות עם דפים שנטענים עצלנית
- מודל "הוסף לסל" ומודל "אישור הזמנה" עם Portals
- Error Boundary ברמת כל דף ו-Error Boundary גלובלי
- Skeleton loaders בזמן טעינת דפים
- מערכת Toast להודעות הצלחה/שגיאה
- טיפול בשגיאות רשת (fetch) עם useErrorBoundary

שאלות¶

למה Error Boundaries מוגבלים לקומפוננטות מחלקה? האם יש דרך להשתמש בהם בקומפוננטות פונקציה?
מה ההבדל בין event bubbling ב-DOM לבין ב-React כשמשתמשים ב-Portals?
מתי כדאי להשתמש ב-React.lazy ומתי עדיף לטעון הכל מראש?
מה הסכנות בשימוש יתר ב-Portals? מתי עדיף לא להשתמש בהם?
איך Suspense עובד מאחורי הקלעים? מה הקשר שלו ל-Promises?