React — המלך שכל כלי AI מדבר בו

למה React שולט בעולם ה-AI

הנה עובדה שצריכה לשנות את הדרך שבה אתם חושבים על בניית אתרים עם AI:

כמעט כל כלי AI שבונה אתרים — מייצר React.

V0 של Vercel? React + Next.js + Tailwind + shadcn/ui. Bolt.new? React. Lovable? React. Cursor? React הוא ברירת המחדל. Claude Code? כשמבקשים ממנו לבנות אתר — 9 מתוך 10 פעמים התוצאה תהיה React.

למה? שלוש סיבות:

1. קוד לימוד ענק: React קיים מ-2013, ויש לו את בסיס הקוד הגדול ביותר באינטרנט. מודלי AI אומנו על מיליוני קבצי React — הם פשוט "יודעים" React הכי טוב. על פי npm trends, React מוריד כ-28 מיליון פעמים בשבוע — יותר מ-Vue, Angular ו-Svelte ביחד.
2. אקוסיסטם עשיר: כשAI בונה עמוד, הוא צריך ספריות קומפוננטות (shadcn/ui), framework (Next.js), עיצוב (Tailwind). לReact יש את האקוסיסטם הכי שלם — אלפי ספריות, תבניות, וכלים שעובדים ביחד.
3. קומפוננטות: React בנוי סביב רעיון של חלקים ניתנים לשימוש חוזר. זה מושלם ל-AI — הוא יכול לבנות כל חלק בנפרד ולחבר ביניהם. זה כמו LEGO: בניית בלוקים קטנים שמתחברים לדבר גדול.

בואו נראה בדיוק מה כל כלי AI מייצר כברירת מחדל:

שימו לב לדפוס: כולם React. גם כשהם שונים ב-framework (Next.js vs Vite) או בספריות — הבסיס תמיד React. זה לא מקרי.

מה זה אומר עבורכם כ-Vibe Coders? אם תבינו React — תבינו את רוב הקוד שכלי AI מייצרים כברירת מחדל (בהתבסס על תצפית בפלט של V0, Lovable, Bolt ו-Cursor נכון ל-2025). לא צריך ללמוד לכתוב React. צריך ללמוד לקרוא אותו, להבין מה הוא עושה, ולדעת לכוון את ה-AI כשהתוצאה לא בדיוק מה שרציתם.

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

קצת היסטוריה — מאיפה React בא

React נוצר בפייסבוק (היום Meta) ב-2013. הבעיה שהוא פתר: פייסבוק היה אתר ענקי עם אלפי אלמנטים שמשתנים בו-זמנית — התראות, הודעות, feed, לייקים. לעדכן את כל זה עם JavaScript רגיל היה סיוט של באגים.

הפתרון של React: Virtual DOM — עותק וירטואלי של הדף שחי בזיכרון. במקום לעדכן את ה-HTML הישירות (שזה איטי ומסוכן), React מחשב מה צריך להשתנות על העותק הוירטואלי, ואז מעדכן רק את ההבדלים בדף האמיתי. כמו עורך שקודם סוקר את כל התיקונים על טיוטה, ורק אז שולח את הגרסה הסופית לדפוס.

מאז 2013, React עבר כמה אבולוציות חשובות:

הנקודה: React מתפתח, אבל היסודות יציבים. קומפוננטות, props, state — אלה אותם concepts מ-2013. מה שהשתנה זה ה-tools (hooks במקום classes, Server Components) — אבל הרעיון המרכזי זהה. זה בדיוק למה זה חשוב ללמוד את היסודות: הם לא ישתנו.

נקודה חשובה לגבי class components: אם תמצאו באינטרנט מדריכי React שמשתמשים ב-class MyComponent extends React.Component — זה סגנון ישן. כל כלי AI מייצר כיום functional components עם hooks. אתם לא צריכים ללמוד class components כלל — הם קיימים בקוד ישן אבל שום כלי AI לא מייצר אותם יותר. אם AI בטעות מייצר class component — בקשו: "Convert this to a functional component with hooks".

חשיבה בקומפוננטות — לראות את העמוד אחרת

הרעיון הכי חשוב ב-React — ואולי הרעיון הכי חשוב שתלמדו בקורס הזה — הוא חשיבה בקומפוננטות (Component Thinking). זה הרעיון שיותר מכל דבר אחר ישפר את התוצאות שאתם מקבלים מ-AI.

מה זה אומר? במקום לראות עמוד אינטרנט כמקשה אחת, אתם רואים אותו כאוסף של חלקים עצמאיים:

• Header — הניווט העליון (לוגו, תפריט, כפתור התחברות)
• Hero — הבאנר הראשי (כותרת גדולה, תמונה, CTA)
• Card — כרטיס מידע (תמונה, כותרת, תיאור, כפתור)
• Footer — התחתית (קישורים, זכויות יוצרים, סושיאל)
• Sidebar — תפריט צד (קטגוריות, פילטרים)
• Modal — חלון קופץ (טופס, אישור, התראה)

כל חלק כזה הוא קומפוננטה (Component) — מילה שתשמעו מאות פעמים כשעובדים עם AI. ב-React, קומפוננטה היא בעצם פונקציה שמקבלת נתונים ומחזירה UI. אבל לא צריך לחשוב על זה טכנית — חשבו על קומפוננטה כמו לבנת LEGO: חלק עצמאי שאפשר לשלב עם חלקים אחרים כדי לבנות משהו גדול.

כל קומפוננטה:

1. עצמאית — יש לה קוד משלה, סגנון משלה, התנהגות משלה
2. ניתנת לשימוש חוזר — קומפוננטת Card יכולה להופיע 10 פעמים בעמוד, כל פעם עם תוכן שונה
3. ניתנת להרכבה — קומפוננטות בתוך קומפוננטות (Hero מכיל Button, ש-Button מכיל Icon)

למה זה כל כך חשוב ל-Vibe Coders? כי ככה AI חושב. כשאתם אומרים ל-V0 "build me a pricing page" — הוא לא בונה עמוד אחד ארוך. הוא בונה קומפוננטות: PricingPage שמכיל PricingHeader, שלושה PricingCard, ו-FAQ.

וכשאתם רוצים לשנות משהו? במקום "change the page" — אתם יכולים להגיד: "change the PricingCard component to show annual pricing". זה הרבה יותר מדויק, ו-AI יתן תוצאה הרבה יותר טובה.

Component Tree — עץ הקומפוננטות

קומפוננטות מסודרות בצורה היררכית — כמו עץ משפחה. בראש יש קומפוננטה אחת (App), ומתחתיה יש ילדים (children), שלכל אחד יכולים להיות ילדים משלו:

שימו לב: CardList מכילה 3 קומפוננטות Card — אותה קומפוננטה, 3 פעמים, עם תוכן שונה בכל פעם. זה השימוש החוזר בפעולה.

דוגמה ישראלית: פירוק monday.com

בואו ניקח דוגמה אמיתית. נכנסים ל-monday.com (חברה ישראלית, הכל בנוי ב-React) ומסתכלים על עמוד הבית:

• TopBar — סרגל עליון עם לוגו, ניווט, כפתור "Get Started" (זה Button בתוך TopBar)
• Hero — כותרת ענקית, תת-כותרת, אנימציה, CTA
• TrustedBy — סרגל לוגואים של חברות (Coca-Cola, Universal, Adobe)
• FeatureCards — רשת של כרטיסי יכולות, כל אחד הוא FeatureCard עם icon, כותרת, תיאור
• TestimonialCarousel — סיבוב ציטוטים מלקוחות
• PricingPreview — תצוגה מקדימה של מחירים
• Footer — קישורים, סושיאל, legal

כל אחד מהחלקים האלה הוא קומפוננטה עצמאית. ה-FeatureCards מכילה 6 כרטיסי FeatureCard — אותו מבנה, תוכן שונה. ה-TestimonialCarousel מכילה כרטיסי Testimonial שמתחלפים. זה הכוח של חשיבה בקומפוננטות — פעם אחת מגדירים את הצורה, הרבה פעמים משתמשים עם תוכן שונה.

כש-Vibe Coder רוצה לבנות אתר דומה עם AI, הוא לא אומר "build me a homepage like monday.com". הוא אומר:

Build a homepage with these components:
1. TopBar with logo, nav links, and a purple CTA button
2. Hero section with animated headline and subtitle
3. TrustedBy section with 6 company logos
4. Feature grid with 6 FeatureCards (icon, title, description each)
5. Testimonial carousel with 3 quotes
6. Footer with 4 link columns

ההבדל? ה-prompt הראשון נותן ל-AI מעט מדי מידע. ה-prompt השני — עם שפת קומפוננטות — נותן ל-AI בדיוק את המבנה שהוא צריך. התוצאה תהיה קרובה בהרבה למה שרציתם.

כללי שמות קומפוננטות

כשאתם מדברים עם AI על קומפוננטות, חשוב להשתמש בשמות נכונים. ב-React יש convention ברור:

• PascalCase: כל מילה מתחילה באות גדולה — ProductCard, HeroSection, NavigationBar
• שם תיאורי: השם מסביר מה הקומפוננטה עושה — UserProfile, לא Component1
• יחיד לפריט, רבים לרשימה: ProductCard לכרטיס אחד, ProductList או ProductGrid לרשימה
• פונקציה מתחילה ב-verb: אם הקומפוננטה עושה משהו — SearchBar, FilterPanel, ToggleSwitch

כשאתם מבקשים מ-AI לבנות קומפוננטות — השתמשו בשמות PascalCase. AI יבין שאתם מדברים על React component ולא על אלמנט HTML רגיל. ההבדל בין "build a card" לבין "build a ProductCard component" הוא שAI בגרסה השנייה ייצור קומפוננטה עצמאית עם props, ולא סתם div עם class.

טיפ נוסף: כשAI בונה לכם קוד ואתם רואים שם לא ברור כמו Component1 או MyComponent — בקשו ממנו: "Rename the component to a descriptive name that explains its purpose". שמות טובים הם תיעוד חי — גם אתם וגם AI יבינו את הקוד טוב יותר בעתיד.

