شرح صفوف ومحتوى الفقرة
عند وقوع أي خطأ نحوي أو برمجي أثناء التطوير، تعرض طبقة التنقيح في Vite اسم الملف ورقم السطر والعمود بدقة، وبمجرد حفظ التصحيح يختفي الخطأ تلقائياً عبر التحديث السريع. يلخص الجدول التالي أدوات التركيب والفحص:
| الأداة أو الدالة | مسار الاستيراد أو الموقع | الوظيفة الهندسية |
|---|---|---|
| العنصر div#root | داخل ملف index.html | الحاوية الفارغة التي تحتضن شجرة واجهة React |
| الدالة createRoot | المسار react-dom/client | إنشاء جذر React 18 الحديث وعرض المكون الرئيسي |
| المكون StrictMode | حزمة react الأساسية | فحص نقاء الدوال والتأثيرات في وضع التطوير فقط |
| أدوات React DevTools | إضافة المتصفح الرسمية | فحص شجرة المكونات الحية وقياس أداء التصيير |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تركيب شجرة التطبيق داخل الحاوية #root عبر دالة createRoot الحديثة، وفهمت حكمة الاستدعاء المزدوج في StrictMode أثناء التطوير، وتعرفت على تبويبي Components وProfiler وتشخيص رسائل الأخطاء. الخطوة التالية: انتقل الآن إلى الدرس رقم 5 «بناء أول مكون دالي في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.