Front End development with React - تطوير واجهة المستخدم باستخدام React

Training Course index

اليوم الأول: مراجعة الأساسيات وتوسيع المفاهيم

• مراجعة سريعة لمفاهيم JavaScript الحديثة (ES6+).
• نظرة عامة على React ومكوناته (Components).
• الفرق بين Functional Components و Class Components.
• استخدام JSX وخصائص (Props).
• التعامل مع State وEvents في React.
• تمرين عملي: إنشاء تطبيق React بسيط.

اليوم الثاني: التعمق في مكونات React

• دورة حياة المكونات (Component Lifecycle).
• Hooks الأساسية:

1. useState
2. useEffect
3. useRef

• تمرين عملي: بناء مكونات ديناميكية تعتمد على البيانات.
• تنظيم المشروع وهيكلة الملفات في React.

اليوم الثالث: إدارة الحالة المتقدمة والتعامل مع البيانات

• مفهوم lifting state up ومشاركة الحالة بين المكونات.
• استخدام Context API لإدارة الحالة العامة.
• مقدمة إلى state management libraries مثل Redux أو Zustand (اختياري حسب الوقت).
• استهلاك APIs باستخدام fetch أو Axios.
• تمرين عملي: تطبيق React يعرض بيانات من واجهة برمجة خارجية.

اليوم الرابع: التوجيه والتصميم والتفاعل

• التعامل مع React Router للتنقل بين الصفحات.
• تصميم واجهات باستخدام CSS Modules أو Styled Components.
• تحسين تجربة المستخدم بالتحكم في التفاعلات والحالات.
• إضافة عناصر واجهة مثل القوائم والنماذج (Forms).
• تمرين عملي: إنشاء تطبيق متعدد الصفحات بواجهة احترافية.

اليوم الخامس: تحسين الأداء وبناء مشروع نهائي

• تحسين الأداء باستخدام React.memo وuseMemo وuseCallback.
• أفضل الممارسات في تنظيم الشيفرة والتعامل مع الأخطاء.
• تجهيز التطبيق للنشر باستخدام Vite أو Create React App.
• نشر المشروع على منصة مثل Netlify أو Vercel.
• المشروع الختامي: تطبيق متكامل يستخدم جميع المفاهيم السابقة.

Training course outcomes

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

• تطوير تطبيقات React تفاعلية ومنظمة.
• إدارة الحالة بشكل فعال باستخدام Hooks وContext.
• التعامل مع APIs وعرض البيانات بطريقة ديناميكية.
• تطبيق أفضل الممارسات في الأداء والتصميم والنشر.

Training Pre-requirements

• سعودي الجنسية
• شهادة دبلوم واعلى
• خلفية بلغات البرمجة
• يفضل لغة انجليزية
• وجود كمبيوتر