למה React? 💡

React נולדה כי היה קשה לפתח ממשקי משתמש מודרניים עם השיטות הישנות. לפני React, פיתוח ה־frontend התבסס על קבצי JS, HTML, ו־CSS נפרדים, והדפדפן היה טוען דפים/משאבים מחדש בכל שינוי.

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

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

jQuery הקלה על מניפולציות DOM חוצות־דפדפנים, אבל עם הזמן קבצי ה־JS התנפחו, והקוד הפך ל־Spaghetti Code. במקום לוגיקה נקייה, נשארנו עם עדכונים נקודתיים והחלפת חלקים ב־DOM ידנית.

מכאן נולדה התפיסה של SPA (Single Page Application): טעינה חד־פעמית של האפליקציה, וכל שאר העדכונים קורים בצד־לקוח. ספריות מוקדמות כמו Backbone.js סללו דרך, אבל React (2011 בפייסבוק, פתוחה לציבור מ־2013) הביאה מודל דקלרטיבי, רכיבים לשימוש חוזר ו־Virtual DOM יעיל—וזה שינה את המשחק.

מה זה React בנקודות

ספריית JavaScript חזקה ל־UI: React היא ספרייה (לא פריימוורק) לבניית ממשקי משתמש דינמיים. היא מתמקדת בשכבת ה־UI בלבד, ולכן משלבים לפי צורך יכולות משלימות כמו ניתוב (Routing), ניהול־מצב ו־Data Fetching. הגישה הדקלרטיבית מפשטת את החשיבה: “מה להציג” במקום “איך לעדכן את ה־DOM”.
רכיבים לשימוש חוזר: הממשק מורכב מ־Components קטנים (כפתור, כרטיס, תפריט), שכל אחד בעל אחריות ברורה. ניתן למחזר, להרכיב (Composition) ולבדוק אותם בקלות—מה שמקצר פיתוח ומשפר תחזוקה לאורך זמן.
מקור: Meta (Facebook): נוצרה בפייסבוק ע״י Jordan Walke, ונפתחה לקוד פתוח ב־2013. היום היא מנוהלת ע״י Meta והקהילה ונפוצה מאוד בתעשייה, עם תיעוד מצוין ואקו־סיסטם עשיר.
Server Components: מאפשרים להריץ חלק מהרכיבים על השרת ולהחזיר HTML מוכן—פחות JavaScript נשלח ללקוח, זמן טעינה קצר יותר ו־SEO טוב. ב־Next.js (App Router) זה מגיע “מובנה” יחד עם טעינת נתונים, Streaming ו־Suspense.
Virtual DOM: React מחזיקה ייצוג וירטואלי של ה־DOM בזיכרון ומבצעת diff חכם מול המצב הקודם. רק ההבדלים המינימליים נכתבים ל־DOM האמיתי—מה שמקטין מניפולציות יקרות, כולל Batching אוטומטי ברינדור.
JSX: תחביר שמאפשר לכתוב markup דמוי־HTML בתוך JavaScript בצורה קריאה. בזמן ה־build הוא מומר ל־JS רגיל (באמצעות Babel/TypeScript או הבילדר – Vite/Next). אפשר גם להשתמש ב־Fragments ולהחזיר מערכים של אלמנטים בלי עטיפה מיותרת.
Hooks: API פונקציונלי ללוגיקה ו־state בתוך רכיבים: useState, useEffect,useMemo, useCallback, useRef ועוד. אפשר לבנות Hooks מותאמים (Custom Hooks) כדי לשתף לוגיקה בין רכיבים. יש “כללי Hooks”—קוראים להם רק בראש הפונקציה ובעדיפות לא בתוך תנאים.
Props: זרימת נתונים חד־כיוונית מהורה לילד הופכת את ההתנהגות לצפויה וקלה לדיבאג. כשצריך “להימנע מ־prop drilling” משתמשים ב־Context; לניהול־מצב גלובלי/מורכב משלבים כלים כמו Redux/Zustand, ול”מצב שרת” (Server State) מומלץ TanStack Query/SWR.
אקו־סיסטם: ניתוב: react-router או Next.js; ניהול־מצב: Redux, Zustand, Jotai, Context; טעינת נתונים: TanStack Query, SWR; ספריות UI: MUI, Chakra, shadcn/ui ועוד; בדיקות: React Testing Library, Jest. הקהילה הגדולה מספקת תבניות, דוגמאות ופתרונות לכל צורך כמעט.

