Travel List App
אפליקציה לניהול רשימת ציוד לטיול תוך שימוש ב־useState ו־map. נבנה בתחילת הקורס כדי לתרגל עבודה עם רשימות וסטייט.
📘 קורס React
לימוד שלב אחר שלב עם פרקים מופרדים, רכיבים, וניווט צד.
📘 קורס React - פיתוח ממשקי משתמש מודרניים
React היא אחת מהספריות הפופולריות ביותר כיום לפיתוח ממשקי משתמש (UI) מודרניים וידידותיים. הקורס הזה מיועד למי שרוצה ללמוד את React מהבסיס ועד רמה מתקדמת, דרך פרויקטים שמדמים את עולם העבודה האמיתי.
במהלך הקורס נלמד כיצד ליצור קומפוננטות, לעבוד עם JSX, להעביר מידע עם Props ו־State, ולהשתמש ב־Hooks כמו useContext, useEffect, useReducer.
נעמיק בטפסים, ניהול נתונים, ריאקטיביות, ספריות צד שלישי כמו React Router, Swiper, Axios ו־Tailwind CSS עם Next.js.
אם אתה שואף להפוך למפתח Frontend מקצועי — זה בדיוק המקום להתחיל בו.
🧭 מה נלמד בקורס React?
- 🚀 יסודות
- 🔹 מבוא ל־React: למה לבחור React, התקנה ויצירת פרויקט
- 🔹 JSX: התחביר של React המשלב JavaScript ו־HTML
- 🔹 קומפוננטות: רכיבים בסיסיים ומקוננים (Nested Components)
- 🔹 Props: העברת מידע בין רכיבים
- 🔹 State: ניהול מצב פנימי בקומפוננטות
- 🔹 Events: תגובה לפעולות המשתמש
- 🎯 Hooks בסיסיים
- 🔹 useState: ניהול מצב פנימי
- 🔹 useEffect: קוד שרץ עם טעינה או שינוי
- 🔹 useRef: הפניה לערכים ואלמנטים
- 🔹 useReducer: ניהול מצבים מורכבים
- 🔹 useContext + Context API: ניהול מידע גלובלי באפליקציה
- 🧠 נושאים מתקדמים
- 🔹 Prop Drilling: העברת props דרך רכיבים רבים
- 🔹 memo, useMemo, useCallback: שיפור ביצועים
- 🔹 PropsTypes: בדיקת סוגי props
- 🔹 תנאים ו־CSS דינמי: שינוי עיצוב לפי מצב
- 🔹 טפסים מרובים: ניהול קלטים ותהליכים
- 🌐 ניתוב (Routing)
- 🔹 React Router 6: SPA עם דפים דינמיים
- 🔹 עמודים דינמיים: פרמטרים ותתי־נתיבים
- 🔗 HTTP ו־API
- 🔹 fetch ו־Axios: שליפת נתונים משרתים
- 🔹 userFetch: hook מותאם
הקורס מיועד גם למי שרוצה לחזק את ההבנה בתכנות בסיסי ובחשיבה אלגוריתמית.
🔍 איך React שונה בטעינת אתרים?
בתמונה הבאה ניתן לראות את ההבדל בין אתרים מסורתיים שנבנים בשרת (כמו WordPress) לבין אתרי SPA שנבנים ב־React.
בזמן שאתרי שרת טוענים מחדש כל עמוד, אתרי React טוענים דף יחיד ומחליפים תוכן בצד לקוח — מה שמייצר חוויית משתמש חלקה ומהירה יותר.
🔍 לחץ להגדלה
פרויקטים שנבנה
סוגי פרויקטים
כאן תמצאו מבחר פרויקטים שבנינו במהלך הקורס – כל אחד מהם מדגיש שימוש ב־React Hook שונה, כמו useState, useEffect, useRef, useReducer, useMemo ואחרים. ניתן ללחוץ על הכפתורים כדי לסנן את הפרויקטים לפי ה־Hook שנלמד בפרויקט.
Testimonial Cards
כרטיסים עם חוות דעת של לקוחות. מדמה תצוגה שיווקית עם מעבר שקוף ו־Swiper.
Accordion FAQ
רכיב אינטראקטיבי המציג שאלות ותשובות. נבנה עם תנאים, state ו־CSS פשוט.
Shopping Cart with Context
אפליקציית עגלת קניות מלאה המשתמשת ב־React Context ו־useReducer. כולל הוספה, הסרה וסיכום מחירים.
Movie API App
פרויקט המשתמש ב־API להצגת סרטים פופולריים כולל חיפוש ודירוג. שימוש ב־fetch, useEffect ו־useState.
Shopping Cart with Redux
אותו רעיון כמו הקודם, אך עם Redux Toolkit לניהול state ברמה מתקדמת. כולל devtools וספלייסרים.
Slider with useRef
מצגת תמונות הניתנת לשליטה ע useRef. מדגים גישה ישירה לאלמנטים בדום כדי לבצע גלילה אופקית או מעבר חלק.
API Fetch with useCallback
פרויקט של חיפוש נתונים מממשק API עם Custom Hook ו־useCallback לשמירת פונקציות קבועות בזיכרון, לשיפור ביצועים.
Filtered List App
רשימת פריטים עם סינון מתקדם לפי קטגוריות או טקסט. שימוש ב־useMemo כדי למנוע רינדורים מיותרים.