जब आप रिएक्ट लिख रहे होते हैं, तो आप अक्सर JSX देखेंगे - एक सिंटैक्स जो आपके जावास्क्रिप्ट कोड के भीतर HTML जैसा दिखता है। लेकिन क्या आपने कभी सोचा है कि यह कोड ब्राउज़र में कैसे चलता है?

यहां जादू है: JSX वैध जावास्क्रिप्ट नहीं है! ब्राउज़र इसे सीधे नहीं समझ सकते. पर्दे के पीछे, बेबेल जैसा उपकरण जेएसएक्स को नियमित जावास्क्रिप्ट में परिवर्तित (या "ट्रांसपाइल") करने के लिए कदम उठाता है।

प्रक्रिया:

1।आप JSX लिखते हैं - यह HTML जैसा दिखता है लेकिन आपके रिएक्ट घटकों के भीतर रहता है। उदाहरण के लिए:

const element = 
Hello, World!
;

2।बेबल इसे रूपांतरित करता है - निर्माण प्रक्रिया के दौरान, बैबेल React.createElement:
का उपयोग करके JSX को शुद्ध जावास्क्रिप्ट में परिवर्तित करता है।

const element = React.createElement('h1', null, 'Hello, World!');

3.ब्राउज़र में जावास्क्रिप्ट - अंत में, यह मानक जावास्क्रिप्ट वह है जिसे ब्राउज़र निष्पादित करता है, DOM को गतिशील रूप से बनाता है।

बेबेल कैसे काम करता है?

बेबेल एक शक्तिशाली जावास्क्रिप्ट कंपाइलर है जो आपको विभिन्न ब्राउज़रों और वातावरणों में अनुकूलता सुनिश्चित करते हुए नवीनतम जावास्क्रिप्ट सुविधाओं (रिएक्ट में जेएसएक्स सहित) का उपयोग करने में सक्षम बनाता है। यहां बताया गया है कि बेबेल कैसे काम करता है:
1।पार्सिंग
बैबेल आपके आधुनिक जावास्क्रिप्ट या जेएसएक्स कोड को एक एब्सट्रैक्ट सिंटैक्स ट्री (एएसटी) में पार्स करके शुरू होता है। विश्लेषण और हेरफेर करना। इस चरण के दौरान, बैबेल कोड पढ़ता है लेकिन इसे अभी तक नहीं बदलता है। उदाहरण के लिए, बेबेल यह JSX कोड लेता है:

हैलो, वर्ल्ड!

const element = 
Hello, World!
;

2।रूपांतरण इसके बाद, बेबेल
एएसटी पर प्लगइन्स की एक श्रृंखला लागू करता है। प्रत्येक प्लगइन एएसटी के विशिष्ट भागों को उसके द्वारा परिभाषित नियमों के अनुसार बदलने के लिए जिम्मेदार है। इन परिवर्तनों में आधुनिक जावास्क्रिप्ट सिंटैक्स (जैसे एरो फ़ंक्शन या एसिंक/प्रतीक्षा) को पुराने, ब्राउज़र-संगत संस्करणों में परिवर्तित करना शामिल हो सकता है। JSX के लिए, बेबेल रूपांतरित होता है:

const element =

हैलो, वर्ल्ड!

const element = 
Hello, World!
;

const element = React.createElement('h1', null, 'Hello, World!');

। कोड जनरेशन एक बार सभी परिवर्तन हो जाने के बाद, बैबेल रूपांतरित
AST से जावास्क्रिप्ट कोड उत्पन्न करता है। यह अंतिम चरण है जहां मानव-पठनीय आउटपुट उत्पन्न होता है, जिसे ब्राउज़र या Node.js निष्पादित कर सकता है।

यह क्यों मायने रखती है:

जेएसएक्स आपको अधिक सहज, घटक-आधारित यूआई कोड लिखने की अनुमति देता है, लेकिन यह बैबेल और जावास्क्रिप्ट रनटाइम है जो इसे जीवन में लाता है। इस रूपांतरण को समझने से आपको समस्या का बेहतर निवारण करने और अधिक अनुकूलित रिएक्ट ऐप्स लिखने में मदद मिलती है।