⚖️ React vs Vanilla JS

Vanilla JS: אימפרטיבי ונגיעה ישירה ב־DOM. React: דקלרטיבי—מתארים UI כפונקציה של state ו־React מסנכרנת.

📚 תוכנית הלימוד בקורס React

✨ מבוא ל-JSX

1. לימוד JSX

JSX הוא תחביר מיוחד שמשלב בין JavaScript ל־HTML. הוא מאפשר לנו לכתוב קוד שנראה כמו HTML אבל מתנהג כמו JavaScript. כך אפשר לתאר את ה־UI בצורה קריאה וברורה, במקום לנהל מניפולציות על ה־DOM ידנית.

נלמד איך JSX עובד, איך הוא מומר לקוד JavaScript רגיל מאחורי הקלעים, ונראה דוגמאות בסיסיות לשימוש בו בתוך רכיבים.

🏗️ אתר עם JSX — מה זה כולל

אתר ב־React מתחיל מפירוק לרכיבים: Header, Navbar, Hero, Cards, Footer. באמצעות JSX אנחנו כותבים את מבנה ה־UI בצורה קריאה, מעבירים props בין רכיבים, וממחזרים רכיבים חוזרים.

(כשתעלה את האתר בהמשך — נכניס כאן הדגמה חיה/תמונה של האתר ונפרק אותו לרכיבים.)

JSX הוא תחביר שמאפשר לכתוב קוד שנראה כמו HTML בתוך JavaScript. כך אנחנו מתארים את ה־UI בצורה דקלרטיבית ונקייה, וריאקט כבר דואגת לסנכרן את המסך עם ה־state.

מתחת תראה שתי דוגמאות קצרות: שילוב ביטויים בתוך JSX, ורינדור רשימה דינמית בעזרת map.

דוגמה 1 — JSX כביטוי

אפשר לשלב חישובים, תנאים קצרים ו־className דינמי:

function Welcome({ user }) {
  const isAdmin = user.role === "admin";
  return (
    <header className={isAdmin ? "p-3 bg-green-100" : "p-3 bg-blue-100"}>
      <h1>שלום, {user.name}!</h1>
      <p>2 + 2 = {2 + 2}</p>
      <small>{isAdmin ? "יש לך הרשאות ניהול" : "משתמש רגיל"}</small>
    </header>
  );
}

// שימוש:
// <Welcome user={{ name: "נועה", role: "admin" }} />

דוגמה מורצת בפועל:

שלום, נועה!

2 + 2 = 4

יש לך הרשאות ניהול

דוגמה 2 — רינדור רשימה עם map

נבנה מערך נתונים ונרנדר אותו ל־JSX. חשוב לתת key ייחודי לכל פריט.

const courses = [
  { id: 1, title: "מבוא ל-React" },
  { id: 2, title: "JSX ורכיבים" },
  { id: 3, title: "Hooks בסיסיים" },
];

