JSX / React Runtime

1JSX Runtime چیست؟#

JSX یک گسترش نحوی است که React استفاده می‌کند و به شما اجازه می‌دهد کد شبیه HTML را داخل JavaScript بنویسید. مرورگرها و WebView نمی‌توانند JSX را مستقیم اجرا کنند - باید اول کامپایل شود.

قابلیت JSX Runtime، React و Babel Standalone را در زمان اجرا داخل اپلیکیشن شما بارگذاری می‌کند، پس کد JSX خام همین‌طور کار می‌کند - بدون ابزار ساخت.

2چه زمانی از این استفاده کنیم#

JSX Runtime را وقتی فعال کنید که:

• کد React/JSX را در فیلد Custom JS می‌نویسید
• فایل‌های HTML شما شامل تگ‌های <script type="text/babel"> هستند
• با هوش مصنوعی کد JSX تولید کرده‌اید
• می‌خواهید بدون راه‌اندازی خط لولهٔ ساخت از کامپوننت‌های React استفاده کنید

⚠️ اگر پروژهٔ ZIP بارگذاری می‌کنید لازم نیست - باندلر داخلی esbuild از قبل JSX را برای بارگذاری ZIP مدیریت می‌کند.

3چگونه فعال کنیم#

1. در ویزارد به Step 4 (Advanced Features) بروید
2. «⚛️ JSX / React Runtime» را روشن کنید
3. JSX خود را در فیلد Custom JS یا در HTML خود بنویسید
4. APK خود را طبق معمول تولید کنید

اپلیکیشن در اولین بارگذاری صفحه، React 18 + Babel را از CDN بارگذاری می‌کند.

4نوشتن JSX در Custom JS#

با JSX Runtime فعال، می‌توانید کد 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 را پیش از اجرا تبدیل می‌کند.

5استفاده از <script type="text/babel"> در HTML#

اگر وب‌سایت یا HTML آفلاین شما از تگ‌های script با 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 حدود ۲۰۰ تا ۵۰۰ میلی‌ثانیه تأخیر در راه‌اندازی اضافه می‌کند
• React 18 و ReactDOM 18 خودکار بارگذاری می‌شوند
• در کنار همهٔ قابلیت‌های دیگر (تبلیغات، push، منوی کناری و غیره) کار می‌کند
• برای اپلیکیشن‌های تولیدی با کدبیس بزرگ، به‌جای آن بارگذاری ZIP با باندل esbuild را در نظر بگیرید - سریع‌تر است و آفلاین کار می‌کند