מה זה JSX — HTML עם סופר-כוחות

כשתפתחו קוד React שAI כתב, הדבר הראשון שתראו הוא JSX. זה נראה כמו HTML, אבל הוא חי בתוך JavaScript. בואו נפרק את זה:

function HeroSection({ title, subtitle }) {
  return (
    <div className="hero">
      <h1>{title}</h1>
      <p>{subtitle}</p>
      <button className="cta-btn">
        התחילו עכשיו
      </button>
    </div>
  );
}

נפרק את מה שקורה פה:

שלושה הבדלים קריטיים בין JSX ל-HTML:

1. className במקום class — כי class הוא מילה שמורה ב-JavaScript
2. סוגריים מסולסלים {} — לכל מקום שרוצים JavaScript (משתנים, חישובים, תנאים)
3. כל קומפוננטה מתחילה באות גדולה — HeroSection, לא heroSection

איך לקרוא JSX שAI כתב — צעד אחרי צעד

כשאתם פותחים קובץ React שAI יצר, ככה תקראו אותו:

1. שלב 1 — מצאו את שם הפונקציה: חפשו function Something או export default function Something. זה שם הקומפוננטה.
2. שלב 2 — בדקו את הסוגריים: ({ ... }) אחרי שם הפונקציה = Props שנכנסים.
3. שלב 3 — מצאו את ה-return: כל מה שבתוך return (...) הוא ה-UI שמוצג על המסך.
4. שלב 4 — זהו סוגריים מסולסלים: כל {something} בתוך ה-JSX הוא ביטוי JavaScript — משתנה, חישוב, או תנאי.
5. שלב 5 — חפשו imports: בשורות הראשונות של הקובץ — import מראה אילו קומפוננטות/ספריות נמשכות מבחוץ.

זהו. 5 צעדים. עם הזמן זה הופך לאוטומטי — כמו קריאת מתכון: קודם רואים את הכותרת (שם הקומפוננטה), אחר כך את החומרים (props ו-imports), ואז את ההוראות (ה-JSX בתוך return).

Conditional Rendering — הצגה מותנית

אחד הדברים שJSX מאפשר ו-HTML לא — הצגה מותנית. זה אומר: "הצג את זה רק אם..."

function Notification({ count }) {
  return (
    <div>
      {count > 0 && (
        <span className="badge">{count} הודעות חדשות</span>
      )}
    </div>
  );
}

השורה {count > 0 && (...)} אומרת: "אם יש הודעות — הצג badge. אם אין — אל תציג כלום." זה pattern שתראו בכל פלט של AI — עכשיו אתם יודעים מה הוא אומר.

יש גם צורה שנייה של conditional rendering — ternary (שלושני):

{isLoggedIn ? (
  <span>שלום, {userName}</span>
) : (
  <button>התחברות</button>
)}

הסינטקס condition ? showIfTrue : showIfFalse אומר: "אם מחובר — הצג שם. אם לא — הצג כפתור התחברות." זה pattern שתראו בכל header שAI בונה — חלק מהתפריט משתנה לפי האם המשתמש מחובר או לא.

טיפ מעשי: כשAI בונה לכם header עם כפתור login — בדקו שיש conditional rendering שמציג תוכן שונה למשתמש מחובר ולא מחובר. אם אין — בקשו: "Add conditional rendering: show user name and avatar if logged in, show login button if not".

Lists ו-map — הצגת רשימות

עוד pattern קריטי ב-JSX שתראו בכל פלט AI: רשימות. כשצריך להציג כרטיסים, פריטי תפריט, או כל רשימה — React משתמש ב-.map():

const features = ["מהיר", "בטוח", "אמין", "חינמי"];

return (
  <ul>
    {features.map((feature) => (
      <li key={feature}>{feature}</li>
    ))}
  </ul>
);

.map() לוקח מערך (array) ויוצר JSX לכל פריט. ה-key הוא מזהה ייחודי שReact צריך כדי לעקוב אחרי כל פריט ברשימה (מה נוסף, מה הוסר, מה שינה מיקום).

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

Props — מידע שזורם למטה

Props (קיצור של Properties) הם הנתונים שעוברים מקומפוננטה הורה לקומפוננטה ילד. חשבו על זה ככה: כשAI בונה כרטיס מוצר, הוא לא שם את הנתונים ישירות בתוך הכרטיס — הוא מקבל אותם מבחוץ:

// הקומפוננטה ההורה שולחת נתונים:
<ProductCard
  name="קורס React"
  price="299"
  image="/react-course.jpg"
  isPopular={true}
/>

// הקומפוננטה הילד מקבלת ומציגה:
function ProductCard({ name, price, image, isPopular }) {
  return (
    <div className="card">
      {isPopular && <span className="badge">פופולרי</span>}
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p className="price">₪{price}</p>
    </div>
  );
}

כללים חשובים על Props:

