كيفية إضافة التعليقات (Comments) داخل كود JSX
| مكان كتابة التعليق البرمجي | صياغة كود التعليق المعتمدة | التأثير على محرك المتصفح |
|---|---|---|
| خارج كتلة وسم الـ JSX وعقد العرض | استخدام الشرطتين المائلتين المزدوجتين // أو علامات التعليق النجمية | يُعامل ككود جافا سكريبت قياسي ويختفي تماماً قبل مرحلة الترجمة |
| في قلب عناصر وسم الـ JSX وداخل الأبناء | وضع علامات النجمة المائلة داخل الأقواس المجعدة {/* */} | يُعلم المترجم بتخطي هذه الأسطر برمجياً ويمنع ظهورها كرموز في صفحة المستخدم |
ستحتاج دائماً إلى كتابة ملاحظات وتعليقات (Comments) داخل كودك؛ لشرح فكرة برمجية معينة، أو لتنبيه زملائك في الفريق، أو حتى لتذكير نفسك بكيفية عمل هذا الجزء عندما تعود إليه بعد شهور.
في جافا سكريبت العادية، كنت تستخدم // للتعليقات أحادية السطر. وفي HTML، كنت تستخدم <!-- -->. لكن في React وJSX، هناك قاعدة هندسية فريدة يجب أن تتبعها بدقة لكي لا تظهر تعليقاتك كنصوص مشوهة على شاشة الموقع!
إذا كنت تكتب تعليقاً في أعلى الملف، أو داخل الدالة ولكن قبل سطر الـ return، فأنت ما زلت في منطقة جافا سكريبت القياسية. هنا يمكنك استخدام أسلوب التعليق التقليدي بكل حرية:
تعليق سطر واحد
| 1 | // تعليق سطر واحد |
| 2 |
تعليق متعدد الأسطر
| 1 | /* تعليق متعدد الأسطر */ |
| 2 |
بمجرد دخولك داخل قوس الـ return وبدء كتابة وسوم الـ JSX، يتغير الوضع تماماً. إذا حاولت كتابة // أو <!-- --> هنا، ستظن ريأكت أنك تريد طباعة هذه الرموز كنصوص حقيقية للمستخدم على الشاشة. لكتابة تعليق مخفي وصحيح داخل الـ JSX، يجب أن تدمج فكرتين تعلمتهما سابقاً:
بالتالي، تصبح الصياغة الرسمية للتعليق داخل الواجهة هي:
التعليق في وسم JSX
| 1 | {/* اكتب تعليقك هنا */} |
| 2 |
دعنا نرى التطبيق الفعلي والمقارنة البرمجية بين الأماكن المختلفة لكتابة التعليقات داخل المكون:
| 1 | function ProductCard() { |
| 2 | // 1. تعليق عادي (خارج JSX وقبل الـ return) |
| 3 | // هذا المتغير يمثل سعر المنتج بالدولار |
| 4 | const price = 99; |
| 5 | |
| 6 | return ( |
| 7 | <div className="card"> |
| 8 | {/* 2. تعليق صحيح داخل الـ JSX (مخفي تماماً ولن يراه المستخدم) */} |
| 9 | {/* عنوان المنتج الرئيسي */} |
| 10 | <h2>ساعة ذكية مقاومة للماء</h2> |
| 11 | |
| 12 | <p>السعر الفعلي: {price}$</p> |
| 13 | |
| 14 | {/* |
| 15 | يمكنك أيضاً كتابة تعليق ممتد |
| 16 | على عدة أسطر بهذه الطريقة |
| 17 | دون أي مشاكل برمجية |
| 18 | */} |
| 19 | <button className="buy-btn">شراء الآن</button> |
| 20 | |
| 21 | {/* خطأ شائع ❌: لا تكتب التعليق هكذا // سيظهر النص للمستخدم في الموقع */} |
| 22 | {/* خطأ شائع ❌: لا تكتب التعليق هكذا <!-- سيسبب انهيار المترجم فوراً --> */} |
| 23 | </div> |
| 24 | ); |
| 25 | } |