JSX: JavaScript kengaytmasi va foydalanish misollari

JSX nima?

JSX (JavaScript XML) — bu JavaScript uchun sintaksis kengaytmasi bo'lib, birinchi marta 2013 yilda React da taqdim etilgan. Bu dasturchilarga foydalanuvchi interfeysining tuzilishini deklarativ uslubda tasvirlash, belgilash va mantiqni bitta faylda birlashtirish imkonini beradi.

JSX paydo bo'lishidan oldin, dasturchilar matn shablonlaridan (Mustache, Handlebars) foydalanganlar yoki DOM elementlarini qo'lda document.createElement orqali yaratganlar. Ikkala yondashuvning ham kamchiliklari bor edi: matn shablonlari turlar bo'yicha tekshirilmagan, qo'lda DOM yaratish esa og'ir va xatolarga moyil edi.

React boshqa yo'lni tanladi — belgilashni to'g'ridan-to'g'ri kodga joylashtirish. Bu qaror jamiyatda bahslarga sabab bo'ldi, ammo vaqt o'tishi bilan standartga aylandi. Bugungi kunda JSX nafaqat React da, balki SolidJS, Preact, Qwik va hatto Vue da plaginlar orqali qo'llaniladi.

JSX ning asosiy sintaksisi

JSX elementi HTML tegiga o'xshaydi, lekin to'g'ridan-to'g'ri JavaScript ga joylashtiriladi. Har bir element uchta argument bilan React.createElement chaqiruviga transpilatsiya qilinadi: element turi, props obyekti va bola elementlar. Bitta ildiz elementi — majburiy qoida: JSX ifodasi bitta ota-ona elementi yoki fragmentni qaytarishi kerak.

import React from 'react';

// Asosiy JSX - bitta ildiz elementi
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Guruhlash uchun fragmentlar

Qo'shimcha DOM tuguni kerak bo'lmaganda, React.Fragment yoki qisqa sintaksisdan <></> foydalaning. Fragmentlar haqiqiy DOM elementini yaratmaydi, faqat bola tugunlarini guruhlaydi. Bu, ayniqsa, jadvallar va ro'yxatlarda foydali, bu erda qo'shimcha o'rash HTML strukturasini buzishi mumkin.

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

JSX dagi ifodalar va o'zgaruvchilar

Har qanday JavaScript ifodasi JSX ga jingalak qavslar orqali kiritiladi { }. Ichkarida o'zgaruvchilar, funksiya chaqiruvlari, uchlik operatorlar va massiv metodlaridan foydalanish mumkin. Shartli render uchlik operator yoki mantiqiy AND orqali amalga oshiriladi.

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>
  );
}

Asosiy cheklov — jingalak qavslar ichida faqat ifodalardan foydalanish mumkin, ko'rsatmalardan emas. if/else, for, switch ishlatib bo'lmaydi — faqat uchlik operator, mantiqiy operatorlar va massiv metodlari. Funksiya chaqiruvlari, jumladan o'q funksiyalari, ruxsat etilgan.

JSX va HTML o'rtasidagi farqlar

JSX vizual ravishda HTML ga o'xshaydi, lekin tubdan farqlarga ega. Atributlar camelCase da yoziladi — className class o'rniga, onClick onclick o'rniga, tabIndex tabindex o'rniga. Bu JSX ning JavaScript ga transpilatsiya qilinishi bilan bog'liq, bu erda xususiyat nomida defisga ruxsat berilmaydi.

Yana bir muhim farq — o'z-o'zidan yopiluvchi teglar. HTML da ba'zi teglar (br, hr, input) yopilmasligi mumkin. JSX da barcha o'z-o'zidan yopiluvchi teglar yopiluvchi qiyshiq chiziqqa ega bo'lishi kerak: <br />, <input />. SVG atribut nomlari ham camelCase ga o'zgartiriladi: strokeWidth, fillOpacity.

JSX JavaScript ga qanday transpilatsiya qilinadi

Brauzerlar JSX ni to'g'ridan-to'g'ri tushunmaydi. Bajarilishdan oldin, JSX kodi transpilatordan — Babel, TypeScript yoki esbuild dan o'tadi. Har bir JSX elementi createElement yoki jsx/runtime chaqiruviga aylantiriladi.

Babel orqali transformatsiya

// Asl JSX
const element = <h1 className="title">Hello</h1>;

// Transpilatsiyadan keyin
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

React 17 dan boshlab, React importini talab qilmaydigan yangi JSX transformatsiyasi paydo bo'ldi. Avtomatik import jsx-runtime import React from 'react' holda komponentlar yozish imkonini beradi. Babel va TypeScript bu transformatsiyani {"runtime": "automatic"} sozlamasi orqali qo'llab-quvvatlaydi.

JSX React dan tashqari: Solid, Preact, Vue

JSX React bilan bog'liq bo'lsa-da, boshqa freymvorklar ham undan foydalanadi. SolidJS JSX ni Virtual DOMsiz haqiqiy DOM tugunlariga kompilyatsiya bilan ishlatadi. Preact — JSX ni to'liq qo'llab-quvvatlagan holda React ga engil alternativ. Vue @vue/babel-plugin-jsx orqali JSX ni qo'llab-quvvatlaydi, garchi uning asosiy shabloni template bo'lsa ham.

Asosiy farq — ifodalar semantikasi. React da JSX ifodalari har bir renderda bajariladi. SolidJS da JSX bir marta kompilyatsiya qilinadi va yangilanishlar signallar orqali kuzatiladi. Bu ishlashga ta'sir qiladi: SolidJS Virtual DOM va rekonsiliatsiyani talab qilmaydi, shuning uchun JSX renderi tezroq.

TypeScript da JSX til darajasida qo'llab-quvvatlanadi. .tsx kengaytmasi bo'lgan fayllar avtomatik ravishda JSX sintaksisini qayta ishlaydi. Propslarni tiplashtirish — TypeScript + JSX ning asosiy afzalliklaridan biri: IDE kutilayotgan atributlarni, callback turlarini va propslarning majburiyligini ko'rsatadi.

JSX bilan ishlashning eng yaxshi amaliyotlari

O'qish va saqlash oson bo'lgan JSX kodini yozing. Murakkab ifodalarni alohida o'zgaruvchilar yoki funksiyalarga ajrating — bu o'qishni yaxshilaydi va mantiqni belgilashdan alohida test qilish imkonini beradi. Keraksiz div o'rashlari o'rniga fragmentlardan foydalaning.

Xat boshi qoidasi — ichki elementlar uchun xat boshilariga rioya qiling. Har bir ichki daraja — bir xat boshi darajasi. Yopiluvchi teg ochiluvchi teg darajasida bo'lishi kerak. Uzun atributlar uchun qator uzilishidan foydalaning.

Propslarda inline o'q funksiyalaridan saqlaning, agar ular har bir renderda yaratilsa. Bunday hollarda callback ni useCallback ga o'rang yoki funksiyani komponentdan tashqariga chiqaring. Murakkab komponentlarni kichiklarga bo'ling — har bir komponent interfeysning bir mantiqiy birligi uchun javobgar bo'lishi kerak.