מבוא ל־React: לומדים כיצד לבנות את ה־UI באמצעות JSX, ליצור רכיבים פונקציונליים ולפרק את הממשק לחלקים קטנים. הבנה של JSX היא הבסיס לכל בניית אתר ב־React ומאפשרת כתיבה ברורה ונוחה.

שימוש ב־useState לניהול נתונים משתנים בתוך רכיב, וטיפול באירועים כמו onClick ו־onChange. הנושא חשוב כי הוא מאפשר יצירת אינטראקציה עם המשתמש והפיכת הדפים לדינמיים.

לומדים לנווט בין עמודים שונים ב־SPA באמצעות react-router-dom. מושגים כמו Routes, Link ו־useParams מאפשרים בניית אתרים מרובי עמודים בצורה מקצועית.

הבנה של controlled components, עבודה עם טפסים, איסוף נתונים מהמשתמש וביצוע ולידציה בסיסית. נושא חובה לכל אתר הכולל הרשמה, התחברות או חיפוש.

שימוש ב־fetch או axios לשליחת בקשות לשרת וטעינת נתונים חיצוניים לתוך האתר. אחד הנושאים המרכזיים בבניית אפליקציות מודרניות שמתקשרות עם מסדי נתונים.

שיתוף מידע בין רכיבים ללא העברת props בכל שלב. לומדים פתרון אלגנטי למצבים בהם נתונים צריכים להיות זמינים לכל חלקי האפליקציה.

דוגמה מצוינת להבנת הרעיון של state – נתונים שמשתנים לאורך זמן. מאפשר להבין את התפקיד המרכזי של useState בבניית התנהגות דינמית.

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

שימוש ב־useRef מאפשר גישה ישירה לאלמנטים ב־DOM ושמירה על ערכים בין רינדורים. נלמד איך לתת פוקוס לשדה או למדוד גדלים של רכיבים.

דוגמה לניהול לוגיקה מורכבת דרך reducer. useReducer מתאים במיוחד למצבים בהם יש פעולות רבות כמו הוספה, מחיקה ועדכון של פריטים.

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

מונע יצירה מחדש של פונקציות בכל רינדור. חשוב במיוחד כשמעבירים פונקציות כ־props לרכיבים אחרים כדי להימנע מרינדורים מיותרים.

משמש למצבים בהם צריך למדוד או לחשב משהו *לפני* שהדף מצויר למסך. שימושי באנימציות, מיקומים ודינמיקה של עיצוב.

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

useReducer מאפשר ניהול מצב מורכב בצורה מסודרת וצפויה, במיוחד בטפסים עם ולידציה ושגיאות. הלוגיקה מרוכזת בפונקציית reducer אחת — כמו Redux אבל קל ופשוט יותר לתפעול.

פרויקט שמדגים מעבר מ־useState ל־useReducer: מחיקה של פריטים, איפוס הרשימה, ניקוי מלא, שימוש ב־actions ו־reducer חיצוני. תרגול מצוין להבנת זרימת עבודה מודרנית כמו ב־Redux אך ברמה מקומית של רכיב.