CODERZ

احجز مقعدك

الاسم يجب أن يكون 3 أحرف على الأقل
رقم الموبايل مطلوب
دورة تطوير الواجهات الأمامية بـ React
البرمجة والتطوير مميز

ابنِ واجهات يعشقها المستخدمون. أتقن React من الصفر حتى الإنتاج.

React يشغّل أكثر من 40% من تطبيقات الويب العالمية — وهو المهارة الأولى التي يبحث عنها أصحاب العمل في مطوري الواجهات الأمامية. في هذه الدورة الشاملة، ستنتقل من أساسيات JavaScript وES6 إلى بناء تطبيقات Single Page Application قابلة للتوسع وعالية الأداء باستخدام React Hooks وRedux وربط REST API والنشر الحي — كل ذلك من خلال مشاريع تطبيقية حقيقية.

30 الساعات
احترافي
هجين
تواصل واتس اب

ما تتضمنه الدورة

المدة: 30 ساعة محتوى
الشهادة: عند الإكمال
المشاريع: مشاريع عملية
الدعم: وصول مدى الحياة

تصنيف الدورة

المستوى: احترافي
طريقة الحضور: هجين
نوع التدريب: دورة تدريبية
المسار المهني: مطور Backend
عن هذه الدورة
دورة تطوير الواجهات الأمامية بـ React | أكاديمية كودرز — عمّان، الأردن

دورة تطوير الواجهات الأمامية بـ React

React يشغّل أكثر من 40% من تطبيقات الويب العالمية — وهو المهارة الأولى التي يبحث عنها أصحاب العمل في مطوري الواجهات الأمامية. في هذه الدورة الشاملة، ستنتقل من أساسيات JavaScript وES6 إلى بناء تطبيقات Single Page Application قابلة للتوسع وعالية الأداء باستخدام React Hooks وRedux وربط REST API والنشر الحي — كل ذلك من خلال مشاريع تطبيقية حقيقية.

نظرة عامة على الدورة

دورة تطوير الواجهات الأمامية بـ React المقدمة من أكاديمية كودرز للتدريب مصممة لأخذ المطورين من أساسيات JavaScript وصولاً إلى بناء تطبيقات ويب احترافية وقابلة للتوسع وعالية الأداء باستخدام React. عبر 7 وحدات شاملة، ستتعلم بناء واجهات مستخدم ديناميكية بمعمارية قائمة على المكونات، وإدارة حالة التطبيق بكفاءة عبر أشجار المكونات المعقدة، والتكامل مع الـ APIs الخارجية، وشحن التطبيقات الجاهزة للإنتاج إلى الويب.

تُركّز الدورة على أفضل الممارسات الحديثة في كل وحدة — بما فيها React Hooks وRedux Toolkit وContext API وأنماط تصميم SPA وتحسين الأداء والأنماط المتقدمة مثل Custom Hooks وHigher-Order Components وuseReducer. كل وحدة مبنية حول سيناريوهات حقيقية وتمارين عملية تعكس ما يفعله مطورو الواجهات الأمامية فعلاً في العمل.

طرق التقديم

  • حضوري — في أكاديمية كودرز، عمّان
  • أونلاين — جلسات حية مع مدرب
  • مسجّل — تعلم ذاتي مرن
  • داخلي (In-House) — في مقر مؤسستك عند الطلب

المتطلبات الأساسية

يجب أن يمتلك المشاركون معرفة عملية قوية بـ HTML5 وCSS3 وJavaScript (ES6+) قبل الانضمام إلى الدورة. تبدأ الدورة بمراجعة شاملة لأساسيات JavaScript وميزات ES6، لكنها ليست مصممة للمبتدئين الكاملين في البرمجة. يُتوقع إلمام بالدوال والمصفوفات والكائنات وJavaScript اللاتزامني الأساسي.

من يجب أن يحضر هذه الدورة؟

  • مطورو JavaScript الذين يعرفون الأساسيات ويريدون التقدم إلى React وأطر الواجهات الأمامية الحديثة.
  • مطورو الواجهات الأمامية الذين يبنون بـ HTML وCSS وJavaScript الخالص وهم مستعدون للارتقاء إلى سير عمل قائم على المكونات وجاهز للإنتاج.
  • مطورو Full Stack الراغبون في تعزيز مهاراتهم في الواجهة الأمامية وإتقان منظومة React الكاملة.
  • طلاب علوم الحاسوب والمطورون الجدد المستعدون لدخول سوق عمل الواجهات الأمامية بمهارات React المطلوبة.
  • مطورو الواجهة الخلفية (Back-End) الراغبون في التوسع نحو التطوير الشامل (Full Stack) بإتقان React على جانب العميل.
  • المستقلون ورواد الأعمال الراغبون في بناء ونشر تطبيقات الويب الخاصة بهم باستقلالية تامة.

