التعامل مع خصائص التنسيق CSS: السمة className بدلاً من class
| وجه الاختلاف | في لغة HTML التقليدية | في صياغة JSX الخاصة بريأكت |
|---|---|---|
| سمة التنسيق الطبقي | تُكتب باستخدام الكلمة class بشكل مباشر وصريح | تُكتب حتماً باستخدام السمة className لتجنب تداخل الأكواد |
| طبيعة التعامل مع المترجم | يقرأها المتصفح كخاصية نصية قياسية لبناء شجرة التنسيقات | تتحول إلى خاصية داخل كائن جافا سكريبت وتدعم الربط الديناميكي |
| ربط ملف CSS الخارجي | يتم عبر وسم link في رأس الصفحة وربط مسار الملف المباشر | يتم عبر أمر import البرمجي في أعلى ملف المكون مباشرة |
عندما تبدأ في تحويل قوالب التصميم إلى أكواد فعلية داخل React، ستحتاج حتماً إلى إضافة أصناف التنسيق (CSS Classes) التي قمت بكتابتها لكي يظهر الموقع بشكل أنيق ومنظم.
هنا ستواجه القاعدة الأكثر شهرة وتكراراً في عالم ريأكت، وهي منع استخدام كلمة class واستبدالها برمجياً بـ className. دعنا نفهم السبب الهندسي وراء هذا التغيير وكيفية تطبيق التنسيق بطريقة احترافية.
كما ناقشنا باختصار في درس القواعد الصارمة، فإن كود JSX ليس HTML حقيقياً، بل هو واجهة برمجية تتحول خلف الكواليس إلى لغة جافا سكريبت صافية. في لغة JavaScript، تعتبر كلمة class كلمة محجوزة بالنظام (Reserved Keyword)، حيث تُستخدم لبناء الكلاسات البرمجية والكائنات (Object-Oriented Programming). لذلك، لمنع حدوث تداخل أو ارتباك للمترجم البرمجي (Babel) أثناء تحويل الأكواد، قام مهندسو ريأكت بتغيير اسم السمة الخاصة بالتنسيق إلى className، وتُكتب دائماً بأسلوب السنام (CamelCase).
في المواقع التقليدية، كنت تذهب لملف index.html وتكتب وسم <link> لربط التنسيقات. في ريأكت، فلسفة المكونات تعني أن كل مكون يجب أن يكون مستقلاً بذاته. لذلك، نقوم بإنشاء ملف CSS عادي بجوار ملف المكون، ثم نستدعيه مباشرة في أعلى ملف الـ JSX باستخدام أمر الاستيراد import. بمجرد عمل هذا الاستيراد، ستتعرف ريأكت على الملف وتدمج تنسيقاته تلقائياً في المشروع.
دعنا نرى كيف ننشئ ملف تنسيق مستقل وكيف نقوم باستيراده وتطبيقه داخل المكون بشكل صحيح:
Button.css
| 1 | /* ملف CSS قياسي وطبيعي جداً */ |
| 2 | .main-btn { |
| 3 | background-color: #673ab7; /* اللون البنفسجي المعتمد لنوفيل */ |
| 4 | color: #ffffff; |
| 5 | padding: 10px 20px; |
| 6 | border: none; |
| 7 | border-radius: 5px; |
| 8 | cursor: pointer; |
| 9 | font-size: 16px; |
| 10 | } |
| 11 | |
| 12 | .main-btn:hover { |
| 13 | background-color: #512da8; |
| 14 | } |
Button.jsx
| 1 | // 1. استيراد ملف التنسيق الخارجي مباشرة في أعلى الملف |
| 2 | import './Button.css'; |
| 3 | |
| 4 | function CustomButton() { |
| 5 | return ( |
| 6 | // 2. تطبيق الصنف باستخدام className بدلاً من class |
| 7 | <button className="main-btn"> |
| 8 | اضغط للتسجيل في الكورس |
| 9 | </button> |
| 10 | ); |
| 11 | } |
💡 نصيحة
بما أن className هي سمة جافا سكريبت في أصلها، فهذا يعني أنه يمكنك دمجها مع الأقواس المجعدة { } لتبديل وتغيير أصناف التنسيق (Classes) ديناميكياً بناءً على حالة التطبيق!
💡 نصيحة
على سبيل المثال، إذا كان لديك زر تريد تغيير لونه إلى الأحمر فقط إذا انتهت الصلاحية، يمكنك استخدام المعامل الثلاثي الذكي داخل الـ className هكذا:
| 1 | <button className={`main-btn ${isExpired ? 'danger-bg' : 'success-bg'}`}> |