ما هو ملف JSX؟

JSX (JavaScript XML) هو امتداد صياغة لجافاسكريبت أنشأته Meta (فيسبوك) لإطار عمل React عام 2013. يُتيح للمطورين كتابة ترميز شبيه بـ HTML مباشرةً داخل شفرة جافاسكريبت، مما يجعل تعريف واجهات المستخدم أكثر وضوحاً وقرباً من الهيكل البصري النهائي.

JSX ليس HTML — المتصفح لا يفهمه مباشرة. يُترجمه Babel أو SWC أو esbuild إلى استدعاءات React.createElement() عادية قبل التشغيل. ملفات .jsx هي نص عادي يمكن قراءتها بأي محرر، لكن أدوات بناء المشاريع تحتاج إعداداً مناسباً لمعالجتها.

كيفية فتح ملفات JSX

• VS Code (ويندوز، ماك، لينكس) — تلوين صياغة JSX وIntelliSense مدمج
• WebStorm (ويندوز، ماك، لينكس) — IDE كامل لـ React وJSX
• Sublime Text مع إضافة Babel — دعم JSX
• Neovim / Vim مع إضافات LSP — بيئة متقدمة
• أي محرر نصوص — ملفات JSX نص عادي قابل للقراءة

المواصفات التقنية

الاستخدامات الشائعة

• مكونات واجهة مستخدم React: الطريقة القياسية لكتابة مكونات React منذ 2013
• React Native للهاتف: تطوير تطبيقات iOS وأندرويد بـ JSX مع React Native
• صفحات Next.js وGatsby: مكونات الصفحات وLayout في مشاريع React المبنية على هذه الأطر
• النماذج الأولية السريعة: CodeSandbox وStackBlitz يدعمان JSX مباشرة للتجربة الفورية
• تعليم تطوير الويب الأمامي: JSX هو الخطوة الأولى التي يتعلمها المبتدئون في React

JSX مقابل TSX

مثال مكوّن JSX

// Card.jsx - مكوّن بطاقة بسيط
function Card({ title, description, imageUrl }) {
  return (
    <div className="card">
      <img src={imageUrl} alt={title} />
      <div className="card-content">
        <h2>{title}</h2>
        <p>{description}</p>
        <button onClick={() => alert(`فتح: ${title}`)}>
          عرض التفاصيل
        </button>
      </div>
    </div>
  );
}

// الاستخدام
function App() {
  return (
    <div>
      <Card
        title="ملف PDF"
        description="صيغة المستندات المحمولة"
        imageUrl="/icons/pdf.svg"
      />
    </div>
  );
}

export default App;