React

התקנה והגדרות

דרישות מקדימות

1. Node.js

הורידו והתקינו את Node.js מהאתר הרשמי: nodejs.org. Node.js כולל גם את מנהל החבילות npm, שבו נשתמש להתקנת ספריות לאורך הקורס.

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

node --version   # לפחות v22
npm --version    # לפחות v11

2. עורך קוד

העורך המומלץ הוא Visual Studio Code. כדאי להתקין בו את התוספים הבאים כדי לייעל את העבודה:

• ES7+ React/Redux/React-Native snippets - קיצורי דרך לכתיבת קומפוננטות ו-Hooks
• Prettier - עיצוב אוטומטי ואחיד של הקוד
• Auto Rename Tag - שינוי שם תג הפתיחה והסגירה בו-זמנית

יצירת פרויקט React

שיטה מומלצת: Vite

# יצירת פרויקט חדש
npm create vite@latest my-react-app -- --template react

# כניסה לתיקייה
cd my-react-app

# התקנת חבילות
npm install

# הרצת שרת פיתוח
npm run dev

כעת פתחו את הדפדפן בכתובת http://localhost:5173 - האפליקציה שלכם רצה.

כשהאפליקציה גדלה: פריימוורק

צוות React ממליץ להתחיל אפליקציה גדולה עם פריימוורק, שמוסיף ניתוב, טעינת נתונים ורינדור בשרת מהקופסה:

# Next.js - הפריימוורק הנפוץ ביותר
npx create-next-app@latest my-app

# React Router במצב פריימוורק
npx create-react-router@latest my-app

לכל הקורס הזה מספיק Vite: הוא פשוט, מהיר, ומשאיר אתכם קרוב ל-React עצמה.

שימו לב: במדריכים ישנים תפגשו את npx create-react-app. הכלי הזה הוצא משימוש רשמית בפברואר 2025 ואינו מתוחזק, אז אל תתחילו איתו פרויקט חדש.

מבנה הפרויקט (Vite)

my-react-app/
├── node_modules/          # חבילות npm
├── public/                # קבצים סטטיים
│   └── vite.svg
├── src/                   # קוד המקור
│   ├── assets/            # תמונות ומשאבים
│   ├── App.css            # סגנונות הקומפוננטה הראשית
│   ├── App.jsx            # קומפוננטה ראשית
│   ├── index.css          # סגנונות גלובליים
│   └── main.jsx           # נקודת הכניסה
├── .gitignore
├── index.html             # דף ה-HTML הראשי
├── package.json           # הגדרות הפרויקט
└── vite.config.js         # הגדרות Vite

קבצים חשובים

index.html

<!DOCTYPE html>
<html lang="he" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>האפליקציה שלי</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

App.jsx

import './App.css'

function App() {
  return (
    <div>
      <h1>שלום עולם! 👋</h1>
      <p>זו אפליקציית React הראשונה שלי</p>
    </div>
  )
}

export default App

פקודות נפוצות

חבילות נפוצות

לצד React עצמה, רוב הפרויקטים נשענים על מספר חבילות משלימות. הנה הנפוצות ביותר, לפי תחום השימוש:

# ניווט (Routing)
npm install react-router-dom

# ניהול state גלובלי
npm install zustand
# או
npm install @reduxjs/toolkit react-redux

# סטיילינג
npm install styled-components
# או
npm install @emotion/react @emotion/styled

# אייקונים
npm install react-icons

# HTTP requests
npm install axios

הגדרות מומלצות

vite.config.js עם alias

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
    }
  }
})

.eslintrc.cjs (לבדיקת קוד)

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: 'detect' } },
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
  },
}