• Read-only: הילד לא יכול לשנות props שהוא מקבל. אם צריך שינוי — זה state (הסעיף הבא).
• זרימה חד-כיוונית: תמיד מהורה לילד. לא הפוך. זה one-way data flow.
• כל ערך אפשרי: strings, numbers, booleans, arrays, objects, ואפילו פונקציות.

למה זה חשוב ל-Vibe Coders? כשאתם רואים שAI בנה כרטיס מוצר עם מחיר קבוע — אתם יודעים שצריך לבקש ממנו להפוך את המחיר ל-prop. ככה תוכלו להשתמש באותו כרטיס עם מחירים שונים.

דוגמה מעשית: מ-Hardcoded ל-Props

נניח שAI בנה לכם כרטיס שירות ככה:

function ServiceCard() {
  return (
    <div className="card">
      <h3>עיצוב אתרים</h3>
      <p>נבנה לכם אתר מרהיב ומותאם לנייד</p>
      <span className="price">₪3,500</span>
    </div>
  );
}

הבעיה: הכל hardcoded (קבוע בקוד). אם רוצים 3 כרטיסי שירות — צריך 3 קומפוננטות זהות עם טקסט שונה. זה שיכפול מיותר.

מה לבקש מ-AI: "Make ServiceCard accept title, description, and price as props so I can reuse it for multiple services"

התוצאה:

function ServiceCard({ title, description, price }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{description}</p>
      <span className="price">₪{price}</span>
    </div>
  );
}

// עכשיו אפשר להשתמש 3 פעמים:
<ServiceCard title="עיצוב אתרים" description="אתר מרהיב ומותאם" price="3,500" />
<ServiceCard title="SEO" description="קידום אורגני בגוגל" price="2,000" />
<ServiceCard title="קופירייטינג" description="תוכן שמוכר" price="1,500" />

עכשיו יש לכם קומפוננטה אחת, שמשמשת 3 פעמים עם נתונים שונים. זה הכוח של Props — קומפוננטה גנרית ששימושית בהרבה מקומות.

State — מידע שמשתנה בזמן אמת

אם Props הם מידע שנכנס מבחוץ ולא משתנה, State הוא מידע שמשתנה בזמן ריצה. חשבו על:

• תפריט: פתוח או סגור — זה state (isOpen: true/false)
• עגלת קניות: מספר המוצרים — זה state (cartItems: [...])
• Dark mode: מצב כהה או בהיר — זה state (isDark: true/false)
• טופס: מה שהמשתמש מקליד — זה state (email: "...")
• טעינת נתונים: האם הנתונים הגיעו מהשרת — זה state (isLoading: true/false)

ככה זה נראה בקוד:

function ToggleMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "סגור תפריט" : "פתח תפריט"}
      </button>
      {isOpen && (
        <nav className="menu">
          <a href="/">ראשי</a>
          <a href="/about">אודות</a>
          <a href="/contact">צור קשר</a>
        </nav>
      )}
    </div>
  );
}

מה קורה פה?

1. useState(false) — יוצר state בשם isOpen שמתחיל כ-false (סגור)
2. setIsOpen(!isOpen) — כשלוחצים על הכפתור, הופך את המצב (פתוח → סגור, סגור → פתוח)
3. {isOpen && (...)} — מציג את התפריט רק כשהוא פתוח

זה מה שקורה כש-state משתנה — Re-rendering:

זה המנגנון המרכזי של React: משתמש עושה פעולה → state משתנה → React מחשב מה השתנה → רק החלק הרלוונטי מתעדכן. זה מה שהופך אתרי React למהירים ואינטראקטיביים.

Props vs State — טבלת ההבדלים המלאה

זה ההבדל הכי חשוב להבין כ-Vibe Coder. בואו נראה אותו בצורה ברורה:

כלל אצבע פשוט: אם המידע קבוע לכל instance של הקומפוננטה — זה prop. אם המידע משתנה בתגובה לפעולת משתמש — זה state.

דוגמה: כרטיס מוצר. ה-שם של המוצר הוא prop (קבוע, מגיע מבחוץ). אבל האם המוצר בעגלה — זה state (משתנה כשלוחצים "הוסף לעגלה").

Hooks בגובה העיניים — useState ו-useEffect

Hooks הם פונקציות מיוחדות של React שמתחילות תמיד ב-use. הם מאפשרים לקומפוננטות לעשות דברים מעבר להצגת UI — כמו לנהל state, לטעון נתונים, או להגיב לשינויים.

אתם לא צריכים לכתוב hooks. אתם צריכים לזהות אותם בקוד שAI כותב. הנה שני ה-hooks שתראו ב-95% מהמקרים:

useState — ניהול state

כבר ראינו את זה:

const [count, setCount] = useState(0);
// count = הערך הנוכחי (מתחיל ב-0)
// setCount = הפונקציה לשינוי הערך

כשתראו useState בקוד AI — חפשו שני דברים: (1) מה הערך ההתחלתי, (2) איפה set... נקרא (מה גורם לשינוי).

useEffect — תופעות לוואי

