كتابة السمات بصيغة camelCase | قواعد كتابة JSX وتجميع العناصر عبر Fragment

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تحوّل القاعدة الثالثة سمات العناصر المركبة والمحجوزة إلى صيغة camelCase لأن سمات JSX تتحول برمجياً إلى مفاتيح في كائنات JavaScript وخصائص DOM:

تُكتب className بدلاً من class، وتُكتب htmlFor في وسم التسمية بدلاً من for.
تُكتب السمات المركبة بحروف متصلة مثل tabIndex وreadOnly وmaxLength وstrokeWidth.
استثناء مهم: تحتفظ سمات الوصولية القياسية aria-* والسمات المخصصة data-* بالشرطة الوسطية كما في aria-label.

الصف 2 كود برمجي

HTML

function SearchField() {
  return (
    <div className="rx-card">
      <label htmlFor="courseQuery">Track Name</label>
      <input
        id="courseQuery" readOnly
        defaultValue="React 18"
        aria-describedby="queryHint"
      />
    </div>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

camelCase DOM Attributes Rule كتابة السمات بصيغة camelCase

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (قواعد كتابة JSX وتجميع العناصر عبر Fragment)