شرح صفوف ومحتوى الفقرة
عند جاهزية تطبيقك للنشر الفعلي، نفّذ الأمر npm run build لحذف الكود غير المستخدم وضغط الحزمة النهائية داخل مجلد dist/، ثم اختبر النسخة المضغوطة محلياً بالأمر npm run preview. يقارن الجدول التالي بين أوامر وسلوكيات المشروع:
| الأمر أو المسار | الوظيفة الهندسية | سلوك المخرجات |
|---|---|---|
| npm create vite@latest | إنشاء قالب مشروع React جديد | يولّد ملفات البداية النظيفة وإعدادات Vite |
| npm run dev | تشغيل خادم التطوير المحلي | يخدم الوحدات لحظياً مع دعم التحديث الفوري HMR |
| npm run build | تجهيز وضغط حزمة الإنتاج | ينتج ملفات مصغرة وعالية الأداء داخل مجلد dist/ |
| npm run preview | معاينة نسخة الإنتاج محلياً | يختبر عمل مجلد dist/ الفعلي قبل رفعه للاستضافة |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس دور أداة البناء الحديثة Vite ولماذا حلت محل الأدوات المتوقفة، وخطوات تأسيس المشروع وتشغيله، ووظيفة كل ملف أساسي، والفرق بين وضع التطوير السريع HMR وبناء حزمة الإنتاج النهائية. الخطوة التالية: انتقل الآن إلى الدرس رقم 4 «نقطة التركيب والوضع الصارم وأدوات مطوري React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.