React • المستوى الثاني • الدرس 1

تمرير واستقبال الخصائص (Props)

أهداف الدرس العلمية

فهم مفهوم الخصائص (Props) وتمرير البيانات من المكون الأب للأبناء.
استقبال القيم وإلغاء التركيب (Destructuring Props) لسهولة الوصول.
إعادة استخدام نفس المكوّن ببيانات مختلفة عدة مرات.
فهم أن الـ Props للقراءة فقط (Read-Only) لا يمكن تعديلها.

1. ما هي الـ Props؟

تُستخدم Props (اختصار Properties) لنقل البيانات ديناميكياً من مكوّن الأب (Parent) إلى مكوّن الابن (Child). هذا يجعل المكوّن قابلاً لإعادة الاستخدام بمعلومات مختلفة.

javascript

// المكوّن الابن — يستقبل props كمعامل
function Greeting(props) {
  return <h1>مرحباً يا {props.name}!</h1>;
}

// المكوّن الأب — يمرر props كخصائص HTML
function App() {
  return (
    <div>
      <Greeting name="جمال" />
      <Greeting name="أحمد" />
    </div>
  );
}

2. إلغاء التركيب (Destructuring Props)

بدلاً من كتابة props.title و props.level في كل مكان، يمكنك إلغاء تركيب الـ props مباشرة في توقيع الدالة:

javascript

// الطريقة التقليدية
function CourseCard(props) {
  return <h3>{props.title}</h3>;
}

// ✅ الطريقة الأنيقة — Destructuring
function CourseCard({ title, level }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{level}</p>
    </div>
  );
}

التطبيق العملي المباشر

تحدي الدرس الأول: إضافة بطاقة جديدة

قم بالتعديل على الكود في المحرر أدناه:

أضف استدعاءً ثالثاً للمكوّن <CourseCard />.
مرّر له title بقيمة جديدة (مثل: "تصميم واجهات Tailwind").
مرّر له level بقيمة مناسبة (مثل: "متقدم").

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى 2 الانتقال للدرس الثاني