Props في React: كيفية تمرير البيانات بين Components

Props في React هي الطريقة اللي بنمرر بيها بيانات من Component لمكون تاني، ودي اختصار لكلمة Properties. ببساطة، لو عندك Component رئيسي (Parent) وعايز يبعت معلومات لـ Component فرعي (Child)، Props هي اللي هتسهللك الموضوع.

ليه نستخدم الـ Props؟ ​

• إعادة استخدام Components: تقدر تبني مكونات صغيرة وتستخدمها أكتر من مرة ببيانات مختلفة.
• تخصيص الشكل والسلوك: نفس الـ Component ممكن يغير شكله وسلوكه حسب الـ Props اللي بتتبعتله.
• تنظيم نقل البيانات: تسهّل عليك نقل البيانات من Parent Component لـ Child Component بطريقة مرتبة وسهلة.

إزاي تستخدم الـ Props؟ ​

1. تمرير الـ Props: اعتبرها كأنك بتبعت هدية. مثال: لو عندك Component عرض رسالة ترحيب، هتبعت الاسم والعمر كـProps.
2. الوصول للـ Props جوه المكون: بمجرد ما الـProps توصل، تقدر تستخدمها مباشرة لعرض البيانات.
   • مثال: مرحبًا يا {name}، عندك {age} سنة
3. تبسيط الوصول للـ Props: بدل ما تقول props.name وprops.age كل مرة، اعمل Destructuring وخلي الكود أنظف: const { name, age } = props;
4. التعامل مع Default Props: ممكن تحدد قيم افتراضية لو مفيش بيانات اتبعتت.
   • مثال: لو مفيش اسم يبقى "زائر".
5. التحقق من نوع الـ Props: استخدم مكتبة prop-types عشان تتأكد إن البيانات اللي بتيجي للComponent صحيحة وتتجنب الأخطاء.

نصائح عملية لاستخدام الـ Props ​

• استخدم الـ Props عشان تخلي الـComponents مرنة وقابلة لإعادة الاستخدام.
• مرر بس اللي محتاجه، ومتزودش بيانات ملهاش لازمة.
• تحقق دايمًا من نوع الـProps باستخدام prop-types لتجنب المفاجآت.
• اعتبر الـ Props زي مواصفات الـComponent: كل ما الـComponent مرن أكتر، كل ما سهلت تخصيصه وإعادة استخدامه.