6.5 אירועים ורינדור מותנה תרגול

תרגול - אירועים ורינדור מותנה¶

תרגיל 1 - כפתור Toggle¶

צרו קומפוננטה ToggleMessage שמציגה:

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

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

צרו קומפוננטה AlertSystem שמציגה:

שלושה כפתורים: "מידע", "אזהרה", "שגיאה"
לחיצה על כפתור מציגה הודעה מתאימה בצבע מתאים (כחול, כתום, אדום)
כפתור "סגור" על ההודעה שמסתיר אותה
אם אין הודעה פעילה, מציגים "אין הודעות"

השתמשו ב-union type עבור סוג ההודעה.

תרגיל 3 - מלכודת ה-0¶

בקוד הבא יש באג. מצאו אותו, הסבירו למה הוא קורה, ותקנו:

function MessageCount({ messages }: { messages: string[] }) {
    return (
        <div>
            <h2>Inbox</h2>
            {messages.length && (
                <ul>
                    {messages.map((msg, i) => (
                        <li key={i}>{msg}</li>
                    ))}
                </ul>
            )}
        </div>
    );
}

מה יוצג כש-messages הוא מערך ריק? למה? כתבו שלוש דרכים שונות לתקן את הבאג.

תרגיל 4 - טאבים¶

צרו קומפוננטה Tabs שמציגה מערכת טאבים:

מערך של טאבים, כל אחד עם title ו-content
לחיצה על טאב מציגה את התוכן שלו
הטאב הפעיל מסומן (רקע שונה או קו תחתון)
הציגו לפחות 3 טאבים

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

תרגיל 5 - טופס עם ולידציה מותנית¶

צרו קומפוננטה LoginForm עם:

שדה אימייל ושדה סיסמה
הודעת שגיאה מופיעה ליד כל שדה אם הערך לא תקין (אימייל חייב להכיל @, סיסמה חייבת להיות לפחות 6 תווים)
הודעות השגיאה מופיעות רק אחרי שהמשתמש עזב את השדה (onBlur)
כפתור ההתחברות מנוטרל כל עוד הנתונים לא תקינים
לחיצה על "התחבר" מציגה הודעת הצלחה ומסתירה את הטופס

תרגיל 6 - רשימה עם סינון ומיון¶

צרו קומפוננטה FilterableList שמציגה רשימת פריטים (מוצרים, משימות, או כל דבר אחר) עם:

שדה חיפוש שמסנן את הרשימה בזמן אמת
כפתורי מיון (לפי שם, לפי מחיר, וכו׳)
הודעת "לא נמצאו תוצאות" כשהסינון לא מחזיר תוצאות
הצגת מספר התוצאות מתוך סך הכל

השתמשו ברינדור מותנה בכמה מקומות ובאירועים לעדכון הסינון והמיון.

שאלות¶

מה ההבדל בין onClick={handleClick} ל-onClick={handleClick()}?
מה זה SyntheticEvent?
מתי נשתמש ב-&& ומתי ב-ternary לרינדור מותנה?
מה מלכודת ה-0 וכיצד נמנעים ממנה?
מה היתרון של early return על פני ternary מקונן?