عرض واجهات المستخدم (UI)

لفهم كيفية عمل React، نحتاج أولاً إلى فهم أساسي لكيفية تفسير المتصفحات لشفرة المصدر الخاصة بك لإنشاء (أو عرض) واجهات المستخدم (UI).

عندما يزور المستخدم صفحة ويب، يقوم الخادم بإرجاع ملف HTML إلى المتصفح قد يبدو كالتالي:

ثم يقرأ المتصفح HTML ويقوم ببناء نموذج كائن المستند (DOM).

ما هو DOM؟

DOM هو تمثيل كائن لعناصر HTML. يعمل كجسر بين شفرتك وواجهة المستخدم، وله بنية شبيهة بالشجرة مع علاقات أب وابن.

يمكنك استخدام طرق DOM وJavaScript، للاستماع إلى أحداث المستخدم والتلاعب بـ DOM عن طريق تحديد وإضافة وتحديث وحذف عناصر محددة في واجهة المستخدم. يسمح التلاعب بـ DOM ليس فقط باستهداف عناصر محددة، ولكن أيضًا تغيير نمطها ومحتواها.

في القسم التالي، ستتعلم كيفية استخدام JavaScript وطرق DOM.

موارد إضافية:

• مقدمة إلى DOM
• كيفية عرض DOM في Google Chrome
• كيفية عرض DOM في Firefox