כתבו פרויקט ריאקט עם next.js מקומית על המכונה שלכם ובתוכו פיתרו את הסעיפים הבאים. יש לכתוב את הקוד לכל סעיף בתוך קומפוננטה נפרדת ולהציג אותם מתוך קומפוננטת page.tsx הראשית. בכל התרגילים צירפתי דוגמה לאיך התוצאה צריכה להיראות אבל המטרה שלנו היא לא להתאמן על CSS אז תרגישו חופשיים להיות יצירתיים ולעצב בצורה שקלה לכם.

1. שלוש תמונות של חתולים

מצאו שלוש תמונות של חתולים ברשת וכיתבו קומפוננטת ריאקט שתציג אותם בעזרת אלמנטי img. לאחר מכן הוסיפו מסגרת (border) לכל תמונה.

התוצאה צריכה להיראות כך:

2. לוח הכפל עד 4

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

3. טופס כניסה לאתר

כתבו קומפוננטה שמציגה טופס כניסה לאתר הכולל תיבה עבור שם משתמש, תיבה עבור סיסמה ו Checkbox עבור "Remember Me". התוצאה צריכה להיראות כך: