المكونات (Components) في React | الدليل الكامل

ما هي المكونات في React؟

عندما نتحدث عن React، فإن أول ما يتبادر إلى الذهن هو المكونات (Components).

المكونات هي اللبنة الأساسية في أي تطبيق React. بفضلها، يمكن تقسيم واجهة المستخدم إلى أجزاء صغيرة وقابلة لإعادة الاستخدام، مما يجعل الكود أوضح وأسهل في الصيانة.

المكون (Component) هو ببساطة دالة أو كلاس في JavaScript يعيد واجهة مستخدم (UI).

يمكن أن يكون عنصرًا بسيطًا مثل زر أو مدخل نص، أو مكونًا معقدًا مثل صفحة كاملة.

مثال على مكون بسيط:

function Welcome() {
  return <h1>مرحبًا بك في React!</h1>;
}

هنا لدينا Functional Component يعرض رسالة ترحيبية.

---

أنواع المكونات في React

1. المكونات الدالية (Functional Components)

هي أبسط وأكثر استخدامًا اليوم. عبارة عن دوال JavaScript تعيد JSX.

function Header() {
  return (
    <header>
      <h1>هذا هو العنوان</h1>
    </header>
  );
}

2. المكونات الكلاسيكية (Class Components)

كانت تُستخدم بكثرة سابقًا، لكنها أصبحت أقل شيوعًا بعد ظهور الـ Hooks.

class Header extends React.Component {
  render() {
    return (
      <header>
        <h1>هذا هو العنوان</h1>
      </header>
    );
  }
}

لا يُنصح باستخدامها الان.

---

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

Props (اختصار لـ Properties) هي الطريقة التي يمكن بها تمرير البيانات من مكون أب إلى مكون ابن.

function Welcome(props) {
  return <h1>مرحبًا {props.name}</h1>;
}

<Welcome name="أحمد" />;

سيتم عرض: مرحبًا أحمد

خصائص الـ Props:

• للقراءة فقط (Read-only).
• تجعل المكونات قابلة لإعادة الاستخدام.
• تُستخدم لتمرير أي نوع من البيانات (نصوص، أرقام، دوال...).

---

State: إدارة البيانات داخل المكونات

بينما الـ Props تأتي من الخارج، فإن State تُستخدم لإدارة البيانات الداخلية للمكون.

مثال باستخدام Hook الشهير useState:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>القيمة الحالية: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

خصائص الـ State:

• يمكن تحديثها مع تفاعل المستخدم.
• تجعل المكون ديناميكيًا وتفاعليًا.
• تؤثر على عملية إعادة الرسم (Re-rendering).

---

الفرق بين Props و State

الخاصية	Props	State
المصدر	من المكون الأب	داخل المكون نفسه
التعديل	غير قابلة للتغيير	قابلة للتغيير باستخدام setState أو useState
الاستخدام	تمرير البيانات	إدارة البيانات الداخلية

---

المكونات المتداخلة (Nested Components)

يمكن بناء مكونات أكبر من خلال دمج مكونات صغيرة:

function Button(props) {
  return <button>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button label="حفظ" />
      <Button label="إلغاء" />
    </div>
  );
}

هنا App يحتوي على زرين (مكونين) مختلفين.

---

إعادة استخدام المكونات

إحدى أقوى مميزات React هي القدرة على إعادة استخدام المكونات.
بمجرد كتابة مكون مرة واحدة، يمكن استخدامه في أماكن متعددة من التطبيق.

function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
}

<Card title="مقال 1" content="هذا هو المحتوى" />
<Card title="مقال 2" content="محتوى آخر" />

---

أفضل الممارسات عند كتابة المكونات

• اجعل المكونات صغيرة وبسيطة.
• سمّ المكونات بأسماء واضحة تعبر عن وظيفتها.
• استخدم Props و State بذكاء لتجنب التعقيد.
• قسم واجهة المستخدم إلى أجزاء قابلة لإعادة الاستخدام.
• تجنب كتابة منطق معقد داخل JSX مباشرة.

---

المكونات الذكية والغبية (Smart vs Dumb Components)

• المكونات الذكية (Smart): تحتوي على منطق وتتعامل مع State و API.
• المكونات الغبية (Dumb): مسؤولة فقط عن العرض، وتستقبل البيانات من Props.

مثال:

مكون Smart يجلب البيانات من API ويمررها إلى Dumb Component ليعرضها.

---

تنظيم المكونات في المشروع

عادةً ما يتم تنظيم المكونات داخل مجلد components/ ليكون من السهل الوصول إليها وإعادة استخدامها.
يمكن أيضًا إنشاء مجلدات فرعية للمكونات المتعلقة بصفحات أو أقسام محددة.

---

خلاصة

• المكونات هي أساس React: كل شيء تقريبًا عبارة عن مكون.
• Props لتمرير البيانات، بينما State لإدارة البيانات الداخلية.
• يمكن إعادة استخدام المكونات بسهولة.
• الممارسات الجيدة تساعد في بناء تطبيقات نظيفة وسهلة الصيانة.

باختصار: إذا أتقنت المكونات (Components)، فأنت على الطريق الصحيح لإتقان React بالكامل 🚀.

---

هل بدأت بإنشاء مكوناتك الأولى في React؟ ✨
شاركنا تجربتك!