دليل React المختصر: 9 حالات شائعة لعرض HTML يجب أن تعرفها

مقدمة سريعة إلى عرض العناصر في React

عند العودة إلى العمل على React بعد فترة انقطاع، أو عند البدء به للمرة الأولى، ستجد نفسك غالباً تبحث عن نفس الأساسيات المتكررة: كيف تعرض قيمة داخل الواجهة؟ كيف تضيف فئة تنسيق؟ كيف تبني شرطاً لعرض جزء من المكونات؟ وكيف تمرر البيانات بين المكونات؟

لهذا السبب يأتي هذا الدليل العملي على هيئة مرجع سريع يضم 9 حالات شائعة جداً ستستخدمها باستمرار عند بناء الواجهات باستخدام React وJSX. تم ترتيب الأمثلة بطريقة منطقية تحاكي ما يواجهه المطور عادة أثناء تطوير التطبيق.

1) كيفية عرض البيانات داخل HTML

هذه أبسط حالة استخدام في React، وفيها يتم عرض قيمة متغير مباشرة داخل عناصر الواجهة. وغالباً ما تكون أول خطوة للتأكد من أن التطبيق استقبل البيانات ويعرضها بشكل صحيح.

الصيغة الأساسية

{ variable }

مثال عملي

{ metadata.subtitle.value }

يعتمد JSX على الأقواس المعقوفة لحقن القيم الديناميكية داخل الواجهة، ما يجعل قراءة الكود واضحة وسريعة.

2) كيفية إضافة الخاصية class بالشكل الصحيح

في React لا يمكنك استخدام الخاصية class مباشرة كما في HTML التقليدي، لأن الكلمة محجوزة في JavaScript. لذلك يجب استخدام className.

الصيغة الأساسية

<... className="classname">

مثال عملي

<div className="sidebar__inner">

هذه من أكثر النقاط التي يخطئ فيها المبتدئون، لذا من المهم تذكر أن التنسيق في React يبدأ غالباً من className وليس class.

3) كيفية تمرير البيانات إلى خصائص عناصر HTML

لا يقتصر استخدام القيم الديناميكية على النصوص فقط، بل يمكنك تمريرها أيضاً إلى خصائص مثل href وtitle وalt وخصائص data-* المخصصة.

الصيغة الأساسية

<... name={variable}>

مثال عملي

<a href={`https://twitter.com/${author.twitter.value}`}>

هذا الأسلوب مهم جداً عند بناء الروابط الديناميكية أو إنشاء واجهات تعتمد على بيانات قادمة من واجهة برمجة تطبيقات أو نظام إدارة محتوى.

4) كيفية عرض HTML خام داخل المكون

أحياناً تأتيك البيانات من نظام خارجي على شكل محتوى منسق مسبقاً، مثل محرر نصوص غني في CMS أو مخرجات أداة توليد محتوى. في هذه الحالة قد تحتاج إلى إدراج HTML خام داخل المكون.

يوفر React الخاصية dangerouslySetInnerHTML لهذا الغرض، لكن يجب استخدامها بحذر شديد لتجنب الثغرات الأمنية مثل XSS.

الصيغة الأساسية

<... dangerouslySetInnerHTML={{ __html: variable }}></...>

مثال عملي

<div dangerouslySetInnerHTML={{ __html: article.teaser }}></div>

متى تستخدم هذه الطريقة؟

• عند جلب محتوى من Headless CMS.
• عند عرض وصف أو مقال منسق بصيغة HTML.
• عند استخدام مكتبة تقوم بتحويل البيانات إلى عناصر HTML جاهزة.

5) كيفية التكرار على مجموعات البيانات باستخدام map()

عند إنشاء صفحات المقالات أو الخرائط أو نتائج البحث أو أي صفحة تعرض قائمة من العناصر، ستحتاج إلى التكرار على المصفوفات وتحويل كل عنصر إلى مكون مرئي.

الصيغة الأساسية

let components = collectionVariable.map((item) => <Component data={item} key={item.uniqueKey} />);
...
<div>{components}</div>

مثال عملي

let articleComponents = articles.map((article) => <Article data={article} key={article.id} />);
...
<div>{articleComponents}</div>

تُعد الدالة map() من أكثر الأدوات استخداماً في React، لأنها تتيح لك تحويل البيانات إلى واجهة استخدام بطريقة منظمة وقابلة للتوسع.

ملاحظة مهمة حول key

احرص دائماً على تمرير قيمة فريدة إلى الخاصية key حتى يتمكن React من تتبع العناصر بكفاءة وتحسين الأداء أثناء إعادة التصيير.

6) كيفية التكرار على البيانات مع استخدام الفهرس index

في بعض الحالات لا تحتاج فقط إلى العنصر نفسه، بل تحتاج أيضاً إلى رقمه داخل المصفوفة. هنا يمكنك استخدام المعامل الثاني في الدالة map() وهو index.

الصيغة الأساسية

let components = collectionVariable.map((item, index) => <Component data={item} index={index} key={uniqueKey} />);
...
<div>{components}</div>

مثال عملي

let articleComponents = articles.map((article, index) => <Article data={article} index={index} key={article.id} />);
...
<div>{articleComponents}</div>

يمكن الاستفادة من index في الترتيب أو في تطبيق أنماط مختلفة على العناصر حسب موقعها، لكن لا يُنصح باستخدامه كبديل عن key إلا عند غياب معرّف ثابت وفريد.

7) كيفية عرض عناصر بشكل شرطي

العرض الشرطي من الأنماط الأساسية في JSX. ويستخدم عادة لإظهار المحتوى فقط عند تحقق شرط معيّن، مثل انتهاء تحميل البيانات أو وجود نتائج قابلة للعرض.

الصيغة الأساسية

{variable !== null && <...>}

مثال عملي

{data.length > 0 && <div>...</div>}

يعتمد هذا الأسلوب على العامل المنطقي &&، حيث يتم عرض الجزء الموجود بعده فقط إذا كان الشرط صحيحاً.

8) كيفية بناء شرط يتضمن حالة بديلة else

إذا كنت تريد عرض محتوى بديل عند عدم تحقق الشرط، يمكنك كتابة شرطين متعاكسين بشكل واضح داخل JSX.

الصيغة الأساسية

{variable !== null && <...>}
{variable == null && <...>}

مثال عملي

{data.length > 0 && <div>...</div>}
{data.length == 0 && <div>Loading...</div>}

هذا النمط مفيد جداً في واجهات التحميل، وعرض الرسائل البديلة، والتنقل بين أكثر من حالة في نفس المكون.

9) كيفية تمرير البيانات إلى المكونات الابنة عبر props

عندما تبدأ بتقسيم الواجهة إلى مكونات صغيرة، ستحتاج إلى تمرير البيانات من المكون الأب إلى المكون الابن. ويتم ذلك عبر props.

الصيغة الأساسية

<Component componentVariable={variable} />

مثال عملي

<Links author={author} />

تساعدك props على بناء مكونات قابلة لإعادة الاستخدام، وتسهّل إدارة الواجهة بشكل أكثر تنظيماً واحترافية.

نصائح عملية لكتابة كود React أوضح وأفضل

• استخدم أسماء متغيرات ومكونات معبرة لتسهيل القراءة والصيانة.
• تجنب إدراج HTML خام إلا عند الحاجة ومع التأكد من سلامة المصدر.
• مرر قيمة key فريدة دائماً عند التكرار على القوائم.
• قسّم المنطق المعقد إلى مكونات أصغر بدلاً من تضخيم ملف واحد.
• احرص على جعل الشروط في JSX واضحة لتسهيل تتبع الحالات المختلفة.

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

الخلاصة التقنية

إتقان هذه الأنماط التسعة في React يمنحك أساساً قوياً لبناء واجهات مرنة وقابلة للصيانة. وعلى الرغم من بساطتها، فإن هذه الحالات تمثل الجزء الأكبر من العمل اليومي داخل تطبيقات React. كلما أتقنت استخدام JSX وطرق تمرير البيانات والعرض الشرطي والتعامل مع القوائم، أصبحت كتابة الواجهات أسرع وأكثر احترافية وأقل عرضة للأخطاء.