أول ما ستلاحظه في React هو أنك تكتب كودًا يشبه HTML داخل JavaScript. هذا ليس HTML فعليًا، بل صياغة اسمها JSX. هدف JSX هو جعل كتابة واجهات React أسرع وأسهل قراءة.

في هذا الدرس سنفهم JSX ببساطة: لماذا نستخدمه، وما الفرق بينه وبين HTML، وما أهم القواعد التي تمنع الأخطاء الشائعة عند كتابة الواجهة.

ما هو JSX؟

JSX هي صياغة خاصة تسمح لك بكتابة واجهة المستخدم داخل JavaScript. بدلاً من بناء العناصر يدويًا، تكتبها بشكل شبيه بـ HTML، ثم يقوم React بتحويلها إلى كود JavaScript حقيقي.

التعريف البسيط: JSX هو طريقة مختصرة وأنيقة لكتابة واجهات React داخل JavaScript.

لماذا نستخدم JSX؟

• الكود يصبح أسهل في القراءة والفهم.
• تجمع منطق الواجهة ومظهرها في مكان واحد.
• تقلل الأخطاء مقارنة ببناء العناصر يدويًا.

كيف تُحوَّل JSX إلى JavaScript؟

المتصفح لا يفهم JSX مباشرة. أثناء البناء يقوم React (مع أدوات مثل Babel أو Vite) بتحويل JSX إلى دوال JavaScript مثل React.createElement. هذا يعني أن JSX مجرد اختصار مريح وليس لغة جديدة.

مثال JSX بسيط

function Welcome() {
  return (
    

      
أهلاً بك في React
      
هذه أول واجهة مكتوبة بـ JSX.
    
  );
}

الفرق بين JSX و HTML

HTML	JSX
class	className
for	htmlFor
onclick	onClick

قواعد أساسية في JSX

1. يجب أن تُعيد عنصرًا واحدًا في الأعلى (أو استخدم Fragment).
2. أي كود JavaScript داخل JSX يُكتب بين { }.
3. استخدم className بدل class.

أخطاء شائعة في JSX

• نسيان عنصر الجذر: يجب أن تُعيد عنصرًا واحدًا أو Fragment.
• استخدام class بدل className: ستظهر تحذيرات ولن تُطبق الأنماط.
• كتابة onClick بحروف صغيرة: اكتبها دائمًا camelCase.
• إرجاع قيم غير صالحة: لا يمكن وضع كائن JavaScript مباشرة داخل JSX.

مثال: إدخال JavaScript داخل JSX

function Greeting() {
  const name = "Amina";
  return 
مرحباً {name}
;
}

الأسئلة الشائعة — FAQ

ما هو JSX في React؟

JSX صياغة داخل JavaScript تشبه HTML لتسهيل بناء الواجهة.

ما الفرق بين JSX و HTML؟

JSX له قواعد خاصة مثل className و onClick ويُكتب داخل JavaScript.

هل JSX إلزامي في React؟

ليس إلزاميًا، لكن JSX هو الأسهل والأوضح لكتابة واجهات React مقارنة باستخدام React.createElement.

لماذا يجب استخدام className بدل class؟

لأن class كلمة محجوزة في JavaScript، لذلك يستخدم React className في JSX.

كيف أكتب JavaScript داخل JSX؟

أي تعبير JavaScript داخل JSX يُكتب بين الأقواس المعقوفة { } مثل {name}.

هل يمكن استخدام JSX بدون React؟

نعم، لكنه يحتاج إلى تحويل (Babel) ليعمل في المتصفح، وغالبًا يُستخدم مع React.