JSX / React रनटाइम

1JSX रनटाइम क्या है?#

JSX, React का इस्तेमाल किया जाने वाला एक सिंटैक्स एक्सटेंशन है जिससे आप JavaScript के अंदर HTML जैसा कोड लिख सकते हैं। ब्राउज़र और WebView JSX को सीधे नहीं चला सकते - पहले उसे कंपाइल करना पड़ता है।

JSX रनटाइम फ़ीचर React और Babel Standalone को रनटाइम पर आपके ऐप में लोड करता है, इसलिए कच्चा JSX कोड सीधे चल जाता है - किसी बिल्ड टूल की ज़रूरत नहीं।

2इसे कब इस्तेमाल करें#

JSX रनटाइम तब चालू करें जब:

• आप Custom JS फ़ील्ड में React/JSX कोड लिखते हैं
• आपकी HTML फ़ाइलों में <script type="text/babel"> टैग हैं
• आपने AI से JSX कोड बनवाया है
• आप बिना बिल्ड पाइपलाइन बनाए React कंपोनेंट इस्तेमाल करना चाहते हैं

⚠️ अगर आप ZIP प्रोजेक्ट अपलोड करते हैं तो इसकी ज़रूरत नहीं - बिल्ट-इन esbuild बंडलर ZIP अपलोड के लिए JSX पहले से संभाल लेता है।

3इसे कैसे चालू करें#

1. विज़ार्ड में चरण 4 (Advanced Features) पर जाएँ
2. '⚛️ JSX / React Runtime' को ON करें
3. अपना JSX Custom JS फ़ील्ड में या अपने HTML में लिखें
4. अपना APK हमेशा की तरह बनाएँ

ऐप पहली बार पेज लोड होने पर CDN से React 18 + Babel लोड करेगा।

4Custom JS में JSX लिखना#

JSX रनटाइम चालू होने पर आप React कोड सीधे Custom JS फ़ील्ड में लिख सकते हैं:

const App = () => (
<div>

<h1>Hello from React!</h1>
<p>This JSX is compiled at runtime</p>

</div>
);

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);

Babel चलाने से पहले JSX को अपने-आप ट्रांसपाइल कर देगा।

5HTML में <script type="text/babel"> का इस्तेमाल#

अगर आपकी वेबसाइट या ऑफ़लाइन HTML में JSX वाले स्क्रिप्ट टैग हैं, तो उन्हें type="text/babel" से चिह्नित करें:

<script type="text/babel">
function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}
ReactDOM.createRoot(document.getElementById('app'))

.render(<Greeting name="World" />);

</script>

Babel Standalone इन टैग को अपने-आप ढूँढकर कंपाइल कर देता है।

6ज़रूरी बातें#

• पहली बार लोड करने पर इंटरनेट कनेक्शन चाहिए (CDN)
• Babel कंपाइलेशन की वजह से स्टार्टअप में ~200-500ms की देरी जुड़ती है
• React 18 और ReactDOM 18 अपने-आप लोड हो जाते हैं
• बाकी सभी फ़ीचर (विज्ञापन, पुश, साइड मेन्यू, आदि) के साथ मिलकर काम करता है
• बड़े कोडबेस वाले प्रोडक्शन ऐप के लिए esbuild बंडलिंग वाला ZIP अपलोड इस्तेमाल करें - यह तेज़ है और ऑफ़लाइन भी चलता है