الرئيسيةمن نحنالدورات التدريبيةالأسئلة الشائعة
Englishmohd@sbeeh.com+962 77 984 65 64
SBEEH Software Academy

تدريب تقني بإشراف مدربين معتمدين من مايكروسوفت (MCT) — في عمّان، الأردن، وفي جميع أنحاء دول الخليج.

استكشف

  • من نحن
  • الدورات التدريبية التقنية
  • التحقق من شهادة
  • الأسئلة الشائعة

تواصل معنا

  • +962-779846564
  • mohd@sbeeh.com
  • عمّان، الأردن

صبيح للبرمجيات تقدّم خدمات تطوير البرمجيات وتنفيذ التقنيات المتقدمة وأتمتة العمليات وخدمات الاستشارات التقنية والتدريب التقني الاحترافي بإشراف مدربين معتمدين من مايكروسوفت (MCT) للمؤسسات في الأردن والسعودية والإمارات وقطر والكويت والبحرين وعُمان.

© صبيح للبرمجيات. جميع الحقوق محفوظة. 2026.

العودة إلى الدورات التدريبية
تطوير تطبيقات الويب الأمامية باستخدام React
تطوير الواجهة الأماميةمتوسطحضوري / عن بُعد

تطوير تطبيقات الويب الأمامية باستخدام React

تطوير تطبيقات الويب الأمامية باستخدام React هي دورة في متوسط تطوير الواجهة الأمامية تُقدَّم حضوريًا وعبر الإنترنت من قبل أكاديمية صبيح للبرمجيات في عمّان، الأردن.

5 أيام (40 ساعة)

آخر تحديث ١٦ آب ٢٠٢٦

تُعلّم هذه الدورة متوسطة المستوى التي تستمر 5 أيام المطورين بناء تطبيقات صفحة واحدة حديثة وبجودة إنتاجية باستخدام React. وبدلاً من جولة سطحية على صياغة JSX، تغطي الدورة المفاهيم التي تفصل بين عرض React توضيحي وتطبيق إنتاجي قابل للصيانة: بنية المكوّنات وتركيبها، واستراتيجية إدارة الحالة، وجلب البيانات وتخزينها مؤقتاً، والتوجيه (routing)، والاختبار.

يبني المشاركون تطبيقاً متعدد الصفحات من الصفر عبر الأسبوع، متقدمين من المكوّنات الأساسية والخصائص (props)، مروراً بإدارة الحالة والتأثيرات الجانبية القائمة على الخطافات (hooks)، إلى التوجيه من جانب العميل باستخدام React Router، واستدعاء واجهة REST API حقيقية، وإدارة الحالة العامة، وكتابة اختبارات المكوّنات. تغطي الدورة عمداً المطبّات الشائعة في React — عمليات إعادة العرض غير الضرورية، الإغلاقات القديمة (stale closures) في useEffect، وتمرير الخصائص عبر مستويات متعددة (prop drilling) — التي غالباً ما يتعلمها المطورون ذاتيو التعلم بالطريقة الصعبة في الإنتاج.

صُممت هذه الدورة لمطوّري الواجهة الأمامية والحلول الكاملة الذين يعرفون بالفعل JavaScript/ES6 ويريدون بناء تطبيقات حقيقية في React بدلاً من متابعة دروس معزولة، وللمطورين القادمين من أطر واجهة أمامية أخرى (Angular، Vue) أو من تطبيقات مُعالَجة على الخادم والذين يحتاجون إلى تبنّي بنية قائمة على المكوّنات من جانب العميل.

اليوم 1: أساسيات React: المكوّنات، الخصائص، وJSX

المواضيع الرئيسية:

  • صياغة JSX وDOM الافتراضي
  • المكوّنات الدالية والخصائص (props)
  • العرض الشرطي والقوائم
  • أنماط تركيب المكوّنات

مواضيع فرعية تفصيلية:

  • تعابير JSX مقابل تدفق تحكم JavaScript
  • أنواع الخصائص والخصائص الافتراضية
  • المفاتيح (keys) في عرض القوائم ولماذا تهم
  • تقسيم الواجهة إلى مكوّنات قابلة لإعادة الاستخدام والتركيب

تمرين عملي: بناء واجهة عرض منتجات ثابتة كمجموعة مكوّنات مركّبة (ProductCard، ProductList، FilterBar) مُتحكَّم بها بالكامل عبر الخصائص.

سيناريو من واقع العمل: تحتاج صفحة كتالوج تسوّق إلى عرض قائمة منتجات قابلة للتصفية من مجموعة بيانات ثابتة قبل إضافة أي سلوك ديناميكي.

نتيجة التعلم: يصبح المشاركون قادرين على تفكيك واجهة إلى مكوّنات جيدة البنية وقابلة لإعادة الاستخدام وتمرير البيانات بشكل صحيح عبر الخصائص.

اليوم 2: الحالة، الخطافات، والتأثيرات الجانبية

المواضيع الرئيسية:

  • useState والمكوّنات المُتحكَّم بها
  • useEffect ومصفوفة الاعتماديات
  • الخطافات المخصصة
  • النماذج والتحقق من الصحة

مواضيع فرعية تفصيلية:

  • مطبّات useEffect الشائعة: الاعتماديات المفقودة، الحلقات اللانهائية، الإغلاقات القديمة
  • استخراج منطق قابل لإعادة الاستخدام إلى خطافات مخصصة
  • مدخلات النماذج المُتحكَّم بها مقابل غير المُتحكَّم بها
  • أنماط التحقق من الصحة من جانب العميل

تمرين عملي: إضافة تصفية تفاعلية ونموذج بحث مُتحكَّم به إلى كتالوج اليوم الأول، مع استخراج منطق التصفية إلى خطاف مخصص.

سيناريو من واقع العمل: يحتاج المستخدمون إلى تصفية والبحث في كتالوج المنتجات فورياً أثناء الكتابة، دون الحاجة إلى إعادة تحميل الصفحة.

نتيجة التعلم: يصبح المشاركون قادرين على إدارة حالة المكوّن المحلية والتأثيرات الجانبية بشكل صحيح، وتحديد وإصلاح أخطاء useEffect الشائعة.

اليوم 3: التوجيه وجلب البيانات

المواضيع الرئيسية:

  • React Router: المسارات، التنقل، ومعاملات المسار
  • جلب البيانات من واجهة REST API
  • حالات التحميل والخطأ
  • استراتيجيات تخزين البيانات مؤقتاً (نظرة عامة على React Query/TanStack Query)

مواضيع فرعية تفصيلية:

  • المسارات والتخطيطات المتداخلة
  • الجلب القائم على useEffect مقابل مكتبات جلب بيانات مخصصة
  • التعامل مع حالات التسابق (race conditions) والإلغاء
  • تحديثات الواجهة التفاؤلية (optimistic)

تمرين عملي: إضافة توجيه متعدد الصفحات (كتالوج، تفاصيل المنتج، السلة) إلى التطبيق، بجلب بيانات منتجات حقيقية من واجهة REST API بمعالجة سليمة للتحميل والأخطاء.

سيناريو من واقع العمل: يحتاج الكتالوج إلى أن يصبح تطبيقاً متعدد الصفحات بعرض تفاصيل منتج يُجلب مباشرة من واجهة API خلفية، بما في ذلك معالجة سلسة لفشل الشبكة.

نتيجة التعلم: يصبح المشاركون قادرين على تنفيذ التوجيه من جانب العميل وربط تطبيق React بواجهة API خلفية حقيقية بمتانة.

اليوم 4: إدارة الحالة على نطاق واسع واختبار المكوّنات

المواضيع الرئيسية:

  • Context API للحالة العامة
  • متى تُدخل مكتبة إدارة حالة (Redux/Zustand)
  • اختبار المكوّنات باستخدام React Testing Library
  • الأداء: التخزين المؤقت للحساب (memoization) باستخدام useMemo/useCallback/React.memo

مواضيع فرعية تفصيلية:

  • تجنّب تمرير الخصائص عبر مستويات متعددة باستخدام Context
  • كتابة اختبارات وحدة تختبر السلوك لا التنفيذ
  • تحديد وإصلاح عمليات إعادة العرض غير الضرورية
  • الاختيار بين Context وRedux وZustand لحجم تطبيق معيّن

تمرين عملي: نقل سلة التسوق إلى حالة عامة باستخدام Context API، وإضافة التخزين المؤقت للحساب لمنع إعادة العرض غير الضرورية، وكتابة اختبارات مكوّنات لمنطق السلة.

سيناريو من واقع العمل: تحتاج السلة إلى أن تكون متاحة من شريط التنقل وصفحة الكتالوج وصفحة الدفع دون تمرير خصائص عبر كل مكوّن وسيط.

نتيجة التعلم: يصبح المشاركون قادرين على تصميم استراتيجيات مشاركة حالة مناسبة لتطبيق متنامٍ وكتابة اختبارات آلية ذات معنى لمكوّنات React.

اليوم 5: بناء الإنتاج، النشر، والمشروع الختامي

المواضيع الرئيسية:

  • أدوات البناء باستخدام Vite
  • إعداد البيئة وتقسيم الشيفرة (code splitting)
  • أساسيات إمكانية الوصول لتطبيقات React
  • المشروع الختامي: إكمال ونشر التطبيق

مواضيع فرعية تفصيلية:

  • تحميل المسارات كسولاً باستخدام React.lazy وSuspense
  • متغيرات البيئة في بناء Vite
  • أساسيات HTML الدلالي وARIA في JSX
  • نشر بناء React ثابت

تمرين عملي: إنهاء تطبيق التسوق متعدد الصفحات، وإضافة مسارات محمّلة كسولاً، وإجراء فحص إمكانية وصول، وإنتاج بناء إنتاجي جاهز للنشر.

سيناريو من واقع العمل: التطبيق جاهز للتسليم إلى عميل؛ يحتاج إلى بناء صحيح للإنتاج، وتحميل سريع، وتلبية توقعات إمكانية الوصول الأساسية.

نتيجة التعلم: يغادر المشاركون بتطبيق React كامل ومُختبَر وببناء إنتاجي، ومهارات هيكلة مشروع جديد بالطريقة نفسها.

الأسئلة الشائعة

ملاحظات إضافية


لمن هذه الدورة؟

هذه الدورة للمطورين الذين يعرفون بالفعل JavaScript ويريدون بناء تطبيقات حقيقية وبجودة إنتاجية باستخدام React.

  • مطوّرو الواجهة الأمامية الذين يعرفون HTML/CSS/JavaScript ويريدون تعلم React بشكل صحيح
  • مطوّرو الحلول الكاملة الذين يحتاجون إلى بناء طبقة الواجهة لواجهات API الخلفية الخاصة بهم
  • المطورون المنتقلون من أطر أخرى (Angular، Vue) أو صفحات مُعالَجة على الخادم
  • القادة التقنيون الذين يقيّمون React لمشروع قادم

المتطلبات المسبقة

أساسيات JavaScript متينة مطلوبة؛ هذه ليست دورة أولى في تطوير الويب.

  • معرفة متينة بـ JavaScript/ES6 (الدوال، المصفوفات، التفكيك (destructuring)، promises/async-await)
  • معرفة عملية بـ HTML وCSS
  • إلمام أساسي بـ npm وسطر الأوامر
  • لا حاجة لخبرة سابقة في React أو أي إطار واجهة أمامية آخر

ما الشهادة التي أحصل عليها بعد هذه الدورة؟

عند إتمام التدريب بنجاح، سيحصل المشاركون على شهادة إتمام رسمية.


شهادة إتمام
معرض الصور

لحظات من هذا التدريب

نظرة على دورتنا التدريبية — جلسات تدريب عملية مع محترفين من الأردن ودول الخليج.

مهتم بهذا التدريب؟

تواصل معنا وسنساعدك في تخطيط التدريب المناسب لفريقك.

العودة إلى جميع الدورات