قواعد JSX: التعبيرات والسمات وFragments

الهدف: أتقن أساسيات JSX—استخدم { } للتعبيرات، وطبّق سمات camelCase، واجمع العناصر الشقيقة باستخدام Fragments.

تُكتب التعبيرات داخل { }، ويمكن أن تكون متغيرات أو استدعاءات دوال أو عمليات حسابية بسيطة. وتستخدم السمات camelCase مثل className وhtmlFor وonClick.

صَيّر القيم الديناميكية باستخدام { }، واستخدم className/title/onClick كسمات camelCase.

أعِد عدة عناصر شقيقة باستخدام fragment: إما <>...</> أو <React.Fragment>. تتجنب fragments إضافة حاويات div زائدة.

استخدم fragments قصيرة من نوع <> لتجميع العناصر الشقيقة؛ فهي لا تُنشئ عقد DOM إضافية.

نصائح:

• استخدم التعبيرات فقط داخل { }، وليس العبارات.
• استخدم className بدلًا من class.
• فضّل fragments على حاويات div الزائدة غير الضرورية.

مراجعة: ضع القيم الديناميكية داخل { }، واستخدم السمات بصيغة camelCase، واجمع العناصر الشقيقة باستخدام fragments للحفاظ على نظافة الترميز.