Cómo Convertir JSX a JS con Babel

2 minuto(s)

Convertir el código de un archivo JSX a código JavaScript creado por ejemplo con la librería React.

Puede ser útil y practico si necesitas usar vanilla o código puro JavaScript por alguna razón.

En este tutorial te enseñaré a Cómo Convertir JSX a JS con la herramienta Babel, vamos con ello.

Proyecto a Usar

Para este ejemplo tengo un proyecto de React base creado con la herramienta Vite, mediante los siguientes comandos:


A continuación el proyecto corriendo localmente:

Proyecto de React creado con Vite
Este proyecto lo crea Vite por defecto

Este proyecto tiene un archivo llamado App.jsx con el siguiente contenido:


Ahora convertiremos este código JSX a código JavaScript con Babel.

Convertir el código JSX a JavaScript

Sigue los siguientes pasos para hacerlo.

1. Instala Babel

Si aún no tienes Babel instalado, puedes instalarlo con sus plugins necesarios con este comando:

2. Crea un archivo de configuración de Babel

En la raíz del proyecto crea un archivo llamado .babelrc con este contenido:


El archivo .babelrc se veria así en la estructura del proyecto:

Archivo de configuración .babelrc creado
Solo necesitas agregar ese contenido

3. Transpila el código JSX a JS

Con el siguiente comando:


Se nos crea una carpeta llamada /dist con los archivos convertidos de JSX a JavaScript:

Archivos JSX convertidos a JavaScript con Babel
El código es puro JavaScript

Así de fácil puedes hacerlo en todos tus proyectos.

Conclusión

En este artículo has aprendido a Cómo Convertir JSX a JS con Babel.

Te será de guía convertir tus archivos JSX a JavaScript con Babel en tus demás proyectos.

Síguenos en nuestras Redes Sociales y demás canales digitales para que no te pierdas nuestros próximos contenidos.

Tutoriales 07-10-2025 07-10-2025 Crear un PostEventos DevsForo

Sobre el Autor

Juan Castro

Juan Castro — Ingeniero de Software con más de 17 años de experiencia en desarrollo, ia, ml, devops, data science, ciberseguridad y tecnología.

Certificados oficiales:


Ver más