המדריך האולטימטיבי ל-React

⚛️ מבוא ל-React

React היא ספריית JavaScript לבניית ממשקי משתמש (UI), שפותחה על ידי פייסבוק. היא מתמקדת בבניית קומפוננטות (רכיבים) לשימוש חוזר וניהול יעיל של עדכוני DOM באמצעות Virtual DOM.

למה React?

קומפוננטות: פיצול הממשק לחלקים קטנים ועצמאיים.
Virtual DOM: עדכון יעיל של ה-DOM האמיתי רק איפה שצריך, לביצועים גבוהים.
Declarative: כתיבת קוד שמתאר "מה" להציג, וריאקט דואגת ל"איך".
Ecosystem: קהילה עצומה וספריות רבות.

שלום עולם ב-React

בדוגמה זו נראה קומפוננטה פשוטה שמציגה טקסט. שימו לב לשימוש ב-JSX (תחביר דמוי HTML בתוך JS).

function App() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1>שלום, React! ⚛️</h1>
      <p>זוהי הקומפוננטה הראשונה שלי.</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

📝 JSX

JSX הוא הרחבת תחביר ל-JavaScript שמאפשרת לכתוב HTML בתוך קוד JS. זה נראה כמו HTML, אבל זה בעצם סוכר תחבירי לקריאות פונקציה של React.

חוקים חשובים ב-JSX

חייב להיות אלמנט אב אחד (או Fragment <>...</>).
תגיות חייבות להיסגר (למשל <br />).
שימוש ב-className במקום class (כי class היא מילה שמורה ב-JS).
שימוש בסוגריים מסולסלים {} להטמעת ביטויים של JavaScript.

דוגמה ל-JSX דינמי

function Welcome() {
  const name = "ישראל";
  const isLoggedIn = true;
  const styles = { color: 'purple', fontSize: '1.2rem' };

  return (
    <div>
      {/* הערה בתוך JSX נראית כך */}
      <h2 className="title">ברוכים הבאים!</h2>
      <p style={styles}>
        שלום, {name}. 
        {isLoggedIn ? " (מחובר)" : " (אורח)"}
      </p>
      <p>השעה כעת: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Welcome />);

🧩 קומפוננטות (Components)

קומפוננטות הן אבני הבניין של אפליקציית React. כיום נהוג להשתמש ב-Functional Components (פונקציות) ולא ב-Class Components.

מבנה קומפוננטה

function MyComponent() {
  return (
    <div>
      <h1>התוכן שלי</h1>
    </div>
  );
}

שם הקומפוננטה חייב להתחיל באות גדולה!

🎁 Props (Properties)

Props הם הדרך להעביר מידע מקומפוננטת אב לקומפוננטת ילד. הם לקריאה בלבד (Read-Only) ולא ניתן לשנות אותם בתוך הילד.

// קומפוננטת ילד שמקבלת props
function UserCard({ name, role, emoji }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '5px', borderRadius: '8px' }}>
      <h3>{emoji} {name}</h3>
      <p>תפקיד: <strong>{role}</strong></p>
    </div>
  );
}

// קומפוננטת אב
function App() {
  return (
    <div>
      <h2>צוות הפיתוח</h2>
      <UserCard name="דני" role="מפתח Frontend" emoji="👨‍💻" />
      <UserCard name="שרה" role="מנהלת מוצר" emoji="👩‍💼" />
      <UserCard name="יוסי" role="מעצב" emoji="🎨" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

💾 State (useState)

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

משתמשים ב-Hook שנקרא useState.

function Counter() {
  // הגדרת state: משתנה (count) ופונקציה לעדכון (setCount)
  // הערך ההתחלתי הוא 0
  const [count, setCount] = useState(0);

  return ( 
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <h2>מונה: {count}</h2>
      <button 
        onClick={() => setCount(count + 1)}
        style={{ padding: '10px 20px', fontSize: '1.2rem', cursor: 'pointer' }}
      >
        הגדל +
      </button>
      <button 
        onClick={() => setCount(0)}
        style={{ padding: '10px 20px', fontSize: '1.2rem', cursor: 'pointer', marginLeft: '10px' }}
      >
        אפס
      </button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

⚡ Effects (useEffect)

useEffect מאפשר לבצע "תופעות לוואי" (Side Effects) בקומפוננטה, כמו קריאות לשרת, מניפולציות על ה-DOM, או טיימרים.

הוא רץ אחרי כל רינדור, אלא אם כן מגדירים לו מערך תלויות.

useEffect(() => { ... }): רץ אחרי כל רינדור.
useEffect(() => { ... }, []): רץ רק פעם אחת (בטעינה).
useEffect(() => { ... }, [prop, state]): רץ כשהערכים במערך משתנים.

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // קוד שרץ בטעינה
    const intervalId = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // פונקציית ניקוי (Cleanup) - רצה כשהקומפוננטה יוצאת מהמסך
    return () => clearInterval(intervalId);
  }, []); // מערך ריק = רץ רק פעם אחת

  return (
    <div>
      <h3>שניות שעברו: {seconds}</h3>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

🖱️ אירועים (Events)

טיפול באירועים ב-React דומה ל-HTML רגיל, אבל עם תחביר camelCase (למשל onClick במקום onclick) ומעבירים פונקציה ממש ולא מחרוזת.

function EventDemo() {
  const handleClick = (e) => {
    alert('לחצת על הכפתור!');
    console.log('Event:', e);
  };

  const handleInput = (e) => {
    console.log('הקלדת:', e.target.value);
  };

  return (
    <div>
      <button onClick={handleClick}>לחץ עלי</button>
      <br /><br />
      <input type="text" onChange={handleInput} placeholder="הקלד משהו..." />
      <p>פתח את הקונסול לראות פלט</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<EventDemo />);

📋 רשימות (Lists)

כדי להציג רשימה של פריטים, משתמשים בדרך כלל בפונקציה map() של מערכים. חובה לתת לכל פריט key ייחודי.

function TodoList() {
  const todos = [
    { id: 1, text: 'ללמוד React', done: true },
    { id: 2, text: 'לבנות פרויקט', done: false },
    { id: 3, text: 'למצוא עבודה', done: false },
  ];

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TodoList />);

📝 טפסים (Forms)

ב-React נהוג להשתמש ב-Controlled Components, שבהם ה-State של React הוא "מקור האמת" היחיד לערכי הטופס.

function SimpleForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // מניעת רענון הדף
    alert(`השם שנשלח: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '10px', background: '#222', borderRadius: '8px' }}>
      <label>
        שם:
        <input 
          type="text" 
          value={name} 
          onChange={(e) => setName(e.target.value)} 
          style={{ margin: '0 10px' }}
        />
      </label>
      <button type="submit">שלח</button>
      <p>ערך נוכחי ב-State: {name}</p>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SimpleForm />);

🎣 Hooks נוספים

מלבד useState ו-useEffect, יש עוד Hooks שימושיים.

useRef

מאפשר לגשת לאלמנט DOM ישירות או לשמור ערך שלא גורם לרינדור מחדש בשינוי.

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    // גישה ישירה לאלמנט ה-DOM
    inputRef.current.focus();
    inputRef.current.style.backgroundColor = '#333';
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="לחץ על הכפתור למיקוד" />
      <button onClick={focusInput}>התמקד בשדה</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FocusInput />);