Props والتركيب
مرّر props، وحدد القيم الافتراضية عبر التفكيك، وقارن التركيب بالوراثة، وتعرّف إلى أنماط children/slots، وأنشئ مكونات عرض بسيطة.
Props والتركيب درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
نظرة عامة
الهدف: مرّر البيانات باستخدام props، وعيّن القيم الافتراضية، وابنِ واجهات المستخدم من خلال تركيب مكوّنات صغيرة.
- تنقل props البيانات إلى داخل المكوّنات.
- تُحدَّد القيم الافتراضية عبر التفكيك البسيط.
- التركيب ومنافذ children.
تمرير props
Props هي مدخلات للقراءة فقط. يعرض المكوّن الأب مكوّنًا ابنًا ويمرّر إليه القيم؛ ويقرأها الابن من معاملاته.
- لا تعدّل props.
- تحدث إعادة التصيير عند تغيّر حالة أو props المكوّن الأب.
القيم الافتراضية لـ props (بسيطة)
امنح props قيمًا افتراضية عبر تفكيكها في قائمة المعاملات: function Card({ title = "Untitled" }).
- تحافظ على متانة المكوّنات.
- تتجنب التحقق من undefined داخل الترميز.
التركيب، لا الوراثة
يعني التركيب بناء واجهات أكبر من أجزاء أصغر (children/slots). فضّله على الوراثة لتحقيق المرونة ووضوح تدفق البيانات.
عرض توضيحي: props وchildren
مثال: مرّر props، وعيّن القيم الافتراضية، وركّب children داخل تخطيط بطاقة بسيط.
<div id="root"></div>
العرض القابل لإعادة الاستخدام
تركّز مكوّنات العرض على التخطيط والمرئيات؛ اجعلها معتمدة على props وبلا حالة عند الإمكان لتسهيل إعادة استخدامها.
- واجهة صغيرة (props فقط).
- نسّق باستخدام الأصناف، وتجنب الآثار الجانبية الخفية.
التركيب أم الوراثة
مراجعة
مراجعة: مرّر البيانات باستخدام props، وعيّن قيمًا افتراضية آمنة، وركّب children لبناء واجهات مرنة قابلة لإعادة الاستخدام؛ وتجنب التسلسلات الهرمية القائمة على الوراثة.
الأسئلة الشائعة
هل درس «Props والتركيب» مجاني؟
نعم — نص درس «Props والتركيب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «Props والتركيب»؟
مرّر props، وحدد القيم الافتراضية عبر التفكيك، وقارن التركيب بالوراثة، وتعرّف إلى أنماط children/slots، وأنشئ مكونات عرض بسيطة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «Props والتركيب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.