الواجهة شجرة من المكونات
في الدرس السابق كان dashboard وصفا صغيرا مكتوبا بـ JSX. في محرر هذا الدرس ستجد نسخة أوسع. صار الوصف داخل دالة اسمها Dashboard و أضفنا قائمة الدورات بعد بطاقة التقدم.
الصفحة تعمل، لكن Dashboard تجمع عنوان الصفحة و ملخص التقدم و قائمة الدورات في مكان واحد. لكل جزء دور مختلف. كيف نعطي كل جزء اسما واضحا من دون تغيير ما يظهر في الصفحة؟
كيف نعطي جزءا من الواجهة اسما؟
انظر إلى Dashboard في المحرر. هي دالة اسمها يبدأ بحرف كبير و تعيد JSX. هذا ما نسميه مكونا (Component). ملف المعاينة يعرضها بكتابة <Dashboard /> و يترك لـ React استدعاءها.
لكن Dashboard تجمع عدة مسؤوليات. يمكننا نقل JSX الخاص بعنوان الصفحة إلى دالة جديدة اسمها DashboardHeader. داخل Dashboard نستخدمها هكذا:
<DashboardHeader />يبدأ اسم DashboardHeader بحرف كبير. هكذا يميز JSX بين مكون نعرفه نحن و وسم HTML مثل <header>. مع أن المكون دالة JavaScript، لا نكتب DashboardHeader() داخل JSX؛ نكتب <DashboardHeader /> و نترك React يستدعيه عند العرض.
أين نضع حدود المكونات؟
لا يحتاج كل وسم HTML إلى مكون مستقل. مثلا لا ننشئ دالة جديدة لوسم <li> لمجرد أنه داخل القائمة. نسأل إن كان لهذا الجزء دور واضح في الواجهة يستحق اسما.
في صفحتنا يعرض DashboardHeader العنوان و يعرض ProgressSummary تقدم الدورة و يعرض CourseList قائمة الدورات. يمكن أن يحتوي كل مكون على عدة وسوم HTML؛ الهدف هو تسمية هذه المسؤوليات لا تقسيم كل وسم وحده.
كيف تتكون شجرة العرض؟
عندما يعرض Dashboard المكون DashboardHeader، يكون Dashboard أبا له في شجرة العرض (render tree). و عندما نضع مكونات أخرى داخل Dashboard، تظهر تحته في الشجرة أيضا.
تتتبع هذه الشجرة المكونات التي يعرضها React. أما وسوم HTML التي تعيدها فلا تظهر فيها. حتى لو أعاد ProgressSummary عدة وسوم، فإنه يظهر في شجرة العرض باسم واحد.
جرب تقسيم Dashboard
افتح index.jsx و حدد حدود الأجزاء الثلاثة قبل التعديل. أين ينتهي عنوان الصفحة؟ و أين يبدأ كل من ملخص التقدم و قائمة الدورات؟
أنشئ DashboardHeader و ProgressSummary و CourseList خارج Dashboard و اكتب export قبل تعريف كل دالة. انقل JSX الخاص بكل جزء إلى دالته ثم استخدم المكونات الثلاثة داخل Dashboard. أبق main حول الملخص و القائمة. لا تغير course أو النصوص أو لون الإطار.
استخرج DashboardHeader و ProgressSummary و CourseList.
اعرض المكونات الثلاثة من Dashboard و ارسم شجرتها.
قبل فتح المعاينة توقع شكل الصفحة بعد التقسيم. قارن النتيجة بتوقعك و شغل الاختبارات. لماذا بقيت الواجهة كما هي رغم أننا غيرنا مكان JSX؟
قارن رسمك بشجرة Dashboard
بعد أن ترسم الشجرة بنفسك افتح الرسم المرجعي و قارن العلاقات بين المكونات.
أظهر شجرة العرض
Dashboard
├── DashboardHeader
├── ProgressSummary
└── CourseListيظهر Dashboard أبا للمكونات الثلاثة. لا يظهر main في الرسم لأنه وسم HTML و ليس مكون React. تغير تنظيم الكود، لكن النتيجة في الصفحة بقيت كما هي.
صارت الأجزاء مسماة بوضوح، لكنها ما زالت كلها في ملف واحد. في الدرس القادم سنرى متى ننقل بعضها إلى ملف مستقل.