في هذا الدرس 6تصفّح المواضيع
ينطلق كل تطبيق صفحة واحدة في React من عنصر حاوية فارغ وحيد داخل ملف index.html يُكتب قياسياً بصيغة <div id="root"></div>. وبمجرد أن تتركب React على هذه الحاوية تصبح المسؤولة الوحيدة عن إدارة كافة العناصر بداخلها، لذا يجب تجنب التعديل اليدوي لعناصرها بسكريبتات خارجية.
import { createRoot } from 'react-dom/client';
function App() {
return <h1>Mounted Inside #root Container</h1>;
}
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);بدءاً من الإصدار الثامن عشر فصاعداً، يتم تركيب التطبيق حصراً باستيراد الدالة createRoot من المسار الفرعي الصريح react-dom/client، ثم استدعاء root.render(<App />). وقد أُلغيت الطريقة القديمة التي كانت سائدة في الإصدارات السابقة لأن createRoot تفعّل محرك التصيير المتزامن الحديث وتجميع التحديثات التلقائي.
عندما تفتح ملف src/main.jsx في أي مشروع حديث ستجد المكون الجذري محاطاً بغلاف <StrictMode> المستورد من حزمة react. لا يضيف الوضع الصارم أي عنصر مرئي لشجرة المتصفح، بل يعمل كحارس جودة أثناء التطوير فقط ليفحص نقاء الدوال، ويكشف نسيان تنظيف المؤقتات، وينبهك مبكراً لأي واجهات برمجية متقادمة.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
function App() {
return <p>Guarded by React StrictMode in Dev</p>;
}
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);يتفاجأ كثير من المبتدئين عند رؤية جملة طباعة console.log داخل دالة المكون تعمل مرتين متتاليتين أثناء التطوير المحلي. هذا السلوك مقصود وصحي تماماً! إذ يستدعي StrictMode دالة المكون مرتين في بيئة التطوير للتأكد من أنها دالة نقية تعيد نفس النتيجة دائماً؛ فلا تحذف غلاف StrictMode لإخفاء المشكلة، بل أصلح سبب التعديل غير النقي.
احرص منذ اليوم الأول على تثبيت إضافة React Developer Tools الرسمية لمتصفحات Chrome أو Edge أو Firefox. عند فتح نافذة أدوات المطور (F12) سيظهر تبويبان متخصصان لا غنى عنهما:
- تبويب Components: يعرض شجرة المكونات المنطقية النظيفة ويتيح فحص الخصائص والحالات الحية لكل مكون في اللحظة نفسها.
- تبويب Profiler: يسجل جلسات التفاعل ويقيس زمن تصيير كل مكون بالمللي ثانية لاكتشاف أي بطء بدقة.
عند وقوع أي خطأ نحوي أو برمجي أثناء التطوير، تعرض طبقة التنقيح في Vite اسم الملف ورقم السطر والعمود بدقة، وبمجرد حفظ التصحيح يختفي الخطأ تلقائياً عبر التحديث السريع. يلخص الجدول التالي أدوات التركيب والفحص:
| الأداة أو الدالة | مسار الاستيراد أو الموقع | الوظيفة الهندسية |
|---|---|---|
| العنصر div#root | داخل ملف index.html | الحاوية الفارغة التي تحتضن شجرة واجهة React |
| الدالة createRoot | المسار react-dom/client | إنشاء جذر React 18 الحديث وعرض المكون الرئيسي |
| المكون StrictMode | حزمة react الأساسية | فحص نقاء الدوال والتأثيرات في وضع التطوير فقط |
| أدوات React DevTools | إضافة المتصفح الرسمية | فحص شجرة المكونات الحية وقياس أداء التصيير |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تركيب شجرة التطبيق داخل الحاوية #root عبر دالة createRoot الحديثة، وفهمت حكمة الاستدعاء المزدوج في StrictMode أثناء التطوير، وتعرفت على تبويبي Components وProfiler وتشخيص رسائل الأخطاء. الخطوة التالية: انتقل الآن إلى الدرس رقم 5 «بناء أول مكون دالي في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 createRoot دالة إنشاء الجذر createRoot
- الدالة القياسية في React 18+ المستوردة من react-dom/client لربط حاوية DOM بشجرة المكونات.
- للمراجعة
- 02 StrictMode الوضع الصارم StrictMode
- مكون مدمج في React يفعّل فحوصات إضافية لنقاء الدوال والتنظيف في بيئة التطوير فقط.
- للمراجعة
- 03 Host Container عنصر الحاوية المضيف
- عنصر HTML الفعلي داخل الصفحة والذي تركّب React شجرة واجهتها بالكامل بداخله.
- للمراجعة
- 04 Component Stack تسلسل استدعاء المكونات
- سلسلة المكونات الآباء التي تطبعها React في رسائل الخطأ لتحديد مسار المكون المسبب للعطل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 API API
- Application Programming Interface
- الدوال والمكونات البرمجية الرسمية التي تصدرها حزم React لاستخدام المطورين.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر المتصفح التي تستلم دالة createRoot إدارة عقدتها الجذرية.
- للمراجعة
- 03 HMR HMR
- Hot Module Replacement
- التحديث اللحظي الذي يخفي شاشة الخطأ تلقائياً ويعرض التصحيح فور حفظ الملف.
- للمراجعة
- 04 SPA SPA
- Single-Page Application
- تطبيق يتركب بالكامل داخل حاوية جذرية واحدة في مستند HTML.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال StrictMode في محرر التجريب وعدّل النص داخل المكون App وتأكد أن الغلاف لا يضيف أي عناصر زائدة للصفحة.
-
تنقل بين التبويبات الثلاثة في المختبر لمراجعة صيغة createRoot ودور StrictMode وتبويبات الفحص.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
من أي مسار برمجي تُستورد دالة createRoot في إصدارات React الحديثة؟
تُستورد دالة createRoot قياسياً من المسار react-dom/client.
يضيف مكون <StrictMode> عنصر div مرئياً إضافياً حول تطبيقك في شجرة الصفحة.
خطأ؛ فلا ينتج StrictMode أي عنصر HTML مرئي في الصفحة إطلاقاً.
لماذا يستدعي مكون StrictMode دوال المكونات مرتين عمداً أثناء وضع التطوير؟
لكشف أي تعديلات خارجية غير نقية داخل دالة المكون مبكراً قبل وصولها للإنتاج.
تتوقف الفحوصات المزدوجة لمكون StrictMode تلقائياً في نسخة الإنتاج النهائية.
صواب؛ إذ يقتصر عمل StrictMode على بيئة التطوير فقط دون أي تكلفة في نسخة الإنتاج.
ما التبويبان اللذان تضيفهما إضافة React Developer Tools الرسمية إلى نافذة أدوات المطور؟
تضيف الأداة تبويبي Components لفحص الشجرة وProfiler لقياس الأداء.
ما دور العنصر <div id="root"></div> الموجود داخل ملف index.html؟
يعمل كحاوية مضيفة فارغة تركّب فيها دالة createRoot شجرة واجهة تطبيق React.
ما التصرف الهندسي الصحيح إذا كشف StrictMode سلوكاً خاطئاً عند استدعاء المكون مرتين؟
يجب إصلاح الكود غير النقي داخل المكون بدلاً من حذف غلاف StrictMode وإخفاء العلة.
بعد استلام createRoot لإدارة الحاوية #root، ينبغي تجنب حذف أو تعديل عناصرها الداخلية يدوياً بسكريبتات خارجية.
صواب؛ فالتدخل اليدوي المباشر في عقد تديرها React يربك عملية المطابقة ويسبب أخطاء عرض.
ما المعلومة الأولى التي تعرضها شاشة تشخيص الأخطاء عند وقوع خطأ نحوي أثناء التطوير؟
تبرز مسار الملف الدقيق ورقم السطر والعمود مع السطر البرمجي المسبب للخطأ.
ما دالة التركيب القديمة التي استُبدلت بدالة createRoot بدءاً من الإصدار الثامن عشر؟
حلّت دالة createRoot الحديثة محل الدالة القديمة المتقادمة ReactDOM.render.