الدرس 1 من 8
مصدر الحقيقة
- 14 دقيقة
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
الحالة تتغيّر، والواجهة تتبع
01
الشرح
أكثر ما يُفسد الواجهات: تعديل الـ DOM من عشرة أماكن. فتضيف عنصرًا هنا وتحذف نصًّا هناك، ثم لا أحد يعرف ما الحالة الحقيقية.
البديل قاعدة واحدة: كائن واحد يحمل الحالة، ودالة واحدة ترسمها. كل حدث يغيّر الحالة ثم يستدعي render()، ولا يلمس الصفحة بنفسه أبدًا.
هذا جوهر React وغيرها، لكنه لا يحتاج مكتبة — يحتاج انضباطًا.
02
المطلوب
اكتب render() ترسم state.items، واجعل الزرّ يضيف إلى الحالة ثم يعيد الرسم.
معايير التصحيح
5 معايير- القائمة تعرض عنصري الحالة الابتدائيين
- العدّاد يطابق طول الحالة
- الإضافة تزيد القائمة والعدّاد معًا
- الحالة نفسها تنمو لا الـ DOM وحده
- render دالة معرَّفة ويمكن استدعاؤها وحدها