انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 09
دورة ReactJS

تنسيق المكونات في ReactStyling React Components

نسّق مكونات React باحترافية عبر ملفات CSS وخاصية className، وكائنات style المضمنة، وتبديل الكلاسات الشرطية، وعزل الأسماء بـ CSS Modules، ودعم العربية بالخصائص المنطقية.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

External CSS with className ملفات التنسيق وخاصية className

لا تفرض React لغة تنسيق مغلقة خاصة بها، بل تستثمر خبرتك الأصيلة في CSS بالكامل! الأسلوب الأساسي الأوسع انتشاراً هو كتابة ملف تنسيق خارجي يُستورد في مشاريع Vite عبر import './TrackCard.css' وربطه بالعناصر باستخدام خاصية className.

تمنحك ملفات التنسيق الخارجية كافة قدرات CSS الأصيلة: التخزين المؤقت في المتصفح، وحالات التفاعل مثل :hover و:focus-visible، واستعلامات الشاشات المتجاوبة @media، ومتغيرات الألوان للوضعين الفاتح والداكن.

HTML 
// TrackCard.jsx (uses classes from TrackCard.css)
function TrackCard() {
  return (
    <article className="studio-feature-card">
      <span className="rx-badge">Stylesheet CSS</span>
      <h3 className="feature-title">Responsive UI</h3>
      <p>Supports :hover, :focus, and @media.</p>
    </article>
  );
}
جرّب بنفسك

Inline Style Objects Syntax كائنات التنسيق المضمن style

عندما تعتمد قيمة بصرية على حساب رقمي متغير وقت التشغيل—مثل عرض شريط تقدم بالنسبة المئوية أو ارتفاع عمود بياني—نمرر كائن JavaScript إلى خاصية style بالصيغة style={{ width: '75%', backgroundColor: '#7750b2' }}.

لاحظ أنه لا يوجد سر خاص في القوسين المزدوجين {{ }}؛ فالقوس الخارجي يفتح تعبير JSX المعتاد، والقوس الداخلي يمثل كائناً برمجياً تُكتب مفاتيحه بصيغة camelCase بدلاً من الشرطة الوسطية.

HTML 
function MasteryMeter() {
  const pct = 82;
  const fill = {
    width: `${pct}%`,
    height: 12,
    backgroundColor: '#7750b2',
  };
  return (
    <div className="rx-card"><div style={fill} /></div>
  );
}
جرّب بنفسك

Dynamic Conditional Class Names تبديل الكلاسات ديناميكياً بالشرط

لتبديل المظهر البصري تبعاً لحالة المكون—كتمييز التبويب النشط أو البطاقة المميزة أو تنبيه التحذير—تجنب تكرار كائنات التنسيق الطويلة، وركّب سلسلة كلاسات شرطية بنظافة عبر القوالب النصية `card ${isFeatured ? 'is-featured' : ''}` أو بتصفية مصفوفة الكلاسات عبر filter(Boolean).join(' ').

مخطط أساليب تنسيق مكونات React الأربعة: ملفات CSS وCSS Modules وكائنات style والخصائص المنطقية للعربية
HTML 
function BuildStatusBanner() {
  const passed = true;
  const cls = [
    'status-banner',
    passed && 'is-online',
  ].filter(Boolean).join(' ');
  return (
    <div className={cls}>All 10 Gates Passed</div>
  );
}
جرّب بنفسك

Scoped Styling with CSS Modules عزل التنسيقات عبر CSS Modules

في المشاريع الكبيرة متعددة المطورين، قد يعرّف اثنان في ملفين منفصلين كلاساً باسم .card فيطغى أحدهما على الآخر في النطاق العام للمتصفح! تحل وحدات التنسيق المعزولة (CSS Modules) هذه المعضلة تلقائياً في Vite دون تثبيت أي حزمة إضافية؛ يكفي تسمية الملف بامتداد CourseCard.module.css واستيراده ككائن import styles from './CourseCard.module.css'.

وعند كتابة className={styles.card}، يولّد المجمع اسماً فريداً مشفراً مثل _card_7x92b_1 يمنع تصادم الأسماء نهائياً!

RTL and Logical CSS Properties دعم العربية والخصائص المنطقية

لبناء مكونات احترافية تخدم الواجهات العربية (RTL) والإنجليزية (LTR) بنفس الكفاءة، تجنب الخصائص الفيزيائية الجامدة مثل margin-left وborder-left التي تنكسر عند عكس اتجاه الصفحة! اعتمد دائماً الخصائص المنطقية (CSS Logical Properties) مثل padding-inline وmargin-inline-start وborder-inline-start (أو صيغتها المضمنة borderInlineStart) لينعكس تصميم المكون تلقائياً بانسجام تام في كلتا اللغتين.

HTML 
function BilingualCallout() {
  return (
    <div className="rx-stack">
      <div dir="ltr" className="logical-note">
        LTR Start Edge
      </div>
      <div dir="rtl" className="logical-note">
        RTL Start Edge
      </div>
    </div>
  );
}
جرّب بنفسك

React Styling Methods Matrix مقارنة أساليب تنسيق المكونات

في هندسة واجهات الإنتاج الاحترافية، نادراً ما تعتمد على أداة واحدة بمعزل عن غيرها؛ فالنهج الأمثل يجمع متغيرات التصميم العامة للألوان والسمات، مع CSS Modules أو ملفات الكلاسات لتنسيق البنية وحالات التفاعل والتجاوب، مع حصر كائن style المضمن في الأبعاد والنسب المحسوبة لحظياً فقط. قارن بين الأساليب في المصفوفة التالية:

أسلوب التنسيقنقطة القوة الأساسيةالقيد الهندسي أو ضابط الاستخدام
ملفات CSS عبر classNameدعم كامل لـ :hover و@media والتخزين المؤقتنطاق الأسماء عام وقد يتصادم في المشاريع الضخمة
وحدات *.module.cssعزل تلقائي للأسماء بتوليد لاحقة فريدة في Viteتُستورد ككائن styles مخصص لكل مكون
كائن style={{}} المضمنمثالي للنسب المئوية والإحداثيات المحسوبة لحظياًلا يدعم :hover ولا استعلامات الشاشات @media
الخصائص المنطقية Logical CSSانعكاس تلقائي متقن بين الإنجليزية والعربية RTLاستبدال الاتجاهات الفيزيائية بـ inline-start
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

نسّقت في هذا الدرس مكونات React عبر ملفات CSS وخاصية className، وكتبت كائنات style المضمنة بصيغة camelCase، وركّبت الكلاسات الشرطية بأمان، وعزلت الأسماء بوحدات CSS Modules، ودعمت الواجهات العربية والإنجليزية بالخصائص المنطقية. الخطوة التالية: انتقل الآن إلى الدرس رقم 10 «تمرير البيانات إلى المكونات عبر Props» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CSS Modules وحدات CSS المعزولة
ملفات تنسيق بامتداد *.module.css يحوّل المجمع أسماء كلاساتها إلى معرّفات فريدة لمنع تصادم التنسيقات بين المكونات.
للمراجعة
02 Inline Style Object كائن التنسيق المضمن
كائن JavaScript بمفاتيح camelCase يُمرر لخاصية style لضبط القيم المحسوبة ديناميكياً وقت التشغيل.
للمراجعة
03 CSS Logical Properties الخصائص المنطقية في CSS
خصائص تنسيق تعتمد بداية ونهاية اتجاه القراءة بدلاً من اليمين واليسار الثابتين فتدعم العربية والإنجليزية تلقائياً.
للمراجعة
04 Conditional Class String سلسلة الكلاسات الشرطية
تشكيل قيمة className ديناميكياً بحسب حالة المكون عبر القوالب النصية أو مصفوفة مفلترة بالقيم الصحيحة.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
لغة التنسيق القياسية المعتمدة مع خاصية className ووحدات CSS Modules ومتغيرات السمات.
للمراجعة
02 RTL RTL
Right-to-Left
اتجاه تخطيط الواجهات من اليمين إلى اليسار للغة العربية، المدعوم بسلاسة عبر الخصائص المنطقية.
للمراجعة
03 LTR LTR
Left-to-Right
اتجاه تخطيط الواجهات من اليسار إلى اليمين في اللغات اللاتينية كالإنجليزية.
للمراجعة
04 BEM BEM
Block Element Modifier
منهجية تسمية كلاسات تقليدية لمنع التضارب تغني عنها غالباً آلية العزل التلقائي في CSS Modules.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. افتح مثال شريط التقدم في محرر التجريب وغيّر قيمة المتغير completionPct من 82 إلى 45 وراقب تحديث النص وعرض الشريط معاً.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. افتح مثال التنبيه ثنائي الاتجاه وتأكد كيف يضع كلاس .logical-note الواحد الشريط الملون في بداية السطر تلقائياً لكل من الإنجليزية والعربية.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

10أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي10 أسئلة تنتظرك
01

كيف تُكتب أسماء خصائص CSS المركبة مثل background-color داخل كائن style المضمن في React؟

بما أن style يستقبل كائن JavaScript، تُكتب الخصائص المركبة بصيغة camelCase مثل backgroundColor.

02

ماذا يمثل القوسان المعقوفان المزدوجان في التعبير style={{ padding: 16 }} برمجياً؟

القوس الخارجي يفتح تعبير JavaScript في JSX، والداخلي يمثل كائناً برمجياً قياسياً Object Literal.

03

تدعم ملفات CSS الخارجية المربوطة بـ className حالات :hover و:focus-visible واستعلامات @media بينما لا تدعمها كائنات style المضمنة.

صواب؛ فالحالات التفاعلية واستعلامات الشاشات تتطلب محرك محددات CSS ولا تعمل عبر خاصية العنصر المباشرة.

04

ما المشكلة الهندسية التي تحلها ملفات CSS Modules بامتداد *.module.css تلقائياً في مشاريع Vite؟

تولّد أسماء كلاسات فريدة معزولة لكل ملف مكون فتمنع تصادم وتداخل الأسماء في النطاق العام.

05

لماذا يُعد استخدام filter(Boolean).join(" ") أكثر أماناً من وضع && مباشرة داخل قالب نصي لخاصية className؟

لأن عدم تحقق الشرط داخل القالب النصي يطبع كلمة "false" حرفياً كاسم كلاس غير مرغوب في المتصفح.

06

أي خاصية CSS منطقية تضع الحد الجانبي تلقائياً على اليسار في الإنجليزية وعلى اليمين في العربية؟

تتكيف خاصية border-inline-start آلياً مع اتجاه بداية السطر في كلتا اللغتين.

07

عند تمرير رقم لخاصية أبعاد مثل height: 14 في كائن style تضيف React وحدة px تلقائياً مع إبقاء خصائص مثل opacity وzIndex بدون وحدة.

صواب؛ تميز React بين خصائص الأطوال البعدية وبين الخصائص الرقمية اللابعدية تلقائياً.

08

تتطلب أداة Vite تثبيت خمس إضافات خارجية يدوياً قبل أن تعمل ملفات *.module.css في مشروع React.

خطأ؛ تدعم أداة Vite ملفات *.module.css مدمجاً منذ اللحظة الأولى دون أي إعدادات إضافية.

09

متى يكون استخدام كائن style={{ ... }} المضمن الاختيار الهندسي الصحيح داخل مكون React؟

يُخصَّص كائن style المضمن للقيم الرقمية المحسوبة ديناميكياً وقت التشغيل كالنسب المئوية والإحداثيات الحية.

10

كيف تطبق الكلاس .cardBox المستورد عبر import styles from "./Panel.module.css" على عنصر في JSX؟

تُمرر الخاصية المقابلة من الكائن المستورد داخل المعقوفات عبر className={styles.cardBox}.