React

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

מהי קומפוננטה?

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

// קומפוננטה = פונקציה שמחזירה JSX
function Button() {
    return <button>לחץ עליי</button>;
}

// שימוש בקומפוננטה
function App() {
    return (
        <div>
            <Button />
            <Button />
            <Button />
        </div>
    );
}

סוגי קומפוננטות

Function Components (מומלץ!)

// קומפוננטה פונקציונלית - הסטנדרט היום
function Welcome() {
    return <h1>ברוכים הבאים!</h1>;
}

// או כ-Arrow Function
const Welcome = () => {
    return <h1>ברוכים הבאים!</h1>;
};

// או בקיצור (implicit return)
const Welcome = () => <h1>ברוכים הבאים!</h1>;

Class Components (ישן - לידע כללי)

// קומפוננטת מחלקה - סגנון ישן
import { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>ברוכים הבאים!</h1>;
    }
}

💡 טיפ: העדיפו תמיד Function Components. הם קצרים וקריאים יותר, וזו הדרך היחידה לעבוד עם Hooks. קומפוננטות מחלקה (Class Components) מובאות כאן להיכרות בלבד, למקרה שתיתקלו בהן בקוד ישן.

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

קומפוננטה בסיסית

// src/components/Header.jsx

function Header() {
    return (
        <header>
            <h1>האתר שלי</h1>
            <nav>
                <a href="/">בית</a>
                <a href="/about">אודות</a>
            </nav>
        </header>
    );
}

export default Header;

קומפוננטה עם סגנונות

// src/components/Card.jsx
import './Card.css';

function Card() {
    return (
        <div className="card">
            <h2 className="card-title">כותרת</h2>
            <p className="card-content">תוכן הכרטיס</p>
        </div>
    );
}

export default Card;

ייצוא וייבוא

Default Export

// Button.jsx - ייצוא
function Button() {
    return <button>לחץ</button>;
}
export default Button;

// App.jsx - ייבוא
import Button from './components/Button';
// אפשר לקרוא לזה בכל שם
import MyButton from './components/Button';

Named Export

// components.jsx - ייצוא
export function Button() {
    return <button>לחץ</button>;
}

export function Input() {
    return <input type="text" />;
}

// App.jsx - ייבוא
import { Button, Input } from './components';
// חייב להשתמש בשם המדויק

שילוב

// Button.jsx
export function SmallButton() {
    return <button className="small">קטן</button>;
}

function Button() {
    return <button>לחץ</button>;
}

export default Button;

// App.jsx
import Button, { SmallButton } from './components/Button';

מבנה תיקיות מומלץ

src/
├── components/
│   ├── common/           # קומפוננטות משותפות
│   │   ├── Button.jsx
│   │   ├── Button.css
│   │   ├── Input.jsx
│   │   └── Modal.jsx
│   ├── layout/           # קומפוננטות מבנה
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── Sidebar.jsx
│   └── features/         # קומפוננטות לפי פיצ'ר
│       ├── UserProfile.jsx
│       └── ProductCard.jsx
├── pages/                # דפים
│   ├── Home.jsx
│   └── About.jsx
├── App.jsx
└── main.jsx

קינון קומפוננטות

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

// קומפוננטות קטנות
function Logo() {
    return <img src="/logo.png" alt="לוגו" />;
}

function NavLinks() {
    return (
        <nav>
            <a href="/">בית</a>
            <a href="/about">אודות</a>
            <a href="/contact">צור קשר</a>
        </nav>
    );
}

// קומפוננטה מורכבת
function Header() {
    return (
        <header className="header">
            <Logo />
            <NavLinks />
        </header>
    );
}

// אפליקציה שלמה
function App() {
    return (
        <div>
            <Header />
            <main>
                <h1>ברוכים הבאים</h1>
            </main>
            <Footer />
        </div>
    );
}

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

1. PascalCase - אות גדולה בתחילת כל מילה:

   // ✅ נכון
   function UserProfile() { }
   function ShoppingCart() { }
   
   // ❌ שגוי
   function userProfile() { }
   function shopping_cart() { }

2. שם תיאורי - מתאר את מה שהקומפוננטה עושה:

   // ✅ נכון
   function ProductCard() { }
   function LoginForm() { }
   
   // ❌ לא ברור
   function Card1() { }
   function Component() { }

3. קובץ = שם הקומפוננטה:

   UserProfile.jsx  →  function UserProfile() { }
   LoginForm.jsx    →  function LoginForm() { }

סיכום

הקודם: ← תחביר JSX
הבא: Props →