JSX: JavaScript کی توسیع اور استعمال کی مثالیں

JSX کیا ہے؟

JSX (JavaScript XML) JavaScript کے لیے نحو کی توسیع ہے، جو پہلی بار 2013 میں React میں متعارف کرائی گئی۔ یہ ڈویلپرز کو اعلانیہ انداز میں صارف کے انٹرفیس کی ساخت بیان کرنے، مارک اپ اور منطق کو ایک فائل میں یکجا کرنے کی اجازت دیتا ہے۔

JSX سے پہلے، ڈویلپرز سٹرنگ ٹیمپلیٹس (Mustache, Handlebars) استعمال کرتے تھے یا document.createElement کے ذریعے دستی طور پر DOM عناصر بناتے تھے۔ دونوں طریقوں کے نقصانات تھے: سٹرنگ ٹیمپلیٹس کی قسم کی جانچ نہیں ہوتی تھی، اور دستی DOM تخلیق بوجھل اور غلطی کا شکار تھی۔

React نے ایک مختلف راستہ چنا — کوڈ میں براہ راست مارک اپ شامل کرنا۔ اس فیصلے نے کمیونٹی میں بحث چھیڑ دی، لیکن وقت کے ساتھ یہ معیار بن گیا۔ آج JSX نہ صرف React میں استعمال ہوتا ہے بلکہ SolidJS, Preact, Qwik اور یہاں تک کہ Vue میں پلگ ان کے ذریعے بھی استعمال ہوتا ہے۔

JSX کی بنیادی نحو

JSX عنصر HTML ٹیگ کی طرح لگتا ہے لیکن براہ راست JavaScript میں شامل ہوتا ہے۔ ہر عنصر تین دلائل کے ساتھ React.createElement کال میں ٹرانسپائل ہوتا ہے: عنصر کی قسم، props آبجیکٹ اور بچے۔ ایک روٹ عنصر لازمی اصول ہے: 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 میں لکھی جاتی ہیں — class کے بجائے className، 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"} ترتیب کے ذریعے اس تبدیلی کی حمایت کرتے ہیں۔

React سے باہر JSX: Solid, Preact, Vue

اگرچہ JSX React سے وابستہ ہے، دوسرے فریم ورک بھی اسے استعمال کرتے ہیں۔ SolidJS ورچوئل DOM کے بغیر حقیقی DOM نوڈس میں تالیف کے ساتھ JSX استعمال کرتا ہے۔ Preact مکمل JSX تعاون کے ساتھ React کا ہلکا متبادل ہے۔ Vue @vue/babel-plugin-jsx کے ذریعے JSX کی حمایت کرتا ہے، اگرچہ اس کا بنیادی ٹیمپلیٹ template ہے۔

ایک اہم فرق اظہار کی معنویات ہے۔ React میں، JSX اظہارات ہر رینڈر پر عملدرآمد ہوتے ہیں۔ SolidJS میں، JSX ایک بار کمپائل ہوتا ہے اور اپ ڈیٹس سگنلز کے ذریعے ٹریک کی جاتی ہیں۔ یہ کارکردگی کو متاثر کرتا ہے: SolidJS کو ورچوئل DOM اور مصالحت کی ضرورت نہیں ہے، جس سے JSX رینڈرنگ تیز تر ہوتی ہے۔

TypeScript میں، JSX زبان کی سطح پر تعاون یافتہ ہے۔ .tsx توسیع والی فائلیں خود بخود JSX نحو کو ہینڈل کرتی ہیں۔ Props ٹائپنگ TypeScript + JSX کے اہم فوائد میں سے ایک ہے: IDE متوقع صفات، کال بیک کی اقسام اور props کی لازمییت تجویز کرتا ہے۔

JSX کے ساتھ بہترین طرز عمل

JSX کوڈ لکھیں جو پڑھنے اور برقرار رکھنے میں آسان ہو۔ پیچیدہ اظہارات کو علیحدہ متغیرات یا فنکشنز میں نکالیں — یہ پڑھنے کی اہلیت کو بہتر بناتا ہے اور مارک اپ سے علیحدہ منطق کی جانچ کی اجازت دیتا ہے۔ غیر ضروری div ریپر کے بجائے ٹکڑے استعمال کریں۔

انڈینٹیشن کا اصول — نیسٹڈ عناصر کے لیے انڈینٹیشن برقرار رکھیں۔ ہر نیسٹنگ سطح ایک انڈینٹیشن سطح ہے۔ بند کرنے والا ٹیگ کھولنے والے ٹیگ کی same سطح پر ہونا چاہیے۔ لمبی صفات کے لیے، لائن بریک استعمال کریں۔

اگر وہ ہر رینڈر پر بنائے جاتے ہیں تو props میں ان لائن تیر والے فنکشن سے بچیں۔ ایسی صورتوں میں، کال بیک کو useCallback میں لپیٹیں یا فنکشن کو جزو سے باہر لے جائیں۔ پیچیدہ اجزاء کو چھوٹے میں تقسیم کریں — ہر جزو کو انٹرفیس کی ایک منطقی اکائی کو سنبھالنا چاہیے۔