JSX / React Runtime

1Apa itu JSX Runtime?#

JSX adalah ekstensi sintaks yang dipakai React yang memungkinkan Anda menulis kode mirip HTML di dalam JavaScript. Browser dan WebView tidak bisa menjalankan JSX secara langsung - harus dikompilasi dulu.

Fitur JSX Runtime memuat React dan Babel Standalone ke aplikasi Anda saat runtime, sehingga kode JSX mentah langsung berfungsi - tanpa alat build.

2Kapan menggunakan ini#

Aktifkan JSX Runtime ketika:

• Anda menulis kode React/JSX di kolom Custom JS
• File HTML Anda berisi tag <script type="text/babel">
• Anda membuat kode JSX dengan AI
• Anda ingin memakai komponen React tanpa menyiapkan pipeline build

⚠️ TIDAK diperlukan jika Anda mengunggah proyek ZIP - bundler esbuild bawaan sudah menangani JSX untuk unggahan ZIP.

3Cara mengaktifkan#

1. Buka Step 4 (Advanced Features) di wizard
2. Nyalakan toggle '⚛️ JSX / React Runtime'
3. Tulis JSX Anda di kolom Custom JS atau di HTML Anda
4. Buat APK Anda seperti biasa

Aplikasi akan memuat React 18 + Babel dari CDN pada pemuatan halaman pertama.

4Menulis JSX di Custom JS#

Dengan JSX Runtime aktif, Anda bisa menulis kode React langsung di kolom 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 akan otomatis mentranspilasi JSX sebelum dieksekusi.

5Menggunakan <script type="text/babel"> di HTML#

Jika situs web atau HTML offline Anda memakai tag script dengan JSX, tandai dengan 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 otomatis menemukan dan mengompilasi tag ini.

6Catatan penting#

• Memerlukan koneksi internet pada pemuatan pertama (CDN)
• Menambah jeda startup sekitar 200-500ms untuk kompilasi Babel
• React 18 dan ReactDOM 18 dimuat otomatis
• Berfungsi bersama semua fitur lain (iklan, push, menu samping, dll.)
• Untuk aplikasi produksi dengan basis kode besar, pertimbangkan memakai unggahan ZIP dengan bundling esbuild - lebih cepat dan berfungsi offline