المكوّنات و JSX

ما هو المكوّن (Component)؟

المكوّن دالة JavaScript تُعيد واجهة. اسمه يبدأ دائمًا بحرف كبير:

function Header() {
  return <h1>The Code Fix</h1>;
}

ثم نستخدمه كأنه وسم HTML:

function App() {
  return (
    <div>
      <Header />
      <p>مرحبًا بالعالم</p>
    </div>
  );
}

ما هو JSX؟

JSX صيغة تتيح كتابة ما يشبه HTML داخل JavaScript. قواعد مهمة:

function Card() {
  const title = "بطاقة";
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>المحتوى هنا</p>
    </div>
  );
}

• استخدم className بدل class (لأن class كلمة محجوزة في JS).
• ضع تعبيرات JavaScript بين أقواس معقوفة { }.
• يجب أن يُعيد المكوّن عنصرًا واحدًا يلفّ الباقي (أو <> </>).

عنصر واحد جذري

// ✅ صحيح — كل شيء داخل عنصر واحد
return (
  <>
    <h1>عنوان</h1>
    <p>فقرة</p>
  </>
);

<> </> تُسمّى Fragment وتجمع العناصر بلا إضافة وسم زائد.

🎯 التالي: الخصائص (Props) لتمرير البيانات بين المكوّنات.