المكونات (Components) — مقدمة React

المكونات (Components)

المكونات هي اللبنات الأساسية لأي تطبيق React.

أنواع المكونات

1. Function Components (الأفضل حالياً) ⭐

function Button() {
  return <button>انقر هنا</button>;
}

// أو Arrow Function
const ButtonArrow = () => {
  return <button>انقر هنا</button>;
};

// اختصار (بدون return)
const ButtonShort = () => <button>انقر هنا</button>;

2. Class Components (القديمة)

class Button extends React.Component {
  render() {
    return <button>انقر هنا</button>;
  }
}

Props (الخصائص)

Props تُمرر البيانات من المكون الأب للابن:

// تعريف المكون مع props
function Greeting({ name, age }) {
  return (
    <div>
      <h1>مرحباً {name}!</h1>
      <p>عمرك {age} سنة</p>
    </div>
  );
}

// استخدام المكون
function App() {
  return (
    <>
      <Greeting name="أحمد" age={25} />
      <Greeting name="محمد" age={30} />
    </>
  );
}

Props مع القيم الافتراضية

function Button({ text = "انقر", color = "blue", size = "medium" }) {
  return (
    <button className={`btn btn-${color} btn-${size}`}>
      {text}
    </button>
  );
}

// استخدام
function Toolbar() {
  return (
    <>
      <Button />
      <Button text="إرسال" color="green" />
      <Button text="حذف" color="red" size="small" />
    </>
  );
}

Props Children

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// استخدام
<Card title="عنوان البطاقة">
  <p>هذا محتوى البطاقة</p>
  <button>زر داخل البطاقة</button>
</Card>

التركيب (Composition)

// مكونات صغيرة
function Avatar({ src, alt }) {
  return <img src={src} alt={alt} className="avatar" />;
}

function UserInfo({ user }) {
  return (
    <div className="user-info">
      <h3>{user.name}</h3>
      <p>{user.bio}</p>
    </div>
  );
}

// مكون مركب
function UserCard({ user }) {
  return (
    <div className="user-card">
      <Avatar src={user.avatar} alt={user.name} />
      <UserInfo user={user} />
    </div>
  );
}

// قائمة مستخدمين
function UserList({ users }) {
  return (
    <div className="user-list">
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

تنظيم المكونات

src/
├── components/
│   ├── common/
│   │   ├── Button.jsx
│   │   ├── Card.jsx
│   │   └── Input.jsx
│   ├── layout/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── Sidebar.jsx
│   └── features/
│       ├── UserCard.jsx
│       └── ProductList.jsx
├── pages/
│   ├── Home.jsx
│   └── Profile.jsx
└── App.jsx

أفضل الممارسات

1. مكون واحد = ملف واحد

2. اسم المكون يبدأ بحرف كبير: Button وليس button

3. المكونات الصغيرة أفضل من المكونات الكبيرة

4. Props للقراءة فقط - لا تُعدّل props

5. استخدم PropTypes أو TypeScript للتحقق

// مكون بطاقة منتج
function ProductCard({ name, price, image, onAddToCart }) {
  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p className="price">{price} دينار</p>
      <button onClick={onAddToCart}>
        أضف للسلة
      </button>
    </div>
  );
}

// قائمة المنتجات
function ProductList({ products }) {
  return (
    <div className="products">
      {products.map(product => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
          image={product.image}
          onAddToCart={() => console.log('Added:', product.name)}
        />
      ))}
    </div>
  );
}