Cómo Convertir JSX a JS con Babel
 2 minuto(s)
  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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | # 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:

Este proyecto tiene un archivo llamado App.jsx con el siguiente contenido:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 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 | 
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:
| 1 2 3 | 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:
| 1 2 3 4 5 6 | # Archivo .babelrc {   "presets": ["@babel/preset-env", "@babel/preset-react"] } | 
El archivo .babelrc se veria así en la estructura del proyecto:

3. Transpila el código JSX a JS
Con el siguiente comando:
| 1 2 3 | npx babel src --out-dir dist | 
Se nos crea una carpeta llamada /dist con los archivos convertidos de JSX a 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.
 
							 
						 
								 
								 
								 
          
           
          
           
          
           
          
           
          
           
          
           También en las categorías, etiquetas, búsquedas y más.
En versiones anteriores, se veian con alto disparejo.
Seguimos trabajando en mejorar la comunidad.
 También en las categorías, etiquetas, búsquedas y más.
En versiones anteriores, se veian con alto disparejo.
Seguimos trabajando en mejorar la comunidad.

 


 Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad.
Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad. 
 Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad.
Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad. Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.

 Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva. 
                   
                  
Social
Redes Sociales (Developers)
Redes Sociales (Digital)