6.1 הקדמה לריאקט ו JSX תרגול

תרגול - הקדמה לריאקט ו-JSX¶

תרגיל 1 - הקמת פרויקט ריאקט¶

הקימו פרויקט ריאקט חדש עם Vite וטייפסקריפט:

א. צרו פרויקט חדש עם npm create vite@latest my-first-react -- --template react-ts.

ב. התקינו תלויות והריצו את שרת הפיתוח.

ג. פתחו את src/App.tsx והחליפו את כל התוכן בקומפוננטה פשוטה שמציגה את השם שלכם ומשפט קצר על עצמכם.

ד. ודאו שהשינוי מופיע בדפדפן בזמן אמת (Hot Module Replacement).

תרגיל 2 - ביטויים ב-JSX¶

צרו קומפוננטה Profile שמציגה פרופיל אישי. השתמשו במשתנים וביטויים בתוך JSX:

הגדירו משתנים: firstName, lastName, age, profession, hobbies (מערך של מחרוזות)
הציגו את השם המלא (שרשור של שני המשתנים)
הציגו את הגיל ואת הגיל בעוד 10 שנים
הציגו את מספר התחביבים
הציגו את התחביבים כמחרוזת מופרדת בפסיקים (השתמשו ב-join)
הציגו תאריך ושעה נוכחיים (השתמשו ב-new Date().toLocaleString())

תרגיל 3 - className ו-style¶

צרו קומפוננטה StyledCard שמציגה כרטיס מעוצב:

א. השתמשו ב-className כדי להוסיף מחלקות CSS לאלמנטים (צרו קובץ CSS מתאים או השתמשו בסגנון inline).

ב. השתמשו באטריביוט style (אובייקט) כדי להגדיר:
- צבע רקע דינמי שנקבע לפי משתנה (isVIP)
- גודל פונט שנקבע לפי משתנה מספרי
- padding ו-border-radius

ג. הציגו את הכרטיס פעמיים ב-App - פעם עם isVIP = true ופעם עם isVIP = false.

תרגיל 4 - Fragments¶

צרו קומפוננטה UserInfo שמחזירה רשימת פרטים על משתמש בלי אלמנט עוטף מיותר.

הקומפוננטה צריכה להחזיר:
- תגית <dt> עם שם השדה ותגית <dd> עם הערך, עבור: שם, אימייל, וגיל

השתמשו ב-Fragment כי אם נעטוף ב-div זה ישבור את מבנה ה-<dl>:

function App() {
    return (
        <dl>
            <UserInfo />
        </dl>
    );
}

תרגיל 5 - כרטיס מוצר¶

צרו קומפוננטה ProductCard שמציגה כרטיס מוצר ובה:

שם המוצר
מחיר (מוצג עם סימן מטבע ושתי ספרות אחרי הנקודה - השתמשו ב-toFixed(2))
תיאור קצר
האם המוצר במלאי (הציגו "במלאי" או "אזל מהמלאי" לפי משתנה בוליאני)
הנחה באחוזים ומחיר אחרי הנחה (חישוב בתוך JSX)

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

תרגיל 6 - שעון¶

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

את התאריך הנוכחי בפורמט מקומי
את היום בשבוע (השתמשו ב-toLocaleDateString עם אופציית weekday)
האם זה בוקר, צהריים, ערב או לילה (לפי השעה הנוכחית)
משפט ברכה מתאים לשעה ("בוקר טוב", "צהריים טובים", "ערב טוב", "לילה טוב")

כרגע השעון יציג את הזמן שבו הקומפוננטה נטענה (בהמשך נלמד לעדכן אותו בזמן אמת).

שאלות¶

מה ההבדל בין ספרייה (library) ל-framework?
מה זה SPA ומה היתרונות שלו?
למה שם קומפוננטה חייב להתחיל באות גדולה?
מה ההבדל בין class ל-className ב-JSX?
למה צריך Fragments? מתי נעדיף Fragment על div?
אילו ביטויים אפשר לשים בתוך {} ב-JSX ואילו לא?