تركيب المكوّنات (Component Composition)
جزء من دورة React
بنيت بطاقة لها حدّ وظل، ومظهرها جيد. والآن تحتاج البطاقة نفسها حول صورة، وحول نموذج تسجيل دخول، وحول قائمة تعليقات. والحركة المغرية هي نسخ البطاقة ثلاث مرات، أو إعطاؤها خاصية لكل شيء قد تحتويه: title وphotoUrl وformFields وcomments. وكلا الطريقين ينتهي بمكوّن لا يريد أحد أن يلمسه.
والمخرج هو التركيب (composition): بناء الأشياء الكبيرة بتعشيش الصغيرة داخل بعضها، بحيث يبقى كل جزء جاهلًا بالبقية. وإطار الصورة صورة ذهنية جيدة لهذا. فللإطار وظيفة واحدة، أن يضع حدًّا حول ما بداخله، ويؤديها دون أن يعرف أو يهتم أيحمل صورة فوتوغرافية أم شهادة أم رسمة طفل. والمكوّن المبني جيدًا في React إطار.
هل تريد تعلّم React تركيب المكوّنات (Component Composition) في بيئة حقيقية؟
انقر بالأسفل لتحصل على جهاز لينكس مع React جاهز، وتعمل على تركيب المكوّنات (Component Composition) بشكل عملي مع مدرّس ذكي يعرف الكود الخاص بك.
ابدأ هذا الدرستركيب المكوّنات (Component Composition)ما الذي ستتعلّمه
- Children prop
- Wrapping components
- Passing JSX as props
- Lifting state up
- Thinking in component trees
اقرأ هذا الدرس بلغتك
كل دروس هذه الدورة
17 دروس- 1ما هو React؟25 دقيقة
- 2JSX والمكوّنات (Components)30 دقيقة
- 3البروبس (Props)30 دقيقة
- 4الحالة (State) باستخدام useState35 دقيقة
- 5معالجة الأحداث30 دقيقة
- 6العرض الشرطي والقوائم30 دقيقة
- 7النماذج والمدخلات المتحكم بها (Controlled Inputs)35 دقيقة
- 8التأثيرات (Effects) باستخدام useEffect40 دقيقة
- 9جلب البيانات40 دقيقة
- 10تركيب المكوّنات (Component Composition)35 دقيقة
- 11السياق (Context) و useContext35 دقيقة
- 12useReducer35 دقيقة
- 13الخطافات المخصصة (Custom Hooks)35 دقيقة
- 14الأداء والحفظ بالتخزين (Memoization)35 دقيقة
- 15التوجيه باستخدام React Router40 دقيقة
- 16اختبار مكوّنات React (Components)40 دقيقة
- 17مشروع التخرج: تطبيق قائمة المهام60 دقيقة
