8.5 מנטין הוקים תרגול
תרגול - מנטין הוקים¶
תרגיל 1¶
צרו טופס הרשמה מלא עם useForm:
- שדות: שם (מינימום 2 תווים), אימייל (פורמט תקין), סיסמה (מינימום 8 תווים, חייבת להכיל אות גדולה ומספר), אישור סיסמה (חייב להתאים לסיסמה)
- ולידציה בזמן blur ובזמן שינוי
- הצגת שגיאות מתחת לכל שדה
- כפתור שליחה שמופעל רק כשהטופס תקין
- כפתור "נקה טופס" שמאפס הכל
השתמשו ב-useDisclosure להצגת הודעת הצלחה ב-Modal.
תרגיל 2¶
צרו קומפוננטת חיפוש מתקדמת:
- TextInput לחיפוש עם useDebouncedValue (300ms)
- הצגת תוצאות מסוננות מתוך רשימה מקומית
- הצגת "טוען..." בזמן ה-debounce (כשהערך המיידי שונה מהמושהה)
- הצגת "לא נמצאו תוצאות" כשאין תוצאות
- useHotkeys: Ctrl+K לפוקוס על שדה החיפוש, Escape לניקוי
השתמשו ב-useRef לפוקוס על השדה.
תרגיל 3¶
צרו דף הגדרות שנשמר אוטומטית:
- Switch: מצב כהה (useLocalStorage)
- Select: שפה - עברית/אנגלית (useLocalStorage)
- NumberInput: גודל פונט (useLocalStorage)
- TextInput: שם משתמש (useLocalStorage)
- כפתור "איפוס להגדרות ברירת מחדל"
כל שינוי נשמר אוטומטית ב-localStorage ונשאר אחרי רענון.
הוסיפו useMediaQuery להצגת הודעה שונה בטלפון/דסקטופ.
תרגיל 4¶
צרו רשימת משימות (TODO) עם הוקים:
- useForm לטופס הוספת משימה
- useLocalStorage לשמירת המשימות
- useDisclosure למודאל עריכת משימה
- useClipboard לכפתור "העתק רשימה" שמעתיק את כל המשימות כטקסט
- useHotkeys: Ctrl+N להוספת משימה חדשה, Ctrl+D למחיקת המשימה המסומנת
תרגיל 5¶
צרו קומפוננטת "חזרה למעלה" (Back to Top):
- כפתור צף שמופיע רק כשהמשתמש גלל למטה (useWindowScroll - y > 300)
- לחיצה גוללת חלק למעלה (useScrollIntoView)
- useMediaQuery - בטלפון הכפתור קטן יותר
- אנימציית כניסה/יציאה (CSS transition או opacity)
- הכפתור מוצמד לפינה שמאלית תחתונה
תרגיל 6¶
צרו דף עם אינסוף גלילה (Infinite Scroll):
- רשימת כרטיסיות שנטענות בקבוצות של 10
- useIntersection על אלמנט "שומר" בתחתית הרשימה
- כשה"שומר" נכנס לתצוגה - טען עוד פריטים
- הצגת Skeleton בזמן טעינה
- הצגת "אין עוד פריטים" כשהרשימה נגמרה
- useDebouncedValue למניעת טעינות כפולות
שאלות¶
- מה ההבדל בין useState רגיל לבין useLocalStorage?
- למה useDebouncedValue שימושי לחיפוש? מה קורה בלעדיו?
- מה עושה form.getInputProps ואיך זה חוסך קוד?
- מה ההבדל בין useIntersection ל-useScrollIntoView?
- מתי נשתמש ב-useHotkeys ומה זה mod?