التنسيق الأساسي: كيف تربط ملفات CSS بمكونات React الخاصة بك؟

ماذا سنتعلم اليوم؟ سنتعلم كيف نربط ملفات CSS بشكل فعال بمكونات React الخاصة بنا، مما يضمن تنسيقًا منظمًا وقابلًا للصيانة لتطبيقاتنا.

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

الخطوة 1: إعداد مشروع React ومكون بسيط

لنبدأ بإنشاء مكون React أساسي سنقوم بتنسيقه. إذا كان لديك مشروع React بالفعل، يمكنك تخطي جزء الإنشاء.

ملاحظة تقنية: نستخدم create-react-app لإنشاء مشروعنا بسرعة، لكن المبادئ تنطبق على أي إعداد React.

أولاً، قم بإنشاء مشروع React جديد (إذا لم يكن لديك):

npx create-react-app react-css-demo
cd react-css-demo

الآن، لنقم بإنشاء مكون بسيط. في مجلد src، أنشئ ملفًا جديدًا باسم MyComponent.js:

// src/MyComponent.js
import React from 'react'; // استيراد مكتبة React

function MyComponent() { // تعريف مكون وظيفي باسم MyComponent
  return ( // إرجاع JSX الذي يمثل واجهة المستخدم للمكون
    <div>
      <h1>مرحبًا من مكوني!</h1> {/* عنوان رئيسي */}
      <p>هذا نص تجريبي لتوضيح التنسيق.</p> {/* فقرة نصية */}
    </div>
  );
}

export default MyComponent; // تصدير المكون ليتم استخدامه في ملفات أخرى

بعد ذلك، قم بتعديل src/App.js لاستيراد وعرض MyComponent:

// src/App.js
import React from 'react';
import MyComponent from './MyComponent'; // استيراد MyComponent الذي أنشأناه
import './App.css'; // استيراد ملف CSS الافتراضي لتطبيق App (سنستخدمه لاحقًا)

function App() {
  return (
    <div className="App"> {/* حاوية رئيسية للتطبيق */}
      <MyComponent /> {/* عرض مكون MyComponent الخاص بنا */}
    </div>
  );
}

export default App;

الخطوة 2: ربط ملف CSS عادي

هذه هي الطريقة الأكثر شيوعًا وبساطة لربط ملف CSS. سنقوم بإنشاء ملف CSS منفصل وتضمينه مباشرة في مكوننا.

في مجلد src، أنشئ ملفًا جديدًا باسم MyComponent.css:

/* src/MyComponent.css */
.my-component-container { /* تعريف فئة CSS للحاوية الرئيسية للمكون */
  border: 2px solid #007bff; /* حدود زرقاء */
  padding: 20px; /* مسافة داخلية */
  margin: 20px; /* مسافة خارجية */
  border-radius: 8px; /* حواف دائرية */
  background-color: #f0f8ff; /* خلفية فاتحة */
}

.my-component-container h1 { /* تنسيق العنوان داخل الحاوية */
  color: #333; /* لون نص داكن */
  font-size: 2.5em; /* حجم خط كبير */
  text-align: center; /* محاذاة النص في المنتصف */
}

.my-component-container p { /* تنسيق الفقرة داخل الحاوية */
  color: #555; /* لون نص رمادي */
  font-size: 1.2em; /* حجم خط متوسط */
  line-height: 1.6; /* ارتفاع سطر مريح للقراءة */
}

الآن، قم بتعديل src/MyComponent.js لاستيراد هذا الملف وتطبيق الفئة:

// src/MyComponent.js
import React from 'react';
import './MyComponent.css'; // استيراد ملف CSS الخاص بالمكون

function MyComponent() {
  return (
    <div className="my-component-container"> {/* تطبيق الفئة CSS على العنصر الجذر للمكون */}
      <h1>مرحبًا من مكوني!</h1>
      <p>هذا نص تجريبي لتوضيح التنسيق.</p>
    </div>
  );
}

export default MyComponent;

ملاحظة تقنية: عند استيراد ملف CSS بهذه الطريقة، يتم تطبيق الأنماط عالميًا. هذا يعني أن الفئات المحددة في MyComponent.css يمكن أن تؤثر على مكونات أخرى إذا كانت تستخدم نفس أسماء الفئات. لحل هذه المشكلة، يمكننا استخدام وحدات CSS.

الخطوة 3: استخدام وحدات CSS (CSS Modules) لتجنب تعارض الأنماط

تسمح لنا وحدات CSS (CSS Modules) بإنشاء أسماء فئات فريدة محليًا، مما يحل مشكلة تعارض الأنماط العالمية. هذا مفيد جدًا في المشاريع الكبيرة.

قم بإنشاء ملف جديد باسم MyComponent.module.css في مجلد src (لاحظ التسمية .module.css):

