مقدمة إلى Props في React: نقل البيانات بين المكونات بسهولة

🔍 فهم Props في React: سر التواصل بين المكونات

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

💡 ما هي Props بالضبط؟

Props هي اختصار لـ "Properties" وهي كائنات تحتوي على بيانات يتم تمريرها من مكون إلى آخر. تسمح لنا بجعل المكونات قابلة للتخصيص وإعادة الاستخدام دون الحاجة لتغيير الكود الأساسي للمكون.

// المكون الأب
function App() {
  return (
    <div>
      <WelcomeMessage name="أحمد" />
      <WelcomeMessage name="سارة" />
    </div>
  );
}

// المكون الابن
function WelcomeMessage(props) {
  return <h1>مرحباً، {props.name}! 👋</h1>;
}

🎯 كيفية استخدام Props خطوة بخطوة

الخطوة 1: تمرير Props من المكون الأب عند استدعاء مكون، نمرر البيانات كسمات (attributes) مشابهة لسمات HTML

function ParentComponent() {
  return (
    <ChildComponent 
      title="درس React" 
      difficulty="مبتدئ" 
      duration={30} 
    />
  );
}

الخطوة 2: استقبال Props في المكون الابن يستقبل المكون الابن البيانات ككائن props يمكن الوصول إليه داخل المكون

function ChildComponent(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>المستوى: {props.difficulty}</p>
      <p>المدة: {props.duration} دقيقة</p>
    </div>
  );
}

📝 Destructuring Props للكتابة الأكثر نظافة

لجعل الكود أكثر نظافة وسهولة في القراءة، يمكننا استخدام Destructuring

function ChildComponent({ title, difficulty, duration }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>المستوى: {difficulty}</p>
      <p>المدة: {duration} دقيقة</p>
    </div>
  );
}

⚠️ قواعد هامة في استخدام Props

1. للقراءة فقط: لا يمكن تعديل Props داخل المكون الابن
2. أنواع البيانات: يمكن تمرير أي نوع بيانات (نصوص، أرقام، مصفوفات، كائنات، دوال)
3. القيم الافتراضية: يمكن تحديد قيم افتراضية للProps

function UserProfile({ name, age = 25, isActive }) {
  return (
    <div>
      <p>الاسم: {name}</p>
      <p>العمر: {age}</p>
      <p>الحالة: {isActive ? "نشط" : "غير نشط"}</p>
    </div>
  );
}

🎪 مثال تطبيقي: قائمة منتجات

لنرى كيف يمكن استخدام Props في مشروع حقيقي

function ProductList() {
  return (
    <div>
      <Product 
        name="لابتوب" 
        price={2500} 
        category="إلكترونيات" 
      />
      <Product 
        name="كتاب برمجة" 
        price={80} 
        category="كتب" 
      />
    </div>
  );
}

function Product({ name, price, category }) {
  return (
    <div className="product">
      <h3>{name}</h3>
      <p>السعر: {price} ريال</p>
      <p>التصنيف: {category}</p>
    </div>
  );
}

🚀 نصائح عملية للعمل مع Props

• استخدم أسماء واضحة ووصفية للProps
• حدد القيم الافتراضية للProps الاختيارية
• استخدم Destructuring لجعل الكود أكثر نظافة
• تذكر أن Props للقراءة فقط ولا يمكن تعديلها