JavaScript sintaksisini JSX bilan kengaytirish

Endi biz JavaScript sintaksisini qanday kengaytirishni tushunganimizdan so’ng, JSX qanday ishlashini ko’rib chiqamiz. JSX qanday ishlaydi? Biz buni qanday amalga oshiramiz? JavaScript sintaksisini kengaytirish uchun, bizga yangi sintaksisimizni tushunadigan boshqa dvigatel kerak bo’ladi yoki bu sintaksisni dvigatelga yetib bormasdan oldin ishlov berishimiz kerak bo’ladi.

JSX’ni kengaytirish uchun variantlar tahlili

Birinchi variantni amalga oshirish deyarli imkonsiz, chunki dvigatellarni yaratish va ularni davom ettirish juda keng miqyosda o’ylashni talab qiladi, chunki ular keng qo’llaniladi. Agar biz shu variantni tanlasak, kengaytirilgan sintaksisimizdan foydalanish uchun bir necha yillar, xattoki o’nlab yillar kerak bo’ladi! Shunda biz o’zimizning “o’ziga xos maxsus dvigatelimiz” hamma joyda ishlatilishini ta’minlashimiz kerak bo’ladi. Brauzer ishlab chiqaruvchilarini va boshqa manfaatdor tomonlarni bizning mashhurligi past bo’lgan “yangi narsamiz”ga o’tishga qanday ko’ndirardik? Bu ish bermas edi.

Ikkinchi variant tezroq: yangi sintaksisimizni dvigatelga yetib bormasdan oldin qanday ishlov berishni o’rganamiz. Buning uchun biz o’z lexer va parser’imizni yaratishimiz kerak bo’ladi, u kengaytirilgan tilimizni tushunadi, ya’ni kodning tekst satrini olib, uni tushunib chiqadi. So’ngra, an’anaviy tarzda mashina kodini yaratish o’rniga, biz bu sintaksis daraxtidan foydalanib, uni hozirgi dvigatellar tushunadigan oddiy JavaScript’ga aylantirishimiz mumkin. JavaScript ekotizimida Babel va boshqa TypeScript, Traceur va swc kabi vositalar aynan shunday qiladi (rasmga qarang).

Transpilyatsiya jarayoni

Shuning uchun JSX brauzerda to’g’ridan-to’g’ri ishlatilmaydi, balki “build step”ni talab qiladi, bu yerda maxsus parser uni sintaksis daraxtiga kompilyatsiya qiladi. Bu kod so’ngra oddiy JavaScript’ga aylantiriladi va oxirgi distributsiya qilinadigan to’plam paketi(bundle)ga aylantiriladi. Bu jarayon transpilyatsiya deb ataladi: kod o’zgartiriladi va so’ng kompilyatsiya qilinadi.

Aniq qilib aytganda, transpilyatsiya bir tilda yozilgan manba kodini shunga o’xshash abstraksiya darajasiga ega boshqa tilda o’zgartirish jarayonidir. Shuning uchun bu atama manbadan-manbaga kompilyatsiya (source-to-source compilation) deb ham ataladi.

Rasmiy nuqtai nazardan, bu tarjimonning bir turi hisoblanadi. Bu umumiy atama kompilyator, assembler yoki interpretator’ni anglatishi mumkin. Kontseptual jihatdan bu kompilyatsiyaga juda o’xshash, faqat maqsad qilingan tili manba tiliga o’xshash abstraksiya darajasiga ega bo’ladi.

Masalan, TypeScript yuqori darajadagi tildir, u transpilyatsiya qilinganda JavaScript’ga (yana bir yuqori darajadagi til) aylantiriladi. Babel’ning ES6 JavaScript kodini ES5 JavaScript’ga transpilyatsiya qilish jarayoni yana bir misoldir.

Endi biz JavaScript’ning o’z kengaytirilgan versiyasini qanday yaratishni tushunganimizdan so’ng, JSX bilan nimalar qilishimiz mumkinligini ko’rib chiqamiz.