الدرس 1 من 8

مصدر الحقيقة

هدف الدرس

الحالة تتغيّر، والواجهة تتبع

01

الشرح

أكثر ما يُفسد الواجهات: تعديل الـ DOM من عشرة أماكن. فتضيف عنصرًا هنا وتحذف نصًّا هناك، ثم لا أحد يعرف ما الحالة الحقيقية.

البديل قاعدة واحدة: كائن واحد يحمل الحالة، ودالة واحدة ترسمها. كل حدث يغيّر الحالة ثم يستدعي render()، ولا يلمس الصفحة بنفسه أبدًا.

هذا جوهر React وغيرها، لكنه لا يحتاج مكتبة — يحتاج انضباطًا.

02

المطلوب

اكتب render() ترسم state.items، واجعل الزرّ يضيف إلى الحالة ثم يعيد الرسم.

معايير التصحيح

5 معايير
  1. القائمة تعرض عنصري الحالة الابتدائيين
  2. العدّاد يطابق طول الحالة
  3. الإضافة تزيد القائمة والعدّاد معًا
  4. الحالة نفسها تنمو لا الـ DOM وحده
  5. render دالة معرَّفة ويمكن استدعاؤها وحدها
index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل» ليبدأ الفحص.

5 معايير في بطاقة «المطلوب».