React Academy · درس

فحص أشجار المكوّنات وProps

تعمّقوا في تسلسلات المكوّنات واقرؤوا قيم props وstate المباشرة

فحص أشجار المكوّنات وProps درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

ستتعلّمون في هذا الدرس التعمّق في التسلسلات الهرمية للمكوّنات المتداخلة في React DevTools، وقراءة قيم الخصائص والحالة المعقّدة من الشريط الجانبي للوحة Components.

شجرة المكوّنات مرآة

يعكس كل مكوّن ترونه في DevTools تداخل JSX لديكم. وعادةً ما يكون الجذر هو المكوّن App. تظهر المكوّنات الفرعية بمسافة بادئة أسفل المكوّنات الأصلية، تمامًا كما تظهر في الشفرة المصدرية.

تحديد مكوّن

انقروا على اسم أي مكوّن في الشجرة. تعرض اللوحة اليمنى فورًا **props** و**hooks** (الحالة والتأثيرات والمراجع) وملف **source** ورقم السطر الذي عُرّف فيه المكوّن.

قراءة خصائص السلاسل النصية والأرقام

تظهر خصائص السلاسل النصية بين علامتَي اقتباس: `"hello"`. وتظهر الأرقام دون علامات اقتباس: `42`. أما القيم المنطقية فتظهر على هيئة `true` أو `false`. يمكنكم تمرير المؤشر فوق قيمة لرؤية محتواها الكامل إذا كانت مبتورة.

توسيع خصائص الكائنات والمصفوفات

عندما تكون قيمة الخاصية كائنًا أو مصفوفة، تعرض DevTools شجرة قابلة للطي والتوسيع. انقروا على السهم بجانب `{…}` أو `[…]` لتوسيعها ورؤية كل مفتاح وقيمة متداخلين.

فحص خصائص الدوال

تظهر خصائص الدوال (مثل معالجات `onClick`) على هيئة `f onClick()`. يمكنكم النقر على رمز السهم الصغير بجانبها للانتقال إلى تعريف الدالة في لوحة Sources.

تصفية الشجرة

استخدموا مربع البحث أعلى لوحة Components للتصفية حسب الاسم. اكتبوا `Button` لعرض المكوّنات التي يحتوي اسمها على *Button* فقط. ويفيد ذلك في التطبيقات التي تضم مئات المكوّنات.

الانتقال من DOM إلى React

في علامة التبويب **Elements**، انقروا بزر الفأرة الأيمن على عقدة DOM واختاروا **Inspect React component** (يتوفر ذلك عند تثبيت DevTools). تنتقل DevTools إلى علامة التبويب Components وتحدّد مكوّن React الذي عرض تلك العقدة.

تعديل الخصائص في DevTools

انقروا نقرًا مزدوجًا على قيمة خاصية في DevTools لتعديلها مباشرةً. يُعاد عرض المكوّن فورًا بالقيمة الجديدة. ويفيد ذلك في اختبار الحالات الطرفية دون تغيير الشفرة المصدرية.

نسخ الخصائص بتنسيق JSON

انقروا بزر الفأرة الأيمن على أي قيمة خاصية أو حالة في DevTools واختاروا **Copy value**. يؤدي ذلك إلى نسخ القيمة بتنسيق JSON إلى الحافظة، وهو مفيد للصقها في الاختبارات أو الوثائق.

تحقّق سريع

كيف توسّعون خاصية كائن أو مصفوفة في لوحة Components ضمن React DevTools؟

مراجعة

يمكنكم الآن التنقّل في أشجار المكوّنات، وقراءة السلاسل النصية والأرقام والكائنات والدوال، والتصفية حسب الاسم، والانتقال من عناصر DOM إلى مكوّنات React، وتعديل الخصائص مباشرةً في DevTools.

الدرس التالي: **Using the Profiler Tab** — ستسجّلون عمليات العرض، وتقرؤون المخططات اللهبية، وتحدّدون المكوّنات المسؤولة عن التفاعلات البطيئة.

الأسئلة الشائعة

هل درس «فحص أشجار المكوّنات وProps» مجاني؟

نعم — نص درس «فحص أشجار المكوّنات وProps» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «فحص أشجار المكوّنات وProps»؟

تعمّقوا في تسلسلات المكوّنات واقرؤوا قيم props وstate المباشرة تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «فحص أشجار المكوّنات وProps»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy