El mundo de la programación está en constante crecimiento. No solo aprendemos todos los días una nueva forma de programar una acción, sino que también tenemos cada vez más herramientas a nuestra disposición para simplificar esta ejecución. En este post, te enseñaremos qué es Babel y cómo nos ayuda a transformar código JSX en JavaScript que entiende nuestro navegador.
Un poco de contexto
Antes de enseñarte qué es Babel, necesitamos un poco de contexto. Como has podido leer en nuestro post sobre React declarativo y JSX, JSX es una extensión de JavaScript creada por Facebook que nos permite escribir código HTML desde JavaScript. Entonces, con este lenguaje podemos simplificar acciones que ejecutan HTML y JavaScript a la vez.
A partir de lo anterior, JSX suena como una herramienta increíble facilitada por la librería JavaScript React. Sin embargo, tiene un pequeño problema y es que nuestro navegador no puede leer JSX. Entonces, para poder procesar acciones como las que te mostraremos más adelante, deberemos transformar el código JSX en algo que nuestro browser o navegador entienda. Aquí es donde entra Babel.
¿Qué es Babel?
Babel es una herramienta online que nos permite transformar el código JavaScript que escribimos durante el desarrollo de un proyecto en código JavaScript que el navegador entiende. Esta herramienta surge en un momento en el que se necesitaba procesar las nuevas features de JavaScript introducidas por ECMAScript 6.
Las features como el destructuring y el spread operator fueron introducidas antes de que algunos navegadores estuvieran preparados para entenderlas. Sin embargo, los programadores querían empezar a utilizarlas, pues facilitaban la ejecución de muchas acciones. Además, siempre existen navegadores que van por delante de otros en términos de soporte de lenguaje. Entonces, utilizamos Babel para coger ese código más moderno y transformarlo en código que el navegador pueda entender.
La transformación de JSX funciona de la misma manera que la transformación del JavaScript moderno. Entonces, imagina que tenemos la siguiente línea de código JSX:
const element = <div className = «container»>’Hello World’! </div>
Ahora que entiendes qué es Babel, debes saber que podemos transformar esa línea de código que el navegador no entiende a las siguientes líneas de código HTML/JavaScript:
<html>
<body>
<div id=’root’></div>
</body>
<script type = ‘text/javascript’>
const rootElement = document.getElementById (‘root’)
const element = React.createElement (
‘div’
{
className: ‘container’
children: React.createElement (‘span’, ‘null’, ‘Hello World’)
style: {color: ‘red’, backgroundColor: ‘green’}
},
console.log (element)
ReactDOM.render (element, rootElement);
</script>
</html>
Este código será procesado por el navegador, haciendo que nuestro proyecto pueda salir de nuestro software de programación.
¿Qué sigue?
Ahora que sabes qué es Babel y cómo funciona, ¡es el momento de empezar a usar esta herramienta para traducir JavaScript en tus proyectos! Para empezar a desarrollar proyectos de desarrollo web y aprender a dominar esta y otras herramientas de programación, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. ¡Inscríbete ya!
