🧪 التدريبات
كل تمرين «جرّب بنفسك» في مكان واحد: اقرأ المطلوب، ثم اكتب الحل وشغّله داخل صفحة الدرس.
الوحدة 1: إتقان الهندسة المعتمدة على المكوّنات
بطاقة تعريف بالمكوّناتسهل · الدرس 1: لماذا أطر الواجهات؟ أول مكوّن React
اصنع صفحة تعريف بمتدرب من ثلاثة مكوّنات: رأس، وبطاقة، وتذييل.←كتالوج المنتجاتمتوسط · الدرس 2: المكوّنات والخصائص props
اعرض كتالوج منتجات بمكوّن واحد يُعاد استخدامه لكل منتج.←قائمة الحضورمتوسط · الدرس 3: الحالة والأحداث: useState
المدرب يسجّل أسماء الحاضرين في قائمة، ويستطيع حذف اسم أُضيف بالخطأ.←مؤقت المذاكرةمتوسط · الدرس 4: دورة حياة المكوّن: useEffect
مؤقت «بومودورو» مبسّط: يعد الثواني تنازليًّا، ويمكن إيقافه واستئنافه.←
اصنع صفحة تعريف بمتدرب من ثلاثة مكوّنات: رأس، وبطاقة، وتذييل.←كتالوج المنتجاتمتوسط · الدرس 2: المكوّنات والخصائص props
اعرض كتالوج منتجات بمكوّن واحد يُعاد استخدامه لكل منتج.←قائمة الحضورمتوسط · الدرس 3: الحالة والأحداث: useState
المدرب يسجّل أسماء الحاضرين في قائمة، ويستطيع حذف اسم أُضيف بالخطأ.←مؤقت المذاكرةمتوسط · الدرس 4: دورة حياة المكوّن: useEffect
مؤقت «بومودورو» مبسّط: يعد الثواني تنازليًّا، ويمكن إيقافه واستئنافه.←
الوحدة 2: إتقان إدارة الحالة
تبديل اللغة للتطبيق كلهمتوسط · الدرس 5: رفع الحالة ومشاركتها: Context
تطبيق صغير بلغتين. زر في الأعلى يبدّل اللغة، ومكوّن بعيد يقرؤها من السياق.←قائمة مهام بالمخفّضمتوسط · الدرس 6: تدفق البيانات بـ useReducer
قائمة مهام كل منطقها في مخفّض واحد.←شريحة الإشعاراتمتقدم · الدرس
أضف إلى التطبيق شريحة إشعارات بـ Redux Toolkit.←
تطبيق صغير بلغتين. زر في الأعلى يبدّل اللغة، ومكوّن بعيد يقرؤها من السياق.←قائمة مهام بالمخفّضمتوسط · الدرس 6: تدفق البيانات بـ useReducer
قائمة مهام كل منطقها في مخفّض واحد.←شريحة الإشعاراتمتقدم · الدرس
7: Redux Toolkit: مخزن واحد للتطبيقأضف إلى التطبيق شريحة إشعارات بـ Redux Toolkit.←
الوحدة 3: تنفيذ التصميم المتجاوب
بطاقة دورة بـ Tailwindسهل · الدرس
نسّق بطاقة دورة تدريبية بأصناف Tailwind فقط، بلا CSS ولا style.←معرض منتجات متجاوبمتوسط · الدرس 9: واجهات متجاوبة بـ Tailwind
اعرض المنتجات في شبكة تتكيف مع الشاشة.←
8: Tailwind CSS: التنسيق بالأصناف الجاهزةنسّق بطاقة دورة تدريبية بأصناف Tailwind فقط، بلا CSS ولا style.←معرض منتجات متجاوبمتوسط · الدرس 9: واجهات متجاوبة بـ Tailwind
اعرض المنتجات في شبكة تتكيف مع الشاشة.←
الوحدة 4: إتقان إطار الخادم
واجهة برمجة الطلابمتوسط · الدرس 10: أول خادم Express
خادم صغير لقائمة طلاب في الذاكرة، تستهلكه واجهة React لاحقًا.←بوابة الإدارةمتوسط · الدرس 11: الوسيطات ومعالجة الأخطاء
خادم فيه مسارات عامة ومسارات للإدارة محمية بمفتاح، وأخطاء موحّدة.←تقسيم خادم المهاممتوسط · الدرس 12: تنظيم الخادم: Router والمتحكمات
خادم مهام كُتب في ملف واحد، والمطلوب نقل مساراته إلى Router ومتحكم مع بقاء سلوكه كما هو.←
خادم صغير لقائمة طلاب في الذاكرة، تستهلكه واجهة React لاحقًا.←بوابة الإدارةمتوسط · الدرس 11: الوسيطات ومعالجة الأخطاء
خادم فيه مسارات عامة ومسارات للإدارة محمية بمفتاح، وأخطاء موحّدة.←تقسيم خادم المهاممتوسط · الدرس 12: تنظيم الخادم: Router والمتحكمات
خادم مهام كُتب في ملف واحد، والمطلوب نقل مساراته إلى Router ومتحكم مع بقاء سلوكه كما هو.←
الوحدة 5: تكامل قواعد البيانات مع ORM
مخزن المنتجاتمتوسط · الدرس
خادم منتجات يحفظ بياناته في قاعدة بيانات عبر Sequelize بدل المصفوفة.←مدونة: كتّاب ومقالاتمتقدم · الدرس 14: العلاقات والاستعلامات في ORM
واجهة برمجية لمدونة فيها كتّاب ومقالات مرتبطة.←
13: ORM و Sequelize: النماذج والجداولخادم منتجات يحفظ بياناته في قاعدة بيانات عبر Sequelize بدل المصفوفة.←مدونة: كتّاب ومقالاتمتقدم · الدرس 14: العلاقات والاستعلامات في ORM
واجهة برمجية لمدونة فيها كتّاب ومقالات مرتبطة.←
الوحدة 6: المصادقة والتفويض
مذكراتي الخاصةمتقدم · الدرس 15: المصادقة بـ JWT
خادم مذكرات: كل مستخدم يرى مذكراته فقط بعد تسجيل الدخول. التسجيل جاهز، أكمل الباقي.←لوحة الإعلاناتمتقدم · الدرس 16: التفويض والأدوار و OAuth
إعلانات الكلية: الجميع يقرأ، والمعلم والمشرف ينشران، والناشر وحده (أو المشرف) يحذف إعلانه. المصادقة جاهزة.←
خادم مذكرات: كل مستخدم يرى مذكراته فقط بعد تسجيل الدخول. التسجيل جاهز، أكمل الباقي.←لوحة الإعلاناتمتقدم · الدرس 16: التفويض والأدوار و OAuth
إعلانات الكلية: الجميع يقرأ، والمعلم والمشرف ينشران، والناشر وحده (أو المشرف) يحذف إعلانه. المصادقة جاهزة.←
الوحدة 7: تصميم واجهات برمجة التطبيقات RESTful
واجهة الفعالياتمتقدم · الدرس 17: تصميم REST API كامل في Express
واجهة REST لفعاليات النادي الطلابي (في الذاكرة) بتصميم موحّد.←قائمة مهام متصلة بالخادممتقدم · الدرس 18: ربط React بالـ API
الخادم جاهز في
واجهة REST لفعاليات النادي الطلابي (في الذاكرة) بتصميم موحّد.←قائمة مهام متصلة بالخادممتقدم · الدرس 18: ربط React بالـ API
الخادم جاهز في
server/server.js. اكتب واجهة React تتعامل معه.←الوحدة 8: تنفيذ قنوات اتصال فورية
تصويت مباشرمتوسط · الدرس
الخادم جاهز: يرسل الحدث
الواجهة جاهزة في App.jsx. أكمل الخادم في
19: WebSocket و Socket.ioالخادم جاهز: يرسل الحدث
results بكائن الأصوات {"React": 0, "Vue": 0, "Angular": 0} عند الاتصال وبعد كل تصويت، ويستقبل الحدث vote باسم الخيار. اكتب الواجهة.←غرفة الدعم الفنيمتقدم · الدرس 20: تطبيق دردشة وإشعارات فوريةالواجهة جاهزة في App.jsx. أكمل الخادم في
server/server.js.←الوحدة 9: تجميع البرامج ونشرها
خادم الإنتاجمتوسط · الدرس 21: البناء والتجميع بـ Vite
مجلد dist جاهز من npm run build. اكتب server.js الذي يقدّمه مع الواجهة البرمجية.←جاهز للإنتاجمتوسط · الدرس
خادم صغير كُتب للتطوير. عدّله ليصبح جاهزًا للنشر على منصة سحابية (يشغّله التحقق بالبيئة
مجلد dist جاهز من npm run build. اكتب server.js الذي يقدّمه مع الواجهة البرمجية.←جاهز للإنتاجمتوسط · الدرس
22: Docker والنشر السحابيخادم صغير كُتب للتطوير. عدّله ليصبح جاهزًا للنشر على منصة سحابية (يشغّله التحقق بالبيئة
PORT=8080 و NODE_ENV=production).←الوحدة 10: تحسين الأداء
قائمة لا تُعاد بلا داعمتقدم · الدرس 23: تحسين أداء الواجهة
التطبيق فيه عدّاد وقائمة طلاب ثقيلة الرسم. كل نقرة على العداد تعيد رسم القائمة دون داع. حسّنه دون تغيير ما يظهر.←ذاكرة مؤقتة لإحصاءات الصفحة الرئيسيةمتقدم · الدرس 24: تحسين أداء الخادم: التخزين المؤقت والفهارس
المسار
التطبيق فيه عدّاد وقائمة طلاب ثقيلة الرسم. كل نقرة على العداد تعيد رسم القائمة دون داع. حسّنه دون تغيير ما يظهر.←ذاكرة مؤقتة لإحصاءات الصفحة الرئيسيةمتقدم · الدرس 24: تحسين أداء الخادم: التخزين المؤقت والفهارس
المسار
/api/stats يحسب إحصاءات من قاعدة بيانات بطيئة في كل طلب. أضف تخزينًا مؤقتًا.←