Runtime JSX / React

1Qu'est-ce que le runtime JSX ?#

JSX est une extension de syntaxe utilisée par React qui permet d'écrire du code de type HTML dans du JavaScript. Les navigateurs et la WebView ne peuvent pas exécuter le JSX directement : il doit d'abord être compilé.

La fonction Runtime JSX charge React et Babel Standalone dans votre application à l'exécution, pour que le code JSX brut fonctionne directement, sans outils de compilation.

2Quand l'utiliser#

Activez le runtime JSX lorsque :

• Vous écrivez du code React/JSX dans le champ JS personnalisé
• Vos fichiers HTML contiennent des balises <script type="text/babel">
• Vous avez généré du code JSX avec l'IA
• Vous voulez utiliser des composants React sans mettre en place de chaîne de compilation

⚠️ PAS nécessaire si vous importez un projet ZIP : le bundler esbuild intégré gère déjà le JSX pour les ZIP importés.

3Comment l'activer#

1. Allez à l'étape 4 (Fonctionnalités avancées) de l'assistant
2. Activez « ⚛️ Runtime JSX / React »
3. Écrivez votre JSX dans le champ JS personnalisé ou dans votre HTML
4. Générez votre APK comme d'habitude

L'application chargera React 18 + Babel depuis un CDN au premier chargement de la page.

4Écrire du JSX dans le JS personnalisé#

Avec le runtime JSX activé, vous pouvez écrire du code React directement dans le champ JS personnalisé :

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 transpilera automatiquement le JSX avant l'exécution.

5Utiliser <script type="text/babel"> dans le HTML#

Si votre site web ou votre HTML hors ligne utilise des balises script avec du JSX, marquez-les avec 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 trouve et compile automatiquement ces balises.

6Notes importantes#

• Nécessite une connexion internet au premier chargement (CDN)
• Ajoute environ 200 à 500 ms de délai au démarrage pour la compilation de Babel
• React 18 et ReactDOM 18 sont chargés automatiquement
• Fonctionne avec toutes les autres fonctionnalités (publicités, push, menu latéral, etc.)
• Pour des applications de production avec de grandes bases de code, envisagez plutôt l'importation d'un ZIP avec le bundling esbuild : c'est plus rapide et cela fonctionne hors ligne