/* src/MyComponent.module.css */
.container { /* تعريف فئة CSS للحاوية الرئيسية للمكون */
  border: 2px solid #28a745; /* حدود خضراء */
  padding: 25px; /* مسافة داخلية أكبر */
  margin: 20px; /* مسافة خارجية */
  border-radius: 10px; /* حواف دائرية أكثر */
  background-color: #e6ffe6; /* خلفية خضراء فاتحة */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ظل خفيف */
}

.title { /* تعريف فئة CSS للعنوان */
  color: #218838; /* لون نص أخضر داكن */
  font-size: 3em; /* حجم خط أكبر */
  text-align: center; /* محاذاة النص في المنتصف */
  margin-bottom: 15px; /* مسافة سفلية */
}

.paragraph { /* تعريف فئة CSS للفقرة */
  color: #444; /* لون نص رمادي أغمق */
  font-size: 1.3em; /* حجم خط أكبر قليلاً */
  line-height: 1.8; /* ارتفاع سطر أكبر */
}

الآن، قم بتعديل src/MyComponent.js لاستيراد وحدة CSS واستخدام الأنماط المحلية:

// src/MyComponent.js
import React from 'react';
// import './MyComponent.css'; // لم نعد بحاجة إلى استيراد ملف CSS العادي
import styles from './MyComponent.module.css'; // استيراد وحدة CSS، تسمية الكائن بـ 'styles' هو convention شائع

function MyComponent() {
  return (
    // استخدام الأنماط من كائن 'styles'
    <div className={styles.container}> {/* تطبيق الفئة 'container' من وحدة CSS */}
      <h1 className={styles.title}>مرحبًا من مكوني!</h1> {/* تطبيق الفئة 'title' */}
      <p className={styles.paragraph}>هذا نص تجريبي لتوضيح التنسيق باستخدام وحدات CSS.</p> {/* تطبيق الفئة 'paragraph' */}
    </div>
  );
}

export default MyComponent;

ملاحظة تقنية: عندما تستورد MyComponent.module.css كـ styles، فإن styles يصبح كائنًا يحتوي على أسماء الفئات المحددة في ملف CSS كوحدات. على سبيل المثال، styles.container سيتحول إلى اسم فئة فريد مثل MyComponent_container__abc12 عند البناء.

الكود النهائي الكامل

هنا الكود الكامل للملفات التي قمنا بتعديلها في هذا الدرس، مع التركيز على استخدام وحدات CSS.

src/MyComponent.js:

// src/MyComponent.js
import React from 'react'; // استيراد مكتبة React
import styles from './MyComponent.module.css'; // استيراد وحدة CSS الخاصة بالمكون

function MyComponent() { // تعريف مكون وظيفي
  return (
    <div className={styles.container}> {/* تطبيق الفئة 'container' من وحدة CSS */}
      <h1 className={styles.title}>مرحبًا من مكوني!</h1> {/* تطبيق الفئة 'title' */}
      <p className={styles.paragraph}>هذا نص تجريبي لتوضيح التنسيق باستخدام وحدات CSS.</p> {/* تطبيق الفئة 'paragraph' */}
    </div>
  );
}

export default MyComponent; // تصدير المكون

src/MyComponent.module.css:

/* src/MyComponent.module.css */
.container { /* فئة للحاوية الرئيسية */
  border: 2px solid #28a745;
  padding: 25px;
  margin: 20px;
  border-radius: 10px;
  background-color: #e6ffe6;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.title { /* فئة للعنوان */
  color: #218838;
  font-size: 3em;
  text-align: center;
  margin-bottom: 15px;
}

.paragraph { /* فئة للفقرة */
  color: #444;
  font-size: 1.3em;
  line-height: 1.8;
}

src/App.js:

// src/App.js
import React from 'react'; // استيراد React
import MyComponent from './MyComponent'; // استيراد المكون الذي أنشأناه
import './App.css'; // استيراد ملف CSS الافتراضي (يمكن حذفه إذا لم يكن هناك تنسيقات عامة)

function App() { // مكون التطبيق الرئيسي
  return (
    <div className="App"> {/* حاوية التطبيق */}
      <MyComponent /> {/* عرض MyComponent */}
    </div>
  );
}

export default App; // تصدير مكون App

النتيجة المتوقعة

عند تشغيل التطبيق (npm start)، ستشاهد في المتصفح مكونًا بعنوان "مرحبًا من مكوني!" وفقرة "هذا نص تجريبي لتوضيح التنسيق باستخدام وحدات CSS.".

سيظهر المكون داخل صندوق ذي حدود خضراء وحواف دائرية، وخلفية خضراء فاتحة، مع ظل خفيف. سيكون العنوان والنص منسقين بالألوان والأحجام المحددة في MyComponent.module.css، مما يوضح أن الأنماط قد تم تطبيقها بنجاح وبشكل محلي.

← السابقالفهرسالتالي →