function CoursesList() {
  return (
    <ul>
      {courses.map((c) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

// שימוש:
// <CoursesList />

דוגמה מורצת בפועל:

מבוא ל-React
JSX ורכיבים
Hooks בסיסיים

2. בניית אתרים פשוטים עם JSX

אחרי ההיכרות עם JSX נבנה אתרים קטנים: כותרת, תפריט, כפתורים, ותוכן בסיסי. נתנסה בהעברת נתונים בין רכיבים באמצעות props, ונבין איך מחלקים אתר לרכיבים קטנים לשימוש חוזר.

המטרה: ללמוד איך מפרקים אתר לחלקים ברורים ובונים ממשק פשוט ומובן.

3. לימוד Hooks

Hooks הם הלב של React המודרנית. הם מאפשרים לנהל state, מחזור חיים של רכיבים (lifecycle), שימוש ב־context ועוד — וכל זה בתוך רכיבי פונקציה פשוטים.

נלמד את ה־Hooks הבסיסיים: useState, useEffect,useRef, ונבין את הכללים החשובים: קריאה רק ברכיבים/פונקציות, לא בתוך תנאים/לולאות, ושמות שמתחילים ב־use.

מה זה Hooks? פונקציות מיוחדות שמאפשרות להשתמש ב־state, lifecycle ו־context בתוך רכיבי פונקציה, מבלי לכתוב מחלקות.
שמות: כל Hook חייב להתחיל ב־use (כמו useState, useEffect).
מיקום: מותר לקרוא ל־Hooks רק בתוך רכיב פונקציונלי או פונקציה של React, לא בקובץ רגיל או מחוץ לרכיב.
אותיות גדולות לרכיבים: רכיבי React עצמם חייבים להתחיל באות גדולה כדי ש־JSX יזהה אותם כרכיבים.
ללא תנאים או לולאות: אסור לקרוא ל־Hooks בתוך if,for או while – הם חייבים להופיע תמיד באותו סדר.
setState לא מיידי: הפונקציה set לא מעדכנת state באופן מיידי, אלא מתזמנת עדכון לרינדור הבא.
Custom Hooks: ניתן ליצור Hooks מותאמים אישית כדי לארוז לוגיקה חוזרת ולשתף אותה בין רכיבים שונים.

🧩 מה זה Hooks (בקצרה)

Hooks הם פונקציות שמתחילות ב־use ומאפשרות לנהל state, מחזור חיים (lifecycle), גישה ל־ ref, ו־context — בתוך רכיבי פונקציה. הם מחליפים צורך במחלקות ומפשטים שיתוף לוגיקה (דרך Custom Hooks).

useState – ניהול state מקומי.
useEffect – תגובה לשינויים, side-effects וטעינת נתונים.
useRef – אחסון ערכים מתמשכים בין רינדורים וגישה ל־DOM.
useReducer – אלטרנטיבה ל־useState כשיש לוגיקה מורכבת יותר, בסגנון Redux קטן.
useMemo – מזכר תוצאות חישוב יקר כדי לשפר ביצועים.
useCallback – מזכר פונקציות, כדי למנוע יצירה מחדש ברינדורים חוזרים.
useId – יצירת מזהים ייחודיים עקביים לרכיבים (חשוב בטפסים ותוויות).
useLayoutEffect – כמו useEffect, אבל פועל לפני ציור למסך (לעבודה עם מדידות DOM או אנימציות).

🎓 כאן תמצאו את כל הדוגמאות והפרויקטים בכל הקטגוריות – מכל התחומים והנושאים שבלימוד React.

JSX ורכיבים ראשונים

מבוא ל־React: יצירת רכיבים פונקציונליים עם JSX, שימוש ב־props, רינדור דינאמי של תוכן.

לאתר

ניהול מצב ואירועים

שימוש ב־useState, ניהול אירועים (onClick, onChange) ויצירת אינטראקציה עם המשתמש.

לאתר

React Router

שימוש ב־react-router-dom לניווט בין עמודים: Routes, Link, useParams, useNavigate.

לאתר

טפסים ובקרה על קלט

יצירת טפסים עם בקרה מלאה, ולידציה בסיסית ושימוש ב־controlled components.

לאתר

צריכת API והצגת נתונים

שימוש ב־fetch או axios לצריכת מידע חיצוני והצגת נתונים ברכיבים.

לאתר

ניהול מצב גלובלי עם Context

שיתוף נתונים בין רכיבים שונים בעזרת React Context ו־useContext.

לאתר

מונה קליקים עם useState

פרויקט בסיסי המדגים איך ליצור ולהציג מונה בעזרת useState.

לאתר

טיימר אוטומטי עם useEffect

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

לאתר

פוקוס על שדה קלט עם useRef

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

לאתר

ניהול עגלת קניות עם useReducer

הדגמה של ניהול מצבים מורכבים – הוספה/הסרה של פריטים בעגלה.

לאתר

מניעת חישוב מיותר עם useMemo

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

לאתר

שמירה על פונקציה קבועה עם useCallback

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

לאתר

מדידת רכיב לפני רינדור

הדגמה מתי להשתמש ב־useLayoutEffect ולא ב־useEffect.

לאתר

שדות טופס עם useId

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

לאתר

🚀 מה נתרגל אחרי ה-Hooks

אחרי שנכיר את ה-Hooks ונראה דוגמאות ב-PortfolioMain, ניישם אותם בבניית אתרים מורכבים: ניתוב בין עמודים, טפסים עם ולידציה, טעינת נתונים, שיתוף לוגיקה עם Custom Hooks ועוד.

4. בניית פרויקטים עם סוגי Hooks

נתרגל כל Hook עם פרויקט קטן: useState עם מונה,useEffect לטעינת נתונים, useRefלניהול DOM, ו־useContext לניהול נתונים בין רכיבים.

המטרה: להבין איך כל Hook פותר בעיה אמיתית בבניית יישומים אינטראקטיביים.

5. אתרים מורכבים עם Hooks

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

כאן כבר נתחיל להרגיש איך React חוסכת זמן ומסדרת את הקוד.

6. נושאים מתקדמים

Routing: מעבר בין דפים באפליקציה (עם react-routerאו Next.js).
ניהול מצב: שימוש ב־Context למניעת Prop Drilling, והיכרות עם Redux/Zustand למערכות גדולות.
טעינת נתונים: שימוש ב־fetch, טיפול בשגיאות/טעינה, ו־TanStack Query/SWR לניהול “מצב שרת”.
עבודה עם טפסים: Controlled/Uncontrolled, ולידציה, ו־react-hook-form.
ביצועים: useMemo, useCallback,memo, ופירוק קוד (Lazy Loading).
נגישות: איך להבטיח שהאתר נוח גם למקלדת/קוראי מסך.
בדיקות: React Testing Library + Jest לוודא שהקוד עובד כמו שצריך.
Next.js: שילוב ראוטינג, Server Components ו־SEO.
TypeScript: כתיבה עם טיפוסים לשיפור אמינות הקוד.
דיפלוי: איך להעלות את האתר ל־Vercel/Netlify ולשתף עם העולם.

📘React - מדריך

למה React? 💡

מה זה React בנקודות

⚖️ React vs Vanilla JS

📚 תוכנית הלימוד בקורס React

✨ מבוא ל-JSX

1. לימוד JSX

🏗️ אתר עם JSX — מה זה כולל

דוגמה 1 — JSX כביטוי

דוגמה מורצת בפועל:

דוגמה 2 — רינדור רשימה עם map

דוגמה מורצת בפועל:

2. בניית אתרים פשוטים עם JSX

3. לימוד Hooks

🧩 מה זה Hooks (בקצרה)

JSX ורכיבים ראשונים

ניהול מצב ואירועים

React Router

טפסים ובקרה על קלט

צריכת API והצגת נתונים

ניהול מצב גלובלי עם Context

מונה קליקים עם useState

טיימר אוטומטי עם useEffect

פוקוס על שדה קלט עם useRef

ניהול עגלת קניות עם useReducer

מניעת חישוב מיותר עם useMemo

שמירה על פונקציה קבועה עם useCallback

מדידת רכיב לפני רינדור

שדות טופס עם useId

🚀 מה נתרגל אחרי ה-Hooks

4. בניית פרויקטים עם סוגי Hooks

5. אתרים מורכבים עם Hooks

6. נושאים מתקדמים