useEffect(() => {
  // הקוד הזה רץ אחרי שהקומפוננטה מוצגת
  fetch('/api/products')
    .then(res => res.json())
    .then(data => setProducts(data));
}, []); // [] = רק פעם אחת, בטעינה ראשונה

useEffect אומר ל-React: "אחרי שהצגת את הקומפוננטה — תריץ את הקוד הזה." שימושים נפוצים:

• טעינת נתונים מ-API — fetch שרץ כשהדף נטען
• הרשמה לאירועים — כמו scroll, resize, keyboard
• Timer-ים — setTimeout, setInterval

המפתח לזיהוי: כשתראו useEffect בקוד AI — זה אומר שמשהו קורה "מאחורי הקלעים". בדרך כלל טעינת נתונים.

דוגמה מלאה: קומפוננטה עם useState ו-useEffect ביחד

הנה דוגמה שמשלבת את שני ה-hooks — טעינת רשימת מוצרים עם loading state:

"use client";
import { useState, useEffect } from "react";

function ProductList() {
  const [products, setProducts] = useState([]);     // state: רשימת מוצרים (מתחיל ריק)
  const [isLoading, setIsLoading] = useState(true); // state: האם עדיין טוען?

  useEffect(() => {
    // רץ פעם אחת כשהקומפוננטה נטענת
    fetch("/api/products")
      .then(res => res.json())
      .then(data => {
        setProducts(data);      // שומר את המוצרים
        setIsLoading(false);    // מפסיק loading
      });
  }, []);

  if (isLoading) return <p>טוען מוצרים...</p>;

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>₪{product.price}</p>
        </div>
      ))}
    </div>
  );
}

מה קורה פה?

1. useState([]) — יוצר state ריק למוצרים
2. useState(true) — יוצר loading state שמתחיל כ-true (עדיין טוען)
3. useEffect — כשהקומפוננטה נטענת, מביא נתונים מהשרת
4. כשנתונים מגיעים — מעדכן את products ומכבה את loading
5. אם עדיין טוען — מציג "טוען מוצרים..."
6. כשהנתונים מוכנים — מציג grid של מוצרים

זה pattern מאוד נפוץ בקוד שAI מייצר. כל פעם שיש דף שטוען נתונים — תראו את השילוב הזה של useState + useEffect + loading state. עכשיו שאתם מזהים את ה-pattern — אתם יודעים בדיוק מה קורה.

למה כל זה חשוב אם AI כותב את הקוד?

שאלה לגיטימית: אם AI כותב את הקוד, למה צריך להבין hooks? התשובה: כי AI לא תמיד עושה את הבחירה הנכונה. הנה מצבים שקורים בפועל:

• AI שוכח loading state: הדף מראה רשימה ריקה לשנייה לפני שנתונים נטענים. אתם צריכים לזהות שחסר isLoading state ולבקש מ-AI להוסיף.
• AI מוסיף useEffect מיותר: לפעמים AI מוסיף effects שלא צריך, מה שגורם לבעיות ביצועים. אם מזהים useEffect שלא ברור למה הוא שם — שואלים את AI: "Is this useEffect necessary? Can this be done differently?"
• AI משתמש ב-state כשלא צריך: לפעמים AI שם useState על דבר שיכול להיות prop פשוט, או computed value שלא צריך state בכלל. זיהוי זה מאפשר לבקש: "Remove this state, compute it from the existing data instead".
• AI לא מטפל ב-errors: fetch שנכשל בלי error handling = עמוד שבור. צריך לבקש: "Add error state and show error message if fetch fails".

כל אחד מהמצבים האלה דורש שתזהו את ה-pattern בקוד — ותדעו לבקש מ-AI את התיקון הנכון. בלי הבנה של hooks — לא תדעו שיש בעיה. עם הבנה — תזהו בשניות ותתקנו ב-prompt אחד.

React 19 — מה חדש ולמה זה משנה

React 19 שוחרר בדצמבר 2024, וב-2026 הוא כבר הסטנדרט. הנה מה שחשוב לדעת כ-Vibe Coders:

Server Components — קומפוננטות בצד השרת

הרעיון הגדול ביותר ב-React 19: לא כל הקוד צריך לרוץ בדפדפן.

קומפוננטות שלא צריכות interactivity (כמו header סטטי, רשימת מאמרים, footer) יכולות לרוץ בצד השרת ולשלוח HTML מוכן לדפדפן. זה מהיר יותר ומקטין את כמות ה-JavaScript שנשלחת למשתמש.

ב-Next.js 15 (שזה מה שV0 ו-Bolt מייצרים), Server Components הם ברירת המחדל. קומפוננטה שצריכה interactivity צריכה להיות מסומנת במפורש:

"use client"; // ← השורה הזו אומרת: הקומפוננטה רצה בדפדפן

import { useState } from "react";

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);
  // ...
}

מה זה אומר עבורכם? כשתראו "use client" בראש קובץ — זו קומפוננטה שרצה בדפדפן. כשאין את השורה הזו — היא רצה בשרת.

עוד חידושים ב-React 19

Server vs Client — מתי מה?

הנה הכלל הפשוט:

• Server Component (ברירת מחדל): כל מה שלא צריך interactivity — מאמרים, כרטיסים סטטיים, footer, header בלי dropdown, רשימות מידע.
• Client Component (צריך "use client"): כל מה שמגיב למשתמש — כפתורים, טפסים, toggles, carousel, כל מה שיש בו useState או useEffect.

בפועל, כשAI בונה עמוד ב-Next.js 15 — רוב העמוד יהיה Server Component (מהיר, חסכוני), ורק החלקים האינטראקטיביים יהיו Client Components. זה כמו שרק חלק מהמכונית צריך מנוע — השאר יכול להיות קל ופשוט.

האקוסיסטם של React — Next.js ומעבר לו

React לבד הוא "רק" ספרייה לבניית UI. כדי לבנות אתר שלם — צריך framework שמוסיף routing, SSR, ועוד. הנה השחקנים העיקריים:

שורה תחתונה: ב-95% מהמקרים, כשאתם עובדים עם AI על אתר — אתם עובדים עם Next.js. בפרק 3 נצלול לעומק לכל ה-frameworks, אבל הנקודה החשובה עכשיו היא להבין שReact ≠ Next.js.

Next.js — למה הוא כל כך חשוב

Next.js הוא ה-framework הכי פופולרי שבנוי מעל React. הוא מוסיף את כל מה ש-React לבד לא נותן:

• Routing: ניווט בין דפים — ב-React לבד צריך ספרייה נפרדת (react-router). ב-Next.js זה מובנה — כל קובץ בתיקייה app/ הוא עמוד.
• SSR ו-SSG: Server-Side Rendering ו-Static Site Generation — מה שלמדנו בפרק 1. Next.js עושה את זה אוטומטית.
• API Routes: בנייה של backend API ישירות בפרויקט — בלי שרת נפרד.
• Image Optimization: אופטימיזציה אוטומטית של תמונות — lazy loading, responsive sizes, WebP.
• Deployment: פריסה חלקה על Vercel (החברה שמפתחת Next.js) בלחיצה אחת.

כש-V0 בונה לכם עמוד — הוא בונה אותו ב-Next.js App Router, עם מבנה תיקיות כזה:

app/
  layout.tsx        ← תבנית כללית (header, footer)
  page.tsx          ← עמוד הבית
  about/
    page.tsx        ← עמוד About
  pricing/
    page.tsx        ← עמוד מחירים
  components/
    Header.tsx      ← קומפוננטת Header
    Footer.tsx      ← קומפוננטת Footer
    PricingCard.tsx  ← קומפוננטת כרטיס מחיר

כל קובץ page.tsx הוא עמוד. התיקייה about/ הופכת אוטומטית לנתיב /about. זה פשוט ואלגנטי — ו-AI עובד עם המבנה הזה מעולה.

הבנת מבנה התיקיות הזה חשובה כי כשAI נותן לכם פרויקט Next.js — אתם צריכים לדעת איפה כל דבר נמצא. בפרק 8 נצלול לעומק למבנה פרויקט, אבל עכשיו חשוב להכיר את העיקרון.

דוגמה מעשית: אם AI בנה לכם אתר ואתם רוצים לשנות את עמוד המחירים — אתם יודעים לפתוח את app/pricing/page.tsx. אם אתם רוצים לשנות את ה-header בכל הדפים — פתחו app/layout.tsx. אם רוצים לשנות רק את כרטיס המחיר — חפשו components/PricingCard.tsx. בלי הבנת המבנה הזה, הייתם צריכים לחפש בעיוור בעשרות קבצים.

הנה ההבדל בין React ל-Next.js:

הסצנה הישראלית

React שולט בשוק ה-Frontend הישראלי. חברות ישראליות מובילות שמשתמשות ב-React:

• Wix — הפלטפורמה לבניית אתרים בנויה ב-React
• monday.com — ממשק ניהול הפרויקטים — React
• Fiverr — הפלטפורמה לפרילנסרים — React
• Elementor — עורך ה-WordPress הפופולרי ביותר — React
• Gong — פלטפורמת BI למכירות — React

למה זה חשוב? כי אם תבנו אתר ל-startup ישראלי עם AI — סביר מאוד שהצוות הטכני שלהם כבר עובד עם React. הקוד שAI מייצר מתאים לסביבה הישראלית.

RTL ו-React: אתרים בעברית צריכים תמיכה ב-RTL (Right-to-Left). ספריות כמו shadcn/ui, Radix UI, ו-Tailwind CSS מטפלות ב-RTL כמעט אוטומטית. כשמבקשים מ-AI — הוסיפו "with RTL support for Hebrew" כדי לוודא.

טיפ נוסף לשוק הישראלי: כשבונים אתר בעברית עם AI, ציינו גם "use Heebo or Assistant font for Hebrew text" — אלה הפונטים הכי נפוצים ב-Google Fonts לעברית, והם נראים מקצועי. AI שמבין שהאתר בעברית ייצר גם dir="rtl" אוטומטית אם תבקשו.

מה V0 בונה כשאתה מתאר עמוד — פירוק מעשי

עכשיו שאתם מבינים את המושגים — בואו נפרק פלט אמיתי של V0 ונבין בדיוק מה הוא בנה.

נניח שכתבתם ל-V0: "build a pricing page with 3 tiers: Basic, Pro, Enterprise. Include a monthly/yearly toggle."

הנה מה שV0 ייצר (גרסה פשוטה):

"use client";  // ← רץ בדפדפן (יש interactivity)

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

const plans = [
  { name: "Basic", monthlyPrice: 29, yearlyPrice: 290, features: ["5 projects", "Basic support"] },
  { name: "Pro", monthlyPrice: 79, yearlyPrice: 790, features: ["Unlimited projects", "Priority support", "Analytics"] },
  { name: "Enterprise", monthlyPrice: 199, yearlyPrice: 1990, features: ["Everything in Pro", "Custom integrations", "Dedicated account manager"] },
];

export default function PricingPage() {
  const [isYearly, setIsYearly] = useState(false); // ← state: חודשי/שנתי

  return (
    <div className="container mx-auto py-16">
      <h1 className="text-4xl font-bold text-center">מחירון</h1>

      {/* Toggle חודשי/שנתי */}
      <div className="flex justify-center gap-4 my-8">
        <span>חודשי</span>
        <button onClick={() => setIsYearly(!isYearly)}>
          {isYearly ? "🔵" : "⚪"}
        </button>
        <span>שנתי (חסכו 20%)</span>
      </div>

      {/* כרטיסי מחירים */}
      <div className="grid grid-cols-3 gap-8">
        {plans.map((plan) => (
          <Card key={plan.name}>
            <h2>{plan.name}</h2>
            <p className="text-3xl font-bold">
              ${isYearly ? plan.yearlyPrice : plan.monthlyPrice}
            </p>
            <ul>
              {plan.features.map((f) => (
                <li key={f}>{f}</li>
              ))}
            </ul>
            <Button>בחרו תוכנית</Button>
          </Card>
        ))}
      </div>
    </div>
  );
}

בואו נפרק:

שימו לב: V0 השתמש ב-Button ו-Card מ-shadcn/ui (ספריית קומפוננטות — נלמד בפרק 5). הוא לא בנה כפתור מאפס — הוא השתמש בקומפוננטה מוכנה. זה pattern נפוץ מאוד בפלט AI.

מה לחפש כשקוראים פלט AI

הנה צ'קליסט מהיר לכל פעם שAI מייצר קוד React:

1. בדקו את השורה הראשונה: יש "use client"? אם כן — הקומפוננטה רצה בדפדפן ויש בה interactivity.
2. ספרו את ה-imports: כמה ספריות חיצוניות? אם יש @/components/ui/ — זה shadcn/ui.
3. חפשו useState: כל useState = state אחד. שאלו: מה הוא שומר? מתי הוא משתנה?
4. מצאו את ה-return: זה ה-UI — מה שיוצג למשתמש. קראו אותו כמו HTML.
5. חפשו .map(): זה אומר שיש רשימה — קומפוננטה שחוזרת על עצמה (כרטיסים, פריטים).
6. חפשו תנאים: {x && ...} או {x ? ... : ...} = הצגה מותנית.

עם הזמן, קריאת קוד React תהפוך טבעית. אחרי 5-10 פעמים שתקראו פלט AI — תזהו את ה-patterns מיד. לא צריך לזכור כלום בעל פה — הדפוסים חוזרים על עצמם.

איך לתקן קוד שAI בנה

הכוח האמיתי של הבנת React הוא ביכולת לכוון את ה-AI כשמשהו לא עובד. הנה דוגמאות:

שימו לב: כל ה-prompts לתיקון משתמשים במונחי React. זה ההבדל בין Vibe Coder שקרא את הפרק הזה לבין כזה שלא — דיוק בשפה = דיוק בתוצאה.

10 דברים שאפשר לבקש מ-AI עכשיו שמבינים React

עכשיו שאתם מבינים קומפוננטות, props, state, ו-hooks — הנה 10 דברים מעשיים שאפשר לבקש מ-AI בדיוק יותר:

1. "Split this page into reusable components" — במקום עמוד ארוך, קומפוננטות נפרדות
2. "Add state for the mobile menu toggle" — תפריט שנפתח ונסגר
3. "Make this card component accept props for title, description, and image" — כרטיס גנרי
4. "Add dark mode toggle with state" — מצב כהה עם useState
5. "Create a form with validation state for each field" — טופס עם error states
6. "Add loading state while fetching data" — הצגת spinner בזמן טעינה
7. "Make this component a Server Component (remove 'use client')" — חיסכון ב-JS
8. "Add conditional rendering: show X if user is logged in, Y if not" — הצגה מותנית
9. "Extract the pricing data into props so I can reuse the card" — הפיכת hardcoded ל-props
10. "Add useEffect to fetch products from /api/products on page load" — טעינת נתונים

שימו לב: כל prompt משתמש במונח React מדויק — component, props, state, useState, useEffect, Server Component. זה ההבדל בין "change the page" לבין הנחיה שAI מבין בדיוק.

לפני ואחרי — ההבדל שהמונחים עושים

בואו נראה את ההבדל בפועל בין prompt "רגיל" לבין prompt "עם מונחי React":

ההבדל מדהים. אותו AI, אותו כלי — אבל prompt שמשתמש במונחי React נותן תוצאה מדויקת בהרבה. זה בדיוק מה שלמדתם בפרק הזה.

טעויות נפוצות ב-prompts ל-React

מניסיון של Vibe Coders ישראלים רבים, הנה הטעויות הנפוצות כשמבקשים מ-AI לבנות React:

1. "Build a React app" — חסר. AI לא יודע אם רוצים Next.js, Vite, או plain React. עדיף: "Build a Next.js app with App Router".
2. "Make it interactive" — מעורפל מדי. עדיף: "Add useState for the menu toggle and form validation".
3. "Add a database" — React הוא frontend. AI יכול לבנות API route ב-Next.js, אבל צריך לציין איזה database (Supabase, Prisma, וכדומה).
4. "Make it responsive" — טוב, אבל חסר. עדיף: "Make it responsive with Tailwind breakpoints, mobile-first design".
5. "Copy the design of X" — בעייתי. עדיף: "Build a pricing page with 3-column grid, similar structure to modern SaaS sites".

הכלל: ככל שה-prompt מדויק יותר — התוצאה טובה יותר. והמדויקות באה מהמונחים שלמדתם בפרק הזה. זכרו: AI לא קורא מחשבות — הוא קורא את ה-prompt שלכם. מונח React מדויק שווה עשרות מילים של תיאור מעורפל.

שגרת עבודה — React ו-AI ביום-יום

הדבר האחד הכי חשוב

סיכום ביניים: מה למדנו ואיך זה משנה את העבודה עם AI

בואו נעשה חשבון נפש קצר. לפני הפרק הזה, כשביקשתם מ-AI לבנות עמוד — סביר שהשתמשתם במשפטים כמו "build me a website" או "make it look nice". הבעיה: AI לא יודע מה אתם רוצים, ומנחש.

אחרי הפרק הזה, יש לכם 13 מונחים חדשים שמשנים את האופן שבו אתם מדברים עם AI:

• Component — עכשיו אתם יכולים לבקש "build a HeroSection component" במקום "build the top of the page"
• Props — "accept title and subtitle as props" במקום "change the text"
• State — "add state for the cart count" במקום "make the cart work"
• useState/useEffect — "add a useEffect to fetch data on mount" במקום "load the data somehow"
• Server/Client Component — "keep this as a Server Component for performance" במקום סתם "make it fast"

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

תבנית Prompt ל-React — העתיקו ושמרו

הנה תבנית prompt שאפשר להשתמש בה בכל פעם שמבקשים מ-AI לבנות משהו ב-React. שמרו אותה בספריית ה-Prompts שלכם:

Build a [component name] component using:
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS
- UI Library: shadcn/ui
- Language: TypeScript

The component should:
- Accept these props: [list props]
- Have state for: [list what changes]
- Include: [specific features]

Use Server Components by default.
Only add "use client" if the component needs interactivity.
Support RTL for Hebrew content.

מלאו את הסוגריים המרובעים לפי הצורך. ה-template הזה נותן ל-AI את כל המידע שהוא צריך בפורמט שהוא מבין מושלם. זה חוסך שלבי clarification קדימה ואחורה ונותן תוצאה טובה יותר כבר מה-prompt הראשון.

סיכום ומעבר לפרק הבא

צ'קליסט — סיכום פרק 2

• מבין/ה למה React שולט ב-AI — בסיס קוד ענק, אקוסיסטם, קומפוננטות
• מסוגל/ת לפרק כל עמוד ל-5+ קומפוננטות ולצייר component tree
• מזהה/ת JSX בקוד — תגיות HTML, ביטויי {}, שם קומפוננטה באות גדולה
• מבין/ה מה זה Props ויודע/ת לזהות אותם בקוד AI
• מבין/ה מה זה State ויודע/ת מתי לציין ל-AI שצריך state
• מזהה/ת useState ו-useEffect בקוד AI ויודע/ת מה הם עושים
• מבין/ה את ההבדל בין Server Components ל-Client Components
• יודע/ת את ההבדל בין React (ספרייה) ל-Next.js (framework)
• מכיר/ה את האקוסיסטם: Next.js, Remix, Gatsby, Astro, React Native
• פירקתי פלט V0 וזיהיתי: components, props, state, imports
• יש לי רשימת 10+ prompts ל-React שמשתמשים במונחים מדויקים
• ניסיתי לפחות 2 prompts מהרשימה וראיתי תוצאות
• מיפיתי props ו-state של לפחות אפליקציה אחת שAI בנה
• עדכנתי את ספריית ה-Prompts שלי עם prompts חדשים ל-React