Frontend Engineeringمجاني
React Design Patterns
تجاوز مرحلة كتابة المكونات العشوائية إلى بناء واجهات React بهيكلة واضحة و قابلة للصيانة، عبر تعلم الـ Design Patterns التي يستخدمها المطورون لتنظيم المكونات (Component Organization)، مشاركة السلوك (Behavior Reusability) و إدارة تدفق البيانات (Data Flow Management) داخل التطبيقات الحقيقية.
JavaScript
TypeScript
React
React
About This Course
عن الدورة
في المشاريع الصغيرة يمكن لأي هيكلة أن تعمل، لكن مع نمو تطبيقات React تبدأ المشاكل بالظهور كـتكرار المنطق (Logic Redundancy)، فوضى الـ Props (أو ما يُعرف بـ Prop Drilling) و صعوبة صيانة المكونات (Components).
هذه الدورة تساعدك على فهم أنماط التصميم (Design Patterns) المستخدمة لحل هذه المشاكل و بناء واجهات React بهيكلة أوضح و أسهل في التطوير، الصيانة (Maintainability)، و قابلية التوسعة (Scalability).
Learning Outcomes
ماهي مخرجات التعلم من هذه الدورة؟
فهم و تطبيق الـ Design Patternsتعلم أشهر الأنماط المستخدمة في React مثل Compound Components، Render Props و Higher-Order Components و معرفة متى يُفضل استخدام كل Pattern.
فصل المنطق عن الواجهة (Separating Concerns)تعلم كيفية تنظيم المكونات بطريقة تجعل منطق التطبيق منفصلا عن واجهة المستخدم باستخدام الـ Custom Hooks و تقسيم المسؤوليات بين المكونات.
بناء مكونات قابلة لإعادة الاستخدام (Reusable Components)تعلم كيفية تصميم Components مرنة و مستقلة يمكن إعادة استخدامها في أكثر من مكان بدون تكرار الكود.
تقليل فوضى الـ Propsفهم طرق تمرير و إدارة البيانات بين المكونات بشكل أوضح و تجنب التعقيد الناتج عن الـ Prop Drilling باستخدام أدوات و Patterns مناسبة.
كتابة كود أوضح و أسهل في الصيانةتحسين طريقة تنظيم الكود ليصبح أسهل في القراءة، التعديل و الاختبار مع نمو المشروع.
فهم إدارة الـ State داخل التطبيقاتتعلم كيفية تنظيم و توزيع الـ State بين المكونات بطريقة تساعد على بناء تطبيقات React أكثر وضوح و مرونة.
Requirements
مُتطلبات الدورة
معرفة جيدة بأساسيات React و طريقة بناء الـ Components.
فهم أساسيات الـ Props، الـ State و الـ Hooks.
معرفة بسيطة بـ JavaScript الحديثة (ES6+).
يفضل امتلاك تجربة سابقة ببناء تطبيقات React صغيرة أو متوسطة.
Target Audience
لمن هذه الدورة؟
هذه الدورة مناسبة لـ:
مطوري React الذين يريدون تنظيم مشاريعهم بشكل أفضل.
من يشعر أن مكونات React الخاصة به أصبحت فوضوية أو صعبة الصيانة.
المطورين الذين يريدون كتابة Components قابلة لإعادة الاستخدام بشكل أفضل.
من يريد فهم طريقة بناء التطبيقات الحقيقية و ليس فقط الصفحات البسيطة.
المهتمين بتحسين هيكلة الكود و طريقة التفكير أثناء بناء واجهات React.
Curriculum
1 موضوع · 12 درسمنهج الدورة
01
Component Composition
12 درس
نمط Compound Components
مجاني
تطبيق عملي على Compound Components
مجاني
نمط Render Props
مجاني
تطبيق عملي على Render Props
مجاني
نمط Prop Getters
مجاني
تطبيق عملي على Prop Getters
مجاني
نمط Control Props
مجاني
تطبيق عملي على Control Props
مجاني
نمط State Reducer
مجاني
تطبيق عملي على State Reducer
مجاني
Headless Components
مجاني
Polymorphic Components
مجاني
Enrollment
مجاني بالكامل
التقييم
0 (0 تقييم)عدد الدروس
12 درسالنوع
المفاهيمالطلاب المسجلون
0اختبارات
-شهادة إتمام
-آخر تحديث
مايو 2026