الدرس 1 من 8

الحالة في مكان واحد

هدف الدرس

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

01

الشرح

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

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

وهذه هي الفكرة التي تقوم عليها React وأمثالها، لكنها لا تحتاج إلى مكتبة، بل إلى الالتزام بالقاعدة.

02

المطلوب

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

الفحوص

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

تلميحات

0/3
دروس المسارأتممت 0 من 8

الواجهة تُبنى من البيانات، فتتعلّم هنا أن تصفّي البيانات وترتّبها وتجمّعها دون أن تعدّل الـ DOM مباشرة.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعتان.

index.html
المعاينة
index.html100%
–/5

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

تجد 5 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

الواجهة تُبنى من البيانات، فتتعلّم هنا أن تصفّي البيانات وترتّبها وتجمّعها دون أن تعدّل الـ DOM مباشرة.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعتان.