Cómo Convertir JSX a JS con Babel

2 minuto(s)

En esta página:

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:


# Creamos el proyecto
npm create vite@latest convertir-jsx-a-js-con-babel

# Ingresamos a la carpeta convertir-jsx-a-js-con-babel
cd convertir-jsx-a-js-con-babel

# Actualizamos las dependencias del proyecto
npm install

# Iniciamos el servidor de Vite
npm run dev

# Creamos el proyecto

npm create vite@latest convertir-jsx-a-js-con-babel

# Ingresamos a la carpeta convertir-jsx-a-js-con-babel

cd convertir-jsx-a-js-con-babel

# Actualizamos las dependencias del proyecto

npm install

# Iniciamos el servidor de Vite

npm run dev

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:


import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

const [count, setCount] = useState(0)

return (

<div>

</a>

</a>

</div>

<h1>Vite + React</h1>

<button onClick={() => setCount((count) => count + 1)}>

count is {count}

</button>

<p>

Edit <code>src/App.jsx</code> and save to test HMR

</p>

</div>

Click on the Vite and React logos to learn more

</p>

</>

)

}

export default App

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:


npm install --save-dev @babel/core @babel/cli @babel/preset-react @babel/preset-env

npm install --save-dev @babel/core @babel/cli @babel/preset-react @babel/preset-env

2. Crea un archivo de configuración de Babel

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


# Archivo .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

# Archivo .babelrc

{

"presets": ["@babel/preset-env", "@babel/preset-react"]

}

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:


npx babel src --out-dir dist

npx babel src --out-dir dist

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.

Conoce estos 4 Métodos de Autenticación Para API REST.

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 Post – Eventos Devs – Foro

Sobre el Autor

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

Babel Js JSX React

Cómo Convertir JSX a JS con Babel

Proyecto a Usar

Convertir el código JSX a JavaScript

1. Instala Babel

2. Crea un archivo de configuración de Babel

3. Transpila el código JSX a JS

Conclusión

Sobre el Autor

Sobre el Autor

+ Artículos y Tutoriales