تطوير تطبيقات الويب باستخدام React & Next.js
تعلّم React وNext.js خلال 48 ساعة تدريبية. طوّر واجهات ويب تفاعلية باستخدام Components وHooks وReact Router، وتعرّف على تحسين محركات البحث SEO.
عن هذا المسار
يهدف تدريب React & Next.js إلى تمكين المتدربين من تطوير واجهات مستخدم تفاعلية وتطبيقات ويب حديثة، بالاعتماد على اثنتين من أبرز التقنيات المستخدمة في تطوير الواجهات الأمامية (Frontend Development). يبدأ التدريب بالتعرّف على مكتبة React وأساسيات بناء التطبيقات باستخدام المكونات (Components)، ولغة JSX، وخصائص المكونات (Props)، مع التركيز على إنشاء واجهات قابلة لإعادة الاستخدام وتنظيم الأكواد البرمجية. يتدرّب المشاركون على إدارة حالة المكونات والتعامل مع تفاعلات المستخدم، وربط البيانات بعناصر الواجهة، واستخدام المراجع (Refs) والتأثيرات (Effects)، إلى جانب إنشاء النماذج وإدارة البيانات المشتركة باستخدام Context API. كما يتناول التدريب جلب البيانات من المصادر الخارجية باستخدام Fetch API، وإدارة التنقل بين صفحات التطبيق باستخدام React Router، بما يساعد المتدربين على تطوير تطبيقات ويب أكثر تنظيمًا وتفاعلًا. وفي الجانب العملي، يطبّق المتدربون المفاهيم المكتسبة من خلال تطوير لعبة Tic Tac Toe، وتنفيذ مشروع واجهة ويب مستوحى من تحديات Frontend Mentor. وفي المرحلة الأخيرة، ينتقل التدريب إلى إطار العمل Next.js، حيث يتعرّف المشاركون على أساسياته ودوره في تطوير تطبيقات React، بالإضافة إلى مفاهيم تحسين محركات البحث (SEO) وإعداد البيانات الوصفية للصفحات. يركّز التدريب على التطبيق العملي وتنمية مهارات بناء الواجهات الأمامية، بما يساعد المتدربين على الانتقال من أساسيات JavaScript إلى تطوير تطبيقات ويب حديثة باستخدام React & Next.js.
ماذا ستتعلم؟
- مقدمة في React وأساسيات JSX
- المكونات وProps والعرض الشرطي
- إدارة الحالة باستخدام useState
- النماذج وربط البيانات في React
- تصميم مكونات قابلة لإعادة الاستخدام
- تطوير لعبة Tic Tac Toe باستخدام React
- التعامل مع المراجع باستخدام useRef
- التأثيرات الجانبية ودورة حياة المكونات
- مشاركة البيانات باستخدام Context API
- جلب البيانات والتعامل مع APIs في React
- التنقل بين الصفحات باستخدام React Router
- أساسيات TypeScript مع React
- مشروع تطبيقي باستخدام React وTypeScript
- مقدمة في Next.js وبناء الصفحات
- جلب البيانات وتحسين الأداء وSEO باستخدام Next.js
- اختبار التطبيقات ونشرها باستخدام Vercel