JSX: امتداد JavaScript وأمثلة الاستخدام

ما هو JSX؟

JSX (JavaScript XML) هو امتداد بناء جملة لـ JavaScript، تم تقديمه لأول مرة في React في عام 2013. يسمح للمطورين بوصف هيكل واجهة المستخدم بأسلوب تصريحي، من خلال الجمع بين الترميز والمنطق في ملف واحد.

قبل JSX، كان المطورون يستخدمون قوالب السلاسل النصية (Mustache, Handlebars) أو ينشئون عناصر DOM يدويًا عبر document.createElement. كان لكلا النهجين عيوب: قوالب السلاسل النصية لم تكن تتحقق من الأنواع، وإنشاء DOM اليدوي كان مرهقًا وعرضة للأخطاء.

اختار React مسارًا مختلفًا — تضمين الترميز مباشرة في الكود. أثار هذا القرار جدلاً في المجتمع، لكنه أصبح معيارًا بمرور الوقت. اليوم يُستخدم JSX ليس فقط في React، ولكن أيضًا في SolidJS, Preact, Qwik وحتى في Vue عبر الإضافات.

بناء جملة JSX الأساسي

عنصر JSX يبدو كوسم HTML لكنه يُدمج مباشرة في JavaScript. يتم تحويل كل عنصر إلى استدعاء React.createElement بثلاث وسائط: نوع العنصر، كائن الخصائص، والعناصر الفرعية. عنصر جذر واحد هو قاعدة إلزامية: تعبير JSX يجب أن يُرجع عنصرًا أبويًا واحدًا أو جزءًا.

import React from 'react';

// JSX أساسي: عنصر جذر واحد
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

الأجزاء للتجميع

عندما لا تكون هناك حاجة لعقدة DOM إضافية، استخدم React.Fragment أو الصيغة المختصرة <></>. الأجزاء لا تنشئ عنصر DOM حقيقي، بل تقوم فقط بتجميع العقد الفرعية. هذا مفيد بشكل خاص في الجداول والقوائم حيث أن غلافًا إضافيًا سيكسر هيكل HTML.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

التعبيرات والمتغيرات في JSX

أي تعبير JavaScript يُدمج في JSX عبر الأقواس المتعرجة { }. في الداخل، يمكنك استخدام المتغيرات، استدعاءات الدوال، العوامل الثلاثية، وطرق المصفوفات. التصيير الشرطي يتم عبر العامل الثلاثي أو AND المنطقي.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

قيد رئيسي — فقط التعبيرات يمكن استخدامها داخل الأقواس المتعرجة، وليس العبارات. لا يمكنك استخدام if/else, for, switch — فقط العامل الثلاثي، العوامل المنطقية، وطرق المصفوفات. استدعاءات الدوال مسموحة، بما في ذلك الدوال السهمية.

الاختلافات بين JSX و HTML

JSX يشبه HTML بصريًا لكن لديه اختلافات جوهرية. السمات تُكتب بـ camelCase — className بدلاً من class، onClick بدلاً من onclick، tabIndex بدلاً من tabindex. هذا لأن JSX يُحول إلى JavaScript، حيث أن الواصلات في أسماء الخصائص غير مسموحة.

فرق مهم آخر — الوسوم ذاتية الإغلاق. في HTML، بعض الوسوم (br, hr, input) قد تترك بدون إغلاق. في JSX، جميع الوسوم ذاتية الإغلاق يجب أن تحتوي على شرطة إغلاق: <br />, <input />. أسماء سمات SVG تُحول أيضًا إلى camelCase: strokeWidth, fillOpacity.

كيف يتم تحويل JSX إلى JavaScript

المتصفحات لا تفهم JSX مباشرة. قبل التنفيذ، يمر كود JSX عبر محول — Babel أو TypeScript أو esbuild. كل عنصر JSX يتحول إلى استدعاء createElement أو jsx/runtime.

التحويل عبر Babel

// JSX الأصلي
const element = <h1 className="title">Hello</h1>;

// بعد التحويل
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

مع React 17، ظهر تحويل JSX جديد لا يتطلب استيراد React. الاستيراد التلقائي لـ jsx-runtime يسمح بكتابة المكونات بدون import React from ‘react’. Babel و TypeScript يدعمان هذا التحويل عبر إعداد {"runtime": "automatic"}.

JSX خارج React: Solid, Preact, Vue

على الرغم من أن JSX يرتبط بـ React، إلا أن أطرًا أخرى تستخدمه أيضًا. SolidJS يستخدم JSX مع التحويل إلى عقد DOM حقيقية، بدون Virtual DOM. Preact هو بديل خفيف لـ React مع دعم كامل لـ JSX. Vue يدعم JSX عبر @vue/babel-plugin-jsx، على الرغم من أن قالبته الرئيسية هي template.

الفرق الرئيسي هو دلالات التعبيرات. في React، يتم تنفيذ تعبيرات JSX في كل تصيير. في SolidJS، يتم تجميع JSX مرة واحدة ويتم تتبع التحديثات عبر الإشارات. هذا يؤثر على الأداء: SolidJS لا يتطلب Virtual DOM والمصالحة، مما يجعل تصيير JSX أسرع.

في TypeScript، JSX مدعوم على مستوى اللغة. الملفات ذات الامتداد .tsx تعالج بناء جملة JSX تلقائيًا. كتابة الخصائص هي إحدى المزايا الرئيسية لـ TypeScript + JSX: IDE يقترح السمات المتوقعة، أنواع الاستدعاءات، وإلزامية الخصائص.

أفضل الممارسات مع JSX

اكتب كود JSX سهل القراءة والصيانة. استخرج التعبيرات المعقدة إلى متغيرات أو دوال منفصلة — هذا يحسن القراءة ويسمح باختبار المنطق بشكل منفصل عن الترميز. استخدم الأجزاء بدلاً من أغلفة div غير الضرورية.

قاعدة المسافة البادئة — حافظ على المسافات البادئة للعناصر المتداخلة. كل مستوى تداخل هو مستوى مسافة بادئة واحد. يجب أن تكون وسم الإغلاق في نفس مستوى وسم الفتح. للسمات الطويلة، استخدم فواصل الأسطر.

تجنب الدوال السهمية المضمنة في الخصائص إذا تم إنشاؤها في كل تصيير. في هذه الحالات، لف الاستدعاء في useCallback أو انقل الدالة خارج المكون. قسم المكونات المعقدة إلى مكونات أصغر — يجب أن يتعامل كل مكون مع وحدة منطقية واحدة من الواجهة.