🫂Babel

Babel es un transpilador de JavaScript. Su función principal es convertir código ECMAScript 2015+ (ES6 y posteriores) en una versión compatible con navegadores más antiguos o entornos que no soportan estas características modernas.

¿Cómo funciona Babel?

1. Parsear: Babel toma tu código moderno de JavaScript y lo analiza para crear una estructura de datos conocida como el Árbol de Sintaxis Abstracta (AST, por sus siglas en inglés).

2. Transformar: Aplica una serie de plugins o presets para transformar el AST en una nueva versión que contenga solo sintaxis compatible con versiones antiguas de JavaScript.

3. Generar: Finalmente, Babel genera el código JavaScript resultante a partir del AST transformado.

Babel toma el código fuente y lo convierte en un Árbol de Sintaxis Abstracta (AST), este es el resultado del análisis del código fuente. Es una representación estructurada del código en forma de árbol que Babel puede entender y manipular. Entonces Babel aplica una serie de transformaciones al AST original. Estos son los plugins y presets que se configuran para modificar el código.

Después de aplicar las transformaciones, se obtiene un nuevo AST que representa el código modificado.

El AST modificado se convierte nuevamente en código JavaScript.

El resultado final es el código JavaScript transformado, que es compatible con versiones anteriores de JavaScript o navegadores que no soportan las características más nuevas.

Aplicación de Babel en React

Cuando trabajas con React, a menudo utilizas JSX, una sintaxis que permite escribir elementos de la interfaz de usuario de una manera que se parece a HTML, pero que no es válido JavaScript por sí mismo. Babel también convierte JSX en llamadas a React.createElement, que es lo que React realmente entiende.