JSX — JavaScript kodida XML yoki HTMLga o‘xshash sintaksis orqali foydalanuvchi interfeysi tuzilishini ifodalash kengaytmasidir. U brauzer bevosita tushunadigan mustaqil markup tili emas. Build vositasi JSXni JavaScript function chaqiruvlari yoki runtime tushunadigan element tavsifiga aylantiradi. JSX React bilan ommalashgan, lekin boshqa kutubxonalarda ham ishlatilishi mumkin.
Element ifodasi
JSX elementlari JavaScript expression hisoblanadi va o‘zgaruvchiga yozilishi, argument sifatida uzatilishi yoki funksiya natijasi bo‘lishi mumkin.
const title = 'UzbekDevs';
const heading = <h1 className="title">{title}</h1>;
Jingalak qavs ichida JavaScript expression ishlaydi. if statementni to‘g‘ridan-to‘g‘ri markup ichiga yozish o‘rniga ternary, &&, oldindan hisoblangan qiymat yoki alohida function ishlatiladi.
HTMLdan farqlari
JSX JavaScriptga yaqin bo‘lgani uchun ayrim atribut nomlari DOM propertyga mos: class o‘rniga ko‘pincha className, for o‘rniga htmlFor ishlatiladi. Event nomlari camelCase ko‘rinishida, masalan onClick. Self-closing element slash bilan yopiladi: <img />.
Style string emas, JavaScript obyekt sifatida berilishi mumkin. Propertylar camelCase yoziladi. CSS class ko‘pincha katta style obyektidan ko‘ra cascade va media query uchun qulayroq.
Kompilyatsiya
Klassik transform <Button />ni React.createElement chaqiruviga aylantirgan. Zamonaviy JSX runtime kerakli helper importini avtomatik qo‘shishi mumkin. Aniq chiqish Babel, TypeScript, bundler va configured runtimega bog‘liq.
Kichik harf bilan boshlangan tag DOM elementi, katta harf bilan boshlangan nom esa component variable sifatida talqin qilinadi. <button> native element, <Button> dastur komponentidir.
Ro‘yxat va key
Array map orqali elementlar ro‘yxatiga aylantirilishi mumkin. Har sibling elementga barqaror key beriladi.
items.map(item => <li key={item.id}>{item.name}</li>)
Key rendererga qo‘shilgan, o‘chirilgan va ko‘chgan elementlarni aniqlashga yordam beradi. Array indeksini key qilish tartib o‘zgarganda component state’ni noto‘g‘ri elementga bog‘lashi mumkin. Key childga oddiy prop sifatida avtomatik uzatilmaydi.
Xavfsizlik
JSX interpolationidagi string odatda text sifatida escape qilinadi, shuning uchun <script> markup sifatida bajarilmaydi. Raw HTML kiritish uchun maxsus API talab etiladi va ishonchsiz HTML sanitization qilinmasa XSS yuz beradi.
JSX ichiga URL, style yoki boshqa contextda qiymat berish ham alohida xavfsizlik tekshiruvini talab qilishi mumkin. Escaping biznes authorizationni hal qilmaydi.
Fragment va accessibility
Component bitta parent expression qaytarishi kerak bo‘lganda fragment ortiqcha DOM wrapper yaratmasdan elementlarni guruhlaydi. <>...</> qisqa sintaksis, explicit Fragment esa key qabul qilishi mumkin.
JSX HTMLga o‘xshagani semantikani avtomatik to‘g‘ri qilmaydi. Clickli div o‘rniga button, label-input bog‘lanishi, heading tartibi va ARIA qoidalari markupda ongli tanlanadi.
Shartli render va falsy qiymatlar
condition && <Panel /> qisqa shartli render beradi, ammo condition son bo‘lsa 0 DOMda matn sifatida chiqishi mumkin. Aniq boolean yoki ternary bunday noaniqlikni kamaytiradi. null, undefined va boolean odatda element yaratmaydi, string va number esa render qilinadi. Murakkab nested ternary markupni o‘qishni qiyinlashtiradi; holat oldindan variable yoki alohida componentga ajratiladi. JSXdagi comment ham JavaScript expression sintaksisida yoziladi. Whitespace HTML parserdagidan biroz boshqacha yig‘ilishi mumkin, matn orasidagi bo‘shliq ko‘rinishi test qilinadi.
JSX source map kompilyatsiyalangan stack trace’ni asl component satriga bog‘laydi. Production buildda source map tarqatilishi kod oshkor bo‘lishi va debugging ehtiyojiga ko‘ra boshqariladi.
Bog‘liq tushunchalar
JavaScript, React, component, virtual DOM, Babel, props, XSS