JSX / React Runtime

1Cos'è JSX Runtime?#

JSX è un'estensione della sintassi usata da React che permette di scrivere codice simile a HTML dentro JavaScript. I browser e la WebView non possono eseguire JSX direttamente: va prima compilato.

La funzione JSX Runtime carica React e Babel Standalone nella tua app in fase di esecuzione, così il codice JSX grezzo funziona subito, senza strumenti di build.

2Quando usarlo#

Abilita JSX Runtime quando:

• Scrivi codice React/JSX nel campo JS personalizzato
• I tuoi file HTML contengono tag <script type="text/babel">
• Hai generato codice JSX con l'AI
• Vuoi usare componenti React senza configurare una pipeline di build

⚠️ NON serve se carichi un progetto ZIP: il bundler esbuild integrato gestisce già il JSX per i caricamenti ZIP.

3Come abilitarlo#

1. Vai al Passaggio 4 (Funzioni avanzate) nella procedura guidata
2. Attiva '⚛️ JSX / React Runtime'
3. Scrivi il tuo JSX nel campo JS personalizzato o nel tuo HTML
4. Genera il tuo APK come al solito

L'app caricherà React 18 + Babel dalla CDN al primo caricamento della pagina.

4Scrivere JSX in JS personalizzato#

Con JSX Runtime abilitato, puoi scrivere codice React direttamente nel campo JS personalizzato:

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 trasformerà automaticamente il JSX prima dell'esecuzione.

5Usare <script type="text/babel"> in HTML#

Se il tuo sito web o il tuo HTML offline usa tag script con JSX, contrassegnali con 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 trova e compila automaticamente questi tag.

6Note importanti#

• Richiede una connessione a internet al primo caricamento (CDN)
• Aggiunge un ritardo di avvio di circa 200-500 ms per la compilazione di Babel
• React 18 e ReactDOM 18 vengono caricati automaticamente
• Funziona insieme a tutte le altre funzioni (pubblicità, push, menu laterale, ecc.)
• Per app di produzione con basi di codice grandi, valuta invece il caricamento ZIP con bundling esbuild: è più veloce e funziona offline