- بواسطة x32x01 ||
في البوستات اللي فاتت شرحنا يعني إيه JSX ، وأزاي نقدر نبني Components وغطينا موضوع الـ React Hooks زي الـ useState وشرحنا كمان أزاي تعمل Hook بنفسك.
فى البوست ده هنكمل مع بعض في الـ React وهنشرح الـ Props بالتفصيل
- الـ Components اللي بتستخدمها تقدر تغير شكلها وسلوكها حسب الـ Props اللي بتتبعت ليها يعني نفس الـ Component يقدر يبقى شكله مختلف حسب البيانات اللي بتيجي له.
- بتسهل علينا نقل البيانات من الـ Parent Component للـ Child Component بطريقة منظمة وسهلة.
2- الوصول للـ Props جوا المكون: بمجرد ما الـ Props توصل للـ Component تقدر تستخدمها بسهولة يعني لو بعت اسم "أحمد" وعمره "25" الـ Component هيستخدم البيانات دي عشان يعرض "مرحبًا يا أحمد، عندك 25 سنة".
3- تبسيط الوصول للـ Props: بدل ما تعقد الأمور وتقول "props.name" و"props.age" في كل مرة، ممكن تختصرها وتخليها "name" و"age" على طول ده هيخلي الكود أنظف وأبسط.
4- التعامل مع الـ Default Props: ممكن تحدد قيم افتراضية للـ Props يعني لو مفيش بيانات اتبعتت الـ Component هيشتغل بقيم معينة موجودة فيه زي إنك تقول لو مفيش اسم مبعوت خلي الاسم يكون "زائر".
5- التحقق من نوع الـ Props: عشان تتجنب المفاجآت اتأكد إن الـ Props اللي بتبعتها للـ Components من النوع الصحيح ممكن تستخدم مكتبات زي prop-types عشان تتحقق من نوع البيانات دي وتضمن إن كل حاجة ماشية تمام.
نصائح عملية لاستخدام الـ Props:
- استغل الـ Props عشان تخلي الـ Components بتاعتك تقدر تعمل حاجات كتير بسهولة ده هيخليها قابلة لإعادة الاستخدام في أماكن مختلفة.
- متزودش في عدد الـ Props مرر بس اللي تحتاجه متبعتش بيانات ملهاش لازمة.
- استخدم أدوات التحقق دايمًا استخدم أدوات زي prop-types عشان تتأكد إن الـ Props بتيجي بشكل صحيح وتتجنب الأخطاء اللي ممكن تحصل.
- اعتبر الـ Props زي مواصفات الـ Component خلي الـ Component بتاعك مرن بحيث تقدر تخصصه باستخدام الـ Props.
فى البوست ده هنكمل مع بعض في الـ React وهنشرح الـ Props بالتفصيل
يعني إيه Props في React ؟
ببساطة الـ Props اختصار لكلمة "Properties" ودي طريقة بنستخدمها في React عشان نمرر بيانات من Component لمكون تاني. يعني لو عندك مكون رئيسي (Parent Component) عايز يبعت معلومات لمكون فرعي (Child Component) بيستخدم الـ Props عشان يبعتله البيانات دي.طيب ليه نستخدم الـ Props ؟
- لإعادة استخدام الـ Components يعني تقدر تبني مكونات صغيرة تستخدمها أكتر من مرة في أماكن مختلفة وتبعت لها بيانات مختلفة كل مرة.- الـ Components اللي بتستخدمها تقدر تغير شكلها وسلوكها حسب الـ Props اللي بتتبعت ليها يعني نفس الـ Component يقدر يبقى شكله مختلف حسب البيانات اللي بتيجي له.
- بتسهل علينا نقل البيانات من الـ Parent Component للـ Child Component بطريقة منظمة وسهلة.
إزاي تستخدم الـ Props ؟
1- تمرير الـ Props: فكر في الموضوع كأنك بتبعت هدية لواحد صاحبك لو عندك Component خاص بعرض رسالة ترحيب هتبعت له اسم الشخص اللي عايز ترحب بيه وعمره مثلًا هنا الاسم والعمر دول هما الـ Props.2- الوصول للـ Props جوا المكون: بمجرد ما الـ Props توصل للـ Component تقدر تستخدمها بسهولة يعني لو بعت اسم "أحمد" وعمره "25" الـ Component هيستخدم البيانات دي عشان يعرض "مرحبًا يا أحمد، عندك 25 سنة".
3- تبسيط الوصول للـ Props: بدل ما تعقد الأمور وتقول "props.name" و"props.age" في كل مرة، ممكن تختصرها وتخليها "name" و"age" على طول ده هيخلي الكود أنظف وأبسط.
4- التعامل مع الـ Default Props: ممكن تحدد قيم افتراضية للـ Props يعني لو مفيش بيانات اتبعتت الـ Component هيشتغل بقيم معينة موجودة فيه زي إنك تقول لو مفيش اسم مبعوت خلي الاسم يكون "زائر".
5- التحقق من نوع الـ Props: عشان تتجنب المفاجآت اتأكد إن الـ Props اللي بتبعتها للـ Components من النوع الصحيح ممكن تستخدم مكتبات زي prop-types عشان تتحقق من نوع البيانات دي وتضمن إن كل حاجة ماشية تمام.
نصائح عملية لاستخدام الـ Props:
- استغل الـ Props عشان تخلي الـ Components بتاعتك تقدر تعمل حاجات كتير بسهولة ده هيخليها قابلة لإعادة الاستخدام في أماكن مختلفة.
- متزودش في عدد الـ Props مرر بس اللي تحتاجه متبعتش بيانات ملهاش لازمة.
- استخدم أدوات التحقق دايمًا استخدم أدوات زي prop-types عشان تتأكد إن الـ Props بتيجي بشكل صحيح وتتجنب الأخطاء اللي ممكن تحصل.
- اعتبر الـ Props زي مواصفات الـ Component خلي الـ Component بتاعك مرن بحيث تقدر تخصصه باستخدام الـ Props.