JSX / React Runtime

1¿Qué es JSX Runtime?#

JSX es una extensión de sintaxis que usa React y que te permite escribir código parecido a HTML dentro de JavaScript. Los navegadores y el WebView no pueden ejecutar JSX directamente: hay que compilarlo primero.

La función JSX Runtime carga React y Babel Standalone en tu app en tiempo de ejecución, así que el código JSX sin procesar simplemente funciona, sin herramientas de compilación.

2Cuándo usarlo#

Activa JSX Runtime cuando:

• Escribes código React/JSX en el campo Custom JS
• Tus archivos HTML contienen etiquetas <script type="text/babel">
• Generaste código JSX con IA
• Quieres usar componentes de React sin montar una cadena de compilación

⚠️ NO hace falta si subes un proyecto ZIP: el empaquetador esbuild integrado ya se encarga del JSX en las subidas de ZIP.

3Cómo activarlo#

1. Ve al Paso 4 (Advanced Features) del asistente
2. Activa '⚛️ JSX / React Runtime'
3. Escribe tu JSX en el campo Custom JS o en tu HTML
4. Genera tu APK como de costumbre

La app cargará React 18 + Babel desde CDN en la primera carga de página.

4Escribir JSX en Custom JS#

Con JSX Runtime activado, puedes escribir código React directamente en el campo 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 transpilará automáticamente el JSX antes de ejecutarlo.

5Usar <script type="text/babel"> en HTML#

Si tu sitio web o tu HTML sin conexión usa etiquetas script con JSX, márcalas 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 encuentra y compila estas etiquetas automáticamente.

6Notas importantes#

• Requiere conexión a internet en la primera carga (CDN)
• Añade un retraso de inicio de ~200-500 ms por la compilación de Babel
• React 18 y ReactDOM 18 se cargan automáticamente
• Funciona junto con todas las demás funciones (anuncios, push, menú lateral, etc.)
• Para apps de producción con bases de código grandes, considera usar la subida de ZIP con empaquetado esbuild: es más rápido y funciona sin conexión