6.9 חשיבה בריאקט תרגול

תרגול - חשיבה בריאקט

תרגיל 1 - פירוק ממשק

לפני כתיבת קוד, תרגלו את שלב הפירוק. בהינתן אפליקציית חנות מקוונת עם:

• סרגל חיפוש למעלה עם שדה טקסט ודרופדאון של קטגוריות
• רשימת מוצרים בכרטיסים (תמונה, שם, מחיר, כפתור "הוסף לסל")
• סרגל צד עם סיננים (טווח מחירים, דירוג, במלאי בלבד)
• עגלת קניות שמציגה מוצרים נבחרים, כמויות, וסכום כולל

משימות:
1. ציירו עץ קומפוננטות (רשימה מדורגת)
2. זהו את הסטייט המינימלי (רשימה)
3. קבעו היכן כל סטייט חי
4. זהו אילו callbacks צריך להעביר

תרגיל 2 - מנהל אנשי קשר

בנו אפליקציית מנהל אנשי קשר בגישת "חשיבה בריאקט":

קומפוננטות:

• ContactApp - קומפוננטה ראשית שמנהלת את הסטייט
• AddContactForm - טופס להוספת איש קשר (שם, טלפון, אימייל, קבוצה)
• SearchBar - שדה חיפוש + דרופדאון לסינון לפי קבוצה
• ContactList - רשימת אנשי הקשר המסוננת
• ContactCard - כרטיס של איש קשר בודד עם כפתורי עריכה ומחיקה

דרישות:

• הוספה, מחיקה, ועריכה של אנשי קשר
• חיפוש לפי שם
• סינון לפי קבוצה (friends/family/work/all)
• הצגת מספר אנשי הקשר
• כשלוחצים "ערוך", הטופס נטען עם הנתונים הקיימים ומאפשר עדכון

חשבו על: מה הסטייט המינימלי? איפה הוא חי? מה מחושב?

תרגיל 3 - Composition

צרו מערכת קומפוננטות גנריות שמשתמשות ב-composition:

קומפוננטה 1 - Modal:
- קומפוננטה Modal שמקבלת isOpen, onClose, title, ו-children
- מציגה overlay כהה ותיבה עם כותרת, תוכן (children), וכפתור סגירה
- סגירה גם בלחיצה על ה-overlay

קומפוננטה 2 - Tabs:
- קומפוננטה Tabs שמקבלת tabs (מערך של { label: string, content: React.ReactNode })
- מציגה כפתורי tab למעלה ואת תוכן ה-tab הפעיל למטה

קומפוננטה 3 - Accordion:
- קומפוננטה Accordion שמקבלת items (מערך של { title: string, content: React.ReactNode })
- כל פריט נפתח ונסגר בלחיצה על הכותרת
- רק פריט אחד יכול להיות פתוח בכל רגע

צרו App שמדגים את השימוש בשלוש הקומפוננטות.

תרגיל 4 - לוח מודעות

בנו אפליקציית לוח מודעות עם הפרדה ברורה בין קומפוננטות:

נתונים:
- כל מודעה כוללת: id, כותרת, תוכן, קטגוריה (sale/jobs/housing/services), תאריך יצירה, שם מפרסם

קומפוננטות:
- BulletinBoard - ראשי, מנהל סטייט
- PostForm - טופס ליצירת מודעה חדשה
- FilterControls - חיפוש + סינון לפי קטגוריה + מיון (חדש ראשון / ישן ראשון)
- PostList - רשימת המודעות
- PostCard - כרטיס מודעה בודדת עם כפתור מחיקה

דרישות:
- חיפוש בכותרת ובתוכן
- סינון לפי קטגוריה
- מיון לפי תאריך
- הצגת "אין מודעות" כשהרשימה ריקה
- מספר המודעות בכל קטגוריה ליד שם הקטגוריה בדרופדאון

תרגיל 5 - ניתוח קוד

הנה קומפוננטה "שטוחה" שעושה הכל בעצמה. שכתבו אותה לפי עקרונות חשיבה בריאקט - פצלו לקומפוננטות, הרימו סטייט, והוסיפו טיפוסים:

function App() {
    const [items, setItems] = useState([]);
    const [input, setInput] = useState("");
    const [filter, setFilter] = useState("all");
    const [editId, setEditId] = useState(null);
    const [editText, setEditText] = useState("");
    const [nextId, setNextId] = useState(1);

    // ... imagine 200 lines of JSX and handlers all in one component
}

פצלו ל: App, AddItemForm, FilterButtons, ItemList, ItemRow. הגדירו interfaces ל-props של כל קומפוננטה.

שאלות

1. תארו את חמשת השלבים של "חשיבה בריאקט" במשפט אחד כל אחד.
2. מה ההבדל בין סטייט לערך מחושב? תנו דוגמה.
3. איך מחליטים באיזו קומפוננטה הסטייט חי?
4. מה זה "זרימת נתונים הפוכה" ולמה צריך אותה?
5. מתי כדאי לפצל קומפוננטה ומתי לא?