ماذا ستتعلم في هذه الدورة؟

بنهاية هذا التدريب، سيكون المشاركون قادرين على:

  • فهم Virtual DOM ومنهج React التصريحي في بناء واجهات المستخدم.
  • بناء مكونات UI قابلة لإعادة الاستخدام باستخدام JSX ومبادئ البرمجة الوظيفية.
  • إدارة State وProps بفعالية مع فهم تدفق البيانات أحادي الاتجاه في React.
  • توظيف React Hooks — useState وuseEffect وuseContext وuseReducer وuseMemo وuseCallback — في المكونات الوظيفية.
  • تطبيق التوجيه من جانب العميل بـ React Router لتجارب SPA متعددة الصفحات.
  • التعامل مع إدارة الحالة المعقدة بـ Redux Toolkit وContext API مع معرفة متى ولماذا يُستخدم كل منهما.
  • جلب البيانات وعرضها من REST APIs بـ Axios وFetch مع معالجة صحيحة للتحميل والنجاح والأخطاء.
  • تطبيق تقنيات تحسين الأداء شاملةً Memoization وLazy Loading وCode Splitting.
  • بناء ونشر تطبيقات React جاهزة للإنتاج على خدمات استضافة حية مثل Vercel وNetlify.

الشهادات الممنوحة

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

  • شهادة كودرز — شهادة الإتمام الأساسية
  • شهادة Cradley — للشركات والجهات الحكومية
  • شهادة Accredible — للأفراد والمسجلين بصفة شخصية

بالطلب مع رسوم إضافية:

  • شهادة الكلية الدولية الأكسفورد
  • شهادة طلال أبو غزالة
  • شهادة ICL

لماذا تختار هذه الدورة؟

  • إطار الواجهات الأمامية الأكثر طلباً: React تستخدمه Meta وAirbnb وNetflix وآلاف الشركات عالمياً — مما يجعله المهارة الأولى في إعلانات وظائف مطوري الواجهات الأمامية.
  • تغطية المنظومة الكاملة: من أساسيات المكونات والـ Hooks إلى Redux وربط API وتحسين الأداء والنشر الحي — مكدّس React الاحترافي الكامل.
  • 7 وحدات تطبيقية: كل وحدة مبنية حول حالات استخدام حقيقية وتنتهي بتمارين ومشاريع عملية تعكس عمل التطوير الاحترافي.
  • أفضل الممارسات الحديثة: الدورة تعلّم معايير الصناعة الحالية — المكونات الوظيفية والـ Hooks وRedux Toolkit وأساليب التنسيق الحديثة — ليس الأنماط القديمة.
  • انشر تطبيقاً حقيقياً: لا تتعلم React فحسب — تبني وتنشر تطبيقاً حياً وعاملاً بنهاية الدورة.
  • طرق تقديم مرنة: حضوري، أونلاين، مسجّل، أو داخلي — مصمم ليناسب جداول المحترفين.

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

ما هي متطلبات الانضمام إلى دورة React؟

يجب امتلاك معرفة قوية بـ HTML5 وCSS3 وJavaScript (ES6+). تبدأ الدورة بمراجعة شاملة لـ JavaScript وES6، لكنها ليست للمبتدئين الكاملين. يُتوقع إلمام بالدوال والمصفوفات والكائنات وJavaScript اللاتزامني قبل الانضمام.

هل تغطي الدورة Redux؟

نعم. الوحدة الرابعة تغطي Redux Toolkit و Context API — بمقارنة مباشرة وشرح متى يُستخدم كل منهما. الوحدة السابعة تذهب أبعد بدمج Context API مع useReducer لبناء حل إدارة حالة خفيف يشبه Redux دون الحاجة للمكتبة الكاملة.

هل ستتعلم ربط React بـ API خلفي؟

نعم. الوحدة الثالثة مخصصة كلياً لربط API — فهم REST APIs وأساليب HTTP وCRUD، ثم بناء استدعاءات API فعلية بـ Axios وFetch مع معالجة كاملة لحالات التحميل والنجاح والأخطاء.

هل ستنشر تطبيقاً حقيقياً في نهاية الدورة؟

نعم. الوحدة الخامسة تختتم بجلسة نشر عملية تنشر فيها تطبيق React النهائي على Vercel أو Netlify — ليكون مشروعك متاحاً للعالم وجاهزاً لإضافته إلى معرض أعمالك.

كيف أسجّل في الدورة؟

اتصل على 00962 778 111 010 أو راسلنا على info@CoderZ-Tech.com. أكاديمية كودرز للتدريب — عمّان، الجاردنز، عمارة صندوق الحج.

هل أنت مستعد للبناء بـ React؟

انضم إلى أكاديمية كودرز وأتقن إطار الواجهات الأمامية الذي يشغّل الويب الحديث. المقاعد محدودة — سجّل الآن.

أكاديمية كودرز للتدريب00962 778 111 010info@CoderZ-Tech.com الجاردنز، عمارة صندوق الحج، عمّان، الأردن
منهج الدورة
1 JavaScript الأساسي وES6
3 دروس
التعمق في أساسيات JavaScript: النطاق (Scope)، الرفع (Hoisting)، الفرق بين var وlet وconst
JavaScript اللاتزامني: Promises وصياغة async/await — أساسي لجلب البيانات من الـ APIs
ميزات JavaScript الحديثة: أساليب المصفوفات — map() وfilter() وreduce() — المستخدمة بكثرة في React لمعالجة البيانات
2 مقدمة إلى أساسيات React
5 دروس
JSX والمكونات: بناء مكونات بلا حالة وذات حالة، فهم Virtual DOM والمنهج التصريحي في UI
State وProps بعمق: تدفق البيانات أحادي الاتجاه، تمرير Props من المكون الأب إلى الابن، إدارة الحالة داخل المكون
useEffect — جلب البيانات والـ Event Listeners والتنظيف
useContext — مشاركة الحالة عبر المكونات
useRef — الوصول إلى DOM والقيم المستمرة
3 ربط API والتواصل بين الواجهة والخادم
3 دروس
REST APIs: أساليب HTTP (GET وPOST وPUT وDELETE) وعلاقتها بعمليات CRUD (إنشاء، قراءة، تحديث، حذف)
استدعاءات API اللاتزامنية: استخدام Fetch API الأصلي ومكتبة Axios — حالات التحميل والاستجابات الناجحة ومعالجة الأخطاء
بناء تطبيق CRUD كامل: مشروع عملي شامل يطبّق العمليات الأربع الكاملة — تجربة تطبيقية حقيقية ترسّخ المفاهيم
4
0 دروس
5 إدارة الحالة المتقدمة والتوجيه
2 دروس
Context API مقابل Redux Toolkit: مقارنة مباشرة — متى تستخدم Context (إدارة حالة صغيرة) ومتى تستخدم Redux (حالة معقدة وعالمية)
React Router: إدارة الصفحات والـ URLs في SPA — إنشاء المسارات وتداخلها والتنقل البرمجي
6 التنسيق وأفضل الممارسات والنشر
3 دروس
التنسيق في React: CSS Modules وStyled Components ومكتبات المكونات الجاهزة — Material-UI وChakra UI
أساسيات تحسين الأداء: تقسيم الكود بـ React.lazy() وSuspense، وأهمية Keys في القوائم
نشر المشروع: نشر تطبيق React جاهز للإنتاج على Vercel أو Netlify — حياً ومتاحاً للعموم
7 React المتقدم وتحسين الأداء
4 دروس
Custom Hooks: إنشاء Hooks مخصصة لاستخلاص المنطق المعقد وإعادة استخدامه عبر المكونات
Memoization بـ React.memo و useCallback: منع إعادة التصيير غير الضرورية لتحسين الأداء
Lazy Loading وCode Splitting: تقسيم كود التطبيق إلى أجزاء أصغر لتحسين وقت التحميل الأولي
Higher-Order Components (HOCs) وRender Props: أنماط بديلة لمشاركة الكود والمنطق بين المكونات
8 الأنماط المتقدمة في React والـ Hooks
4 دروس
Custom Hooks — أمثلة متقدمة: Hooks معقدة للتحقق من النماذج (Form Validation)، وإدارة Local Storage، ومعالجة أحداث تغيير حجم النافذة
هوك useReducer: بديل لـ useState لمنطق الحالة المعقد — متى يكون أفضل (تحولات الحالة التي تعتمد على الحالة السابقة أو تتضمن قيماً فرعية متعددة)
Context API مع useReducer: بناء حل إدارة حالة خفيف يشبه Redux دون المكتبة الكاملة — نمط قوي للتطبيقات متوسطة الحجم
فهم useMemo وuseCallback: أمثلة عملية تفصيلية لمنع إعادة التصيير غير الضرورية للحسابات والدوال المكلفة

هل أنت مستعد للبدء بالتعلم؟

سجّل في دورتنا اليوم واكتسب المهارات التي تبحث عنها الشركات.

تواصل معنا الآن