המדריך האולטימטיבי ל-React - לימודי תכנות בעברית

⚛️ מבוא ל-React

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

למה React?

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

שלום עולם ב-React

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.
סוגריים מסולסלים {} להטמעת ביטויים של JS.

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

  return (
    <div>
      <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).

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 הוא הזיכרון של הקומפוננטה. ה-State פרטי לקומפוננטה וניתן לשינוי. שינוי ב-State גורם לרינדור מחדש.

function Counter() {
  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', marginRight: '10px' }}>
        אפס
      </button>
    </div>
  );
}

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

⚡ Effects (useEffect)

useEffect מאפשר לבצע "תופעות לוואי" - קריאות לשרת, מניפולציות על DOM, טיימרים.

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

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

  useEffect(() => {
    const intervalId = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(intervalId);
  }, []);

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

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

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

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

function EventDemo() {
  const handleClick = () => alert('לחצת על הכפתור!');
  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 הוא "מקור האמת" היחיד לערכי הטופס.

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`השם שנשלח: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '12px', border: '1px solid #c9a96e', 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 = () => {
    inputRef.current.focus();
    inputRef.current.style.background = '#fdf6e3';
  };

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

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

🌍 Routing (React Router)

ב-SPA אנו רוצים לעבור בין "דפים" ללא רענון הדפדפן. react-router-dom מאפשרת זאת.

BrowserRouter: עוטף את האפליקציה ומנהל את ההיסטוריה.
Routes ו-Route: הגדרת הנתיבים והקומפוננטות.
Link: קישור למעבר בין דפים.

function Home()  { return <h2>🏠 דף הבית</h2>; }
function About() { return <h2>ℹ️ אודות</h2>; }

function App() {
  return (
    <BrowserRouter>
      <nav style={{ borderBottom: '1px solid #c9a96e', paddingBottom: '10px', marginBottom: '20px' }}>
        <Link to="/" style={{ marginLeft: '15px', color: '#c9a96e' }}>בית</Link>
        <Link to="/about" style={{ color: '#c9a96e' }}>אודות</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

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

🌳 Context API

Context מאפשר להעביר מידע עמוק בעץ הקומפוננטות בלי "Props Drilling".

const ThemeContext = createContext(null);

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div style={{ padding: '20px', background: theme === 'dark' ? '#222' : '#f5f0e8', color: theme === 'dark' ? '#fff' : '#000' }}>
        <h2>אפליקציה עם Context</h2>
        <Toolbar />
      </div>
    </ThemeContext.Provider>
  );
}

function Toolbar() { return <div><ThemedButton /></div>; }

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      style={{ padding: '10px', cursor: 'pointer' }}
    >
      החלף ל-{theme === 'light' ? 'כהה' : 'בהיר'}
    </button>
  );
}

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

⚙️ useReducer

useReducer הוא אלטרנטיבה ל-useState לניהול State מורכב, בדומה ל-Redux.

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset':     return { count: 0 };
    default: throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <h3>מונה: {state.count}</h3>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })} style={{ margin: '0 10px' }}>אפס</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

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

🚀 Performance Hooks

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

useMemo

שומר תוצאה של חישוב יקר ("Memoization").

function ExpensiveCalculation() {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  function expensiveFunction(num) {
    console.log('מחשב...');
    for (let i = 0; i < 100000000; i++) {}
    return num * 2;
  }

  const calculation = useMemo(() => expensiveFunction(count), [count]);

  return (
    <div>
      <h3>תוצאה: {calculation}</h3>
      <button onClick={() => setCount(count + 1)}>הגדל מספר</button>
      <hr />
      <h3>רשימת משימות (לא קשור לחישוב)</h3>
      <button onClick={() => setTodos([...todos, "משימה חדשה"])}>הוסף משימה</button>
      <ul>{todos.map((t, i) => <li key={i}>{t}</li>)}</ul>
      <p>פתח קונסול לראות מתי החישוב רץ</p>
    </div>
  );
}

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

🎣 Custom Hooks

אפשר ליצור Hooks משלנו כדי לעשות שימוש חוזר בלוגיקה (State ו-Effects) בין קומפוננטות.

function useWindowSize() {
  const [size, setSize] = useState([window.innerWidth, window.innerHeight]);

  useEffect(() => {
    const handleResize = () => setSize([window.innerWidth, window.innerHeight]);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

function ShowSize() {
  const [width, height] = useWindowSize();
  return (
    <div>
      <h3>גודל החלון הנוכחי:</h3>
      <p>רוחב: {width}px</p>
      <p>גובה: {height}px</p>
      <p>שנה את גודל החלון כדי לראות שינוי</p>
    </div>
  );
}

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