في هذا الدرس 6تصفّح المواضيع
لا تكفي الوسوم الثابتة وحدها لعرض اسم المتعلم أو حساب إجمالي فاتورة أو إظهار نسبة الإنجاز الحية. داخل JSX تفتح الأقواس المعقوفة { } نافذة مباشرة إلى لغة JavaScript؛ إذ تحسب React ناتج أي تعبير تكتبه بداخلها لحظة التصيير وتدرج قيمته في الواجهة.
يمكنك تضمين المتغيرات، وخصائص الكائنات مثل {course.title}، والعمليات الحسابية مثل {completed + 1}، واستدعاءات الدوال مثل {title.toUpperCase()}.
function OrderSummary() {
const planName = 'CloseTag Pro Lab';
const price = 24;
const seats = 3;
return (
<section className="rx-card">
<h3>{planName.toUpperCase()}</h3>
<p>Total ({seats} seats): ${price * seats}</p>
</section>
);
}تعمل الأقواس المعقوفة بالمرونة ذاتها عند تمرير السمات الديناميكية للعناصر؛ استخدم علامات التنصيص src="/logo.svg" للنصوص الثابتة، واستبدلها بالأقواس المعقوفة src={bannerUrl} لقراءة قيمة متغير برمجي.
احذر خطأ المبتدئين الشائع: لا تحط الأقواس المعقوفة بعلامتي تنصيص مثل src="{bannerUrl}"، لأن التنصيص يلغي التقييم البرمجي ويحول الرموز نفسها إلى نص حرفي مكسور!
function DeviceCard() {
const asset = {
src: '/images/examples/laptop-pro.webp',
alt: 'Developer laptop running Vite build',
};
return (
<figure className="rx-card">
<img src={asset.src} alt={asset.alt} />
</figure>
);
}لماذا يعمل المعامل الثلاثي {count > 0 ? 'Available' : 'Sold Out'} بسلاسة داخل JSX بينما يفشل كتابة {if (count > 0)} فوراً؟ لأن ما بداخل المعقوفات يُمرر كوسيط لدالة إنشاء العنصر، لذا يقبل فقط التعابير المنتجة لقيمة (Expressions) ويرفض الجمل التحكمية (Statements) مثل if وfor وswitch.
وعندما يتشعب الشرط، احسب النتيجة أولاً بجمل if/else عادية قبل سطر return في متغير محلي، ثم اعرض المتغير بنظافة داخل {statusLabel}.
لإبقاء عناصر الواجهة مقروءة وأنيقة، تجنب حشو معادلات التنسيق الطويلة مباشرة وسط الوسوم. افصل تنسيق العملات والأرقام والتواريخ في دوال مساعدة نقية بأعلى الملف معتمداً على واجهة Intl القياسية في المتصفح، ثم استدعِها باختصار مثل {formatPrice(amount)}.
const usd = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
function PlanPriceCard() {
const fee = 149.5;
return (
<div className="rx-card">{usd.format(fee)}</div>
);
}من أقوى ضمانات الأمان المدمجة في React آلية الحماية التلقائية ضد البرمجة العابرة للمواقع (Automatic XSS Escaping). فعندما تعرض نصاً قادماً من المستخدم أو الشبكة داخل الأقواس المعقوفة مثل <p>{userComment}</p>، تحوله React تلقائياً إلى عقدة نصية معزولة وترمّز محارف الوسوم قبل إدراجه في الصفحة، فتظهر أي وسوم محقونة كحروف نصية عادية يستحيل على المتصفح تنفيذها كأكواد خبيثة!
function CommentPreview() {
const rawInput = '<b>Untrusted Tag</b> & <hr>';
return (
<div className="rx-card">
<h4>Safe Escaped Output:</h4>
<p>{rawInput}</p>
</div>
);
}انتبه جيداً إلى المنفذين الوحيدين اللذين قد يكسر بهما المبرمج درع الحماية التلقائي في React عن غير قصد:
- خاصية
dangerouslySetInnerHTML: سُميت بكلمة «خطير» عمداً لتنبيهك! فتمرير نصوص المستخدم إليها يحقن عناصر خاماً مباشرة في الصفحة، لذا يُحظر استخدامها مع أي محتوى غير موثوق دون تطهيره بمكتبة قوائم بيضاء صارمة مثلDOMPurify. - روابط
hrefغير المفحوصة: ترميز النصوص لا يمنع بروتوكولjavascript:إذا وُضع في سمة الرابط<a href={userUrl}>! تحقق دائماً من الروابط الخارجية عبرnew URL()ولا تسمح إلا بالبروتوكولات الآمنةhttps:أوhttp:أوmailto:.
راجع ملخص القواعد والأمان في الجدول التالي:
| النمط البرمجي في JSX | السلوك وقت التشغيل | الحكم الهندسي والأمني |
|---|---|---|
<p>{untrustedText}</p> | يحول المحارف إلى عقدة نصية آمنة غير تنفيذية | آمن تلقائياً ضد حقن وسوم XSS النصية |
<img src={imageUrl} /> | يمرر قيمة المتغير البرمجي مباشرة بدون تنصيص | آمن مع المسارات المحلية أو بروتوكول https: |
<a href={userSubmittedUrl}> | يربط بروتوكول الرابط مباشرة بعنصر الانتقال | يلزم فحص البروتوكول وحظر روابط javascript: |
dangerouslySetInnerHTML | يحقن شيفرة HTML خاماً دون أي ترميز تلقائي | خطر؛ لا يُستخدم إلا بعد تطهير صارم بـ DOMPurify |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تضمين تعابير JavaScript الديناميكية في النصوص والسمات بالأقواس المعقوفة، والتفريق بين التعابير والجمل التحكمية، وتنسيق القيم بدوال Intl النقية، وآلية الحماية التلقائية ضد XSS مع ضوابط تأمين الروابط وحقن HTML. الخطوة التالية: انتقل الآن إلى الدرس رقم 9 «تنسيق المكونات في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 JSX Expression التعبير البرمجي في JSX
- أي مقطع كود يوضع داخل الأقواس المعقوفة { } ويُنتج قيمة محددة كالنص أو الرقم أو عنصر الواجهة.
- للمراجعة
- 02 Control-Flow Statement الجملة التحكمية
- أوامر توجيه التنفيذ مثل if وfor وswitch التي لا تُنتج قيمة مباشرة ولا تُقبل داخل الأقواس المعقوفة.
- للمراجعة
- 03 Automatic XSS Escaping الترميز التلقائي ضد XSS
- تحويل React التلقائي للنصوص المضمنة داخل المعقوفات إلى عقد نصية تمنع تنفيذ أي وسوم خبيثة محقونة.
- للمراجعة
- 04 Protocol Allowlist القائمة البيضاء للبروتوكولات
- التحقق البرمجي من أن الرابط الخارجي يبدأ ببروتوكول آمن مثل https: قبل وضعه في سمة href.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 XSS XSS
- Cross-Site Scripting
- ثغرة أمنية خطيرة تسمح بتنفيذ شيفرات خبيثة في متصفح المستخدم عند عرض مدخلات غير معقمة.
- للمراجعة
- 02 URL URL
- Uniform Resource Locator
- عنوان المورد على الويب الذي يجب فحص بروتوكوله عند قراءته من مدخلات المستخدمين.
- للمراجعة
- 03 JSX JSX
- JavaScript XML
- صياغة بناء واجهات React التي تربط الوسوم بتعابير اللغة الديناميكية عبر الأقواس المعقوفة.
- للمراجعة
- 04 API API
- Application Programming Interface
- واجهات برمجية قياسية مثل Intl.NumberFormat لتنسيق الأرقام والعملات والتواريخ بنقاء.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال الفاتورة في محرر التجريب وغيّر عدد المقاعد إلى 5 وأضف فقرة تحسب السعر بعد خصم عشرة بالمئة داخل الأقواس المعقوفة.
-
افتح مثال معاينة التعليق ومرر نصاً يحتوي على <h1>Test</h1> داخل المتغير ولاحظ كيف تعرضه React كنص عادي آمن دون تحويله لعنوان فعلي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما الرموز المستخدمة لتضمين تعبير JavaScript ديناميكي داخل بنية JSX؟
تُستخدم الأقواس المعقوفة المفردة {expression} لتقييم تعابير JavaScript وعرض نتائجها.
ماذا يحدث عند كتابة <img src="{avatarUrl}" /> بوضع علامتي تنصيص حول الأقواس المعقوفة؟
تحوّل علامات التنصيص القيمة إلى نص حرفي ثابت بدلاً من قراءة المتغير البرمجي.
لماذا يفشل تجميع الكود عند كتابة جملة {if (isReady) ...} مباشرة داخل الأقواس المعقوفة في JSX؟
لأن if جملة تحكمية لا تُنتج قيمة، بينما لا تقبل الأقواس المعقوفة سوى التعابير مثل المعامل الثلاثي.
افتراضياً تقوم React بترميز النصوص المعروضة داخل { } تلقائياً قبل إدراجها في المتصفح للحماية من حقن وسوم XSS.
صواب؛ إذ تتحول النصوص داخل المعقوفات إلى محتوى نصي آمن لا يُفسَّر كوسوم تنفيذية.
أي حالة روابط التالية قد تسبب ثغرة XSS في React إذا لم يتحقق المبرمج من الرابط الذي أدخله المستخدم؟
تمرير رابط يبدأ ببروتوكول javascript: غير مفحوص إلى سمة href ينفذ شيفرة عند النقر عليه.
تمرير نصوص HTML غير موثوقة مباشرة إلى dangerouslySetInnerHTML دون تطهيرها بمكتبة مثل DOMPurify يعرّض التطبيق لثغرات XSS.
صواب؛ لأن هذه الخاصية تتجاوز درع الترميز النصي التلقائي في React بالكامل.
ماذا يحدث عند محاولة عرض كائن JavaScript كامل مباشرة كطفل نصي مثل <p>{userProfile}</p>؟
تُطلق React خطأً وقت التشغيل لأن الكائنات الكاملة لا تُعرض مباشرة كنص، ويجب قراءة خاصية محددة مثل {userProfile.name}.
ما الواجهة القياسية المدمجة في المتصفح لتنسيق العملات والأسعار بنظافة قبل عرضها في JSX؟
توفر واجهة Intl.NumberFormat تنسيقاً معيارياً دقيقاً للعملات والأرقام دون الحاجة لمكتبات خارجية.
يُعد استدعاء دالة مساعدة نقية مثل {formatPrice(total)} تعبيراً برمجياً صحيحاً ومسموحاً داخل معقوفات JSX.
صواب؛ فاستدعاء الدالة يُقيَّم إلى القيمة التي تعيدها، لذا فهو تعبير قياسي سليم.
ما البروتوكولات الآمنة التي يُسمح بها في القائمة البيضاء لروابط المواقع والتواصل التي يدخلها المستخدم؟
قصر السماح على https: وhttp: وmailto: يحجب تماماً مخاطر تنفيذ روابط javascript: الخبيثة.