6.4 סטייט תרגול
תרגול - סטייט¶
תרגיל 1 - מונה¶
צרו קומפוננטה Counter עם:
- תצוגת המספר הנוכחי
- כפתור הגדלה (+1)
- כפתור הקטנה (-1)
- כפתור איפוס (חזרה ל-0)
- המונה לא יכול לרדת מתחת ל-0 (כפתור ההקטנה מנוטרל כשהמונה הוא 0)
תרגיל 2 - רשימת משימות פשוטה¶
צרו קומפוננטה TodoList עם:
- שדה טקסט להוספת משימה חדשה
- כפתור "הוסף" שמוסיף את הטקסט לרשימה ומנקה את השדה
- הצגת כל המשימות ברשימה
- כפתור מחיקה ליד כל משימה
- מספר המשימות הכולל מוצג למעלה
השתמשו בטיפוס string[] לסטייט.
תרגיל 3 - טופס עם אובייקט סטייט¶
צרו קומפוננטה RegistrationForm עם אובייקט סטייט אחד שמכיל:
username(מחרוזת)email(מחרוזת)age(מספר)newsletter(בוליאני)
הציגו טופס עם שדות לכל הנתונים. מתחת לטופס, הציגו תצוגה מקדימה של הנתונים שהוזנו. הקפידו לעדכן את הסטייט עם spread operator.
תרגיל 4 - מערך של אובייקטים¶
צרו קומפוננטה ContactList שמנהלת רשימת אנשי קשר. כל איש קשר הוא אובייקט עם:
id(מספר)name(מחרוזת)phone(מחרוזת)isFavorite(בוליאני)
הקומפוננטה צריכה לתמוך ב:
- הוספת איש קשר חדש (עם שדות טופס)
- מחיקת איש קשר
- סימון/ביטול סימון כמועדף (toggle)
- הצגת מספר המועדפים
תרגיל 5 - עדכון פונקציונלי¶
צרו קומפוננטה BatchCounter שמדגימה את ההבדל בין עדכון רגיל לפונקציונלי:
- הציגו שני מונים זה ליד זה
- כפתור "+3 (רגיל)" שקורא ל-
setCount(count + 1)שלוש פעמים - כפתור "+3 (פונקציונלי)" שקורא ל-
setCount(prev => prev + 1)שלוש פעמים - כפתור איפוס לשניהם
הריצו וראו את ההבדל.
תרגיל 6 - עגלת קניות¶
צרו מערכת עגלת קניות עם שתי קומפוננטות:
ProductCatalog - מציגה רשימת מוצרים קבועה (hardcoded) עם כפתור "הוסף לסל" לכל מוצר
ShoppingCart - מציגה את המוצרים שנבחרו, הכמות של כל אחד, ואת הסכום הכולל
הסטייט של העגלה צריך לחיות ב-App (הרמת סטייט) ולהיות מועבר ל-ShoppingCart. כשמוסיפים מוצר שכבר בעגלה, הכמות עולה ב-1.
תרגיל 7 - הרמת סטייט¶
צרו מערכת עם שלוש קומפוננטות:
ColorPicker - שדה input מסוג color שמאפשר לבחור צבע
Preview - מציגה ריבוע בצבע הנבחר עם הקוד שלו
App - מכילה את שתי הקומפוננטות ומנהלת את סטייט הצבע
שתי הקומפוננטות צריכות להיות מסונכרנות - שינוי ב-ColorPicker מתעדכן מיד ב-Preview.
שאלות¶
- מה ההבדל בין props ל-state?
- למה אסור לשנות סטייט ישירות (mutation)?
- מה קורה כשקוראים ל-setState? תארו את תהליך הרינדור.
- מתי צריך עדכון פונקציונלי ומתי עדכון רגיל מספיק?
- מתי מרימים סטייט? מה הכלל?
- למה
pushלא עובד לעדכון מערך בסטייט?