JSX a JavaScript: de código React a JS normal
Pasar JSX a JavaScript significa convertir la sintaxis de etiquetas de los componentes de React en JS que el navegador puede ejecutar. La herramienta usa Babel, así que el resultado coincide con el de un paso de compilación con Babel. Eliges entre las llamadas clásicas a React.createElement y el runtime automático jsx(), y copias el resultado. Tu código se compila en tu navegador, nunca se sube y nunca se ejecuta.
Cómo pasar JSX a JS online
Para compilar JSX online no necesitas instalar nada ni crear una cuenta:
- Pega tu código en el campo Código JSX. Mientras esté vacío, verás «Pega aquí el JSX…». El límite es de 1.000.000 de caracteres.
- Espera un momento. La herramienta compila mientras escribes o pegas, aproximadamente un tercio de segundo después del último cambio, así que no hay ningún botón que pulsar. La primera vez, Babel se descarga una sola vez y tarda un poco más.
- Lee el resultado bajo el encabezado JavaScript. Se muestra como código resaltado de solo lectura.
- Pulsa Copiar al portapapeles. El botón cambia a Copiado.
- Para cambiar cómo se compila el JSX, usa el botón del engranaje que hay al lado (Ajustes del runtime de JSX). Abre el grupo Runtime de JSX con dos opciones, Clásico y Automático. Al cambiarla, el código se vuelve a compilar.
Si el texto no es JSX válido, aparece un mensaje de error de sintaxis con la línea y la columna, la línea afectada y un símbolo ^ bajo el punto exacto, y no hay resultado hasta que lo corrijas. Si el código no tiene nada de JSX, se muestra tal cual como JavaScript normal, con el aviso «No se encontró JSX en este código, así que se devuelve como JavaScript normal.»
JSX a React createElement: clásico o automático
Con Clásico, la opción por defecto, cada elemento pasa a ser una llamada a React.createElement(type, props, ...children) y el fragmento se convierte en React.Fragment. No se añade ninguna importación, así que React debe estar en el ámbito. Elígelo si tu proyecto o tutorial sigue importando React en cada archivo, o si trabajas con una configuración más antigua.
Con Automático, el JSX pasa a ser llamadas a jsx() o jsxs(), con los hijos dentro de props, y el fragmento se llama _Fragment. Se añade la importación de react/jsx-runtime solo con los nombres que usa el código. Requiere React 17 o posterior y da el resultado que produciría una cadena de herramientas actual de React.
Qué conserva y qué cambia el convertidor de JSX
- Las importaciones y exportaciones se quedan como las escribiste.
- Los comentarios se conservan en su sitio.
- El JavaScript normal alrededor del JSX no se toca, salvo por el formato de Babel.
- El formato es el de Babel, no el de Prettier: las comillas y los saltos de línea que usaste en el JSX no se conservan. Para ordenar el resultado, pásalo por el Formateador de código.
- Delante de las llamadas a elementos se añaden anotaciones
/*#__PURE__*/, que indican a los empaquetadores que la llamada no tiene efectos secundarios.
Lo que no hace: TSX, TypeScript y Flow
Solo compila JSX. No lee TypeScript, así que un TSX con anotaciones de tipos da un error de sintaxis, y tampoco lee Flow. No ejecuta tu código, no comprueba que tus componentes funcionen ni empaqueta archivos.
Para ir en el otro sentido, de JavaScript plano a código con tipos, usa el Convertidor de JS a TS. Para leer scripts minificados u ofuscados, usa el Desofuscador de JS.
JSX a JS con Babel, sin salir de tu navegador
Babel se carga una vez, la primera vez que pegas, y a partir de ahí la compilación ocurre en un Web Worker en tu dispositivo. Tu componente no se envía a ningún sitio y nunca se ejecuta, así que puedes pegar sin problema un archivo con efectos secundarios.
Preguntas frecuentes
¿Cómo paso JSX a JS online?
Pega tu JSX en el campo «Código JSX». Aproximadamente un tercio de segundo después aparece el JavaScript compilado bajo el encabezado «JavaScript». No hay botón de convertir, y con «Copiar al portapapeles» te llevas el resultado. Babel se descarga una vez la primera vez que pegas, así que esa primera conversión tarda un poco más.
¿Babel convierte JSX en JavaScript?
Sí. El preset de React de Babel compila JSX a JavaScript, y es lo que ejecuta esta página en tu navegador, así que el resultado coincide con el de un paso de compilación con Babel. Las herramientas de build hacen lo mismo automáticamente al compilar un proyecto. Usa esta página cuando quieras ver o copiar el resultado de un solo componente o fragmento.
¿En qué se diferencian JS y JSX?
JSX es JavaScript con una sintaxis parecida a XML para describir interfaces, por ejemplo una etiqueta button con un manejador onClick. Los navegadores no pueden ejecutarlo, así que un compilador reescribe cada etiqueta como una llamada a función normal. El resultado es JavaScript corriente. La extensión .jsx es solo una convención de nombres para archivos que contienen JSX.
¿Qué diferencia hay entre el runtime clásico y el automático?
El clásico convierte el JSX en llamadas a React.createElement, por lo que React debe estar en el ámbito en cada archivo que use JSX. El automático lo convierte en llamadas a jsx() y jsxs() y añade por ti la importación de react/jsx-runtime, así que no importas React solo para escribir JSX. El automático necesita React 17 o posterior. Aquí el valor por defecto es «Clásico».
¿Cómo pasar JSX a React.createElement?
Deja el runtime de JSX en «Clásico», que es el valor por defecto. Cada elemento se convierte en una llamada a React.createElement: primero el nombre de la etiqueta, luego el objeto de props (null si no hay ninguno) y después los hijos. Un fragmento pasa a ser React.Fragment.
¿Por qué mi resultado usa React pero no lo importa?
La salida clásica llama a React.createElement y React.Fragment y no añade ninguna importación, porque da por hecho que React ya está en el ámbito. Si tu archivo empieza sin import React from 'react', añade esa línea o cambia el runtime de JSX a «Automático», que escribe la importación necesaria.
¿Por qué aparecen comentarios /*#__PURE__*/ en el resultado?
Babel pone /*#__PURE__*/ delante de cada llamada a un elemento. Indica a los minificadores y empaquetadores que la llamada no tiene efectos secundarios, de modo que un elemento que nunca se usa puede eliminarse del paquete final. Puedes dejar los comentarios o borrarlos: no cambian lo que hace el código.
¿Puede convertir TSX o TypeScript?
No. Espera JSX dentro de JavaScript normal, así que una anotación de tipo como props: Props es un error de sintaxis. Quita antes los tipos o compila TypeScript con el compilador de TypeScript. Tampoco admite la sintaxis de Flow.
¿Se sube o se ejecuta mi código?
No. Babel compila el código en tu navegador, dentro de un Web Worker, y no se envía nada a ningún servidor. Tampoco se ejecuta nunca, así que puedes pegar sin problema un componente con efectos secundarios. Lo único que se descarga es el propio Babel, una vez.
Recomendado
-
Pizarra blanca magnética de escritorio con rotuladoresDibuja el árbol de componentes y mira qué llamada a createElement va dentro de cuál.
-
Monitor portátil KYY de 15,6"Deja el tutorial o la documentación en una segunda pantalla mientras comparas tu JSX con el resultado.
-
Barra de luz para monitor QuntisIlumina el escritorio, no la pantalla, en tus sesiones de depuración nocturnas.
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
