¿Qué es exactamente BabelJs? ¿Por qué entiende los componentes JSX / React?

Babeljs es un transpilador configurable, un compilador que traduce de Javascript a Javascript a diferencia de un compilador que traduce código de aplicación de alto nivel en código de nivel inferior o binarios. Babel comenzó como `6to5` y se ha establecido como la herramienta de facto para la transpilación de Javascript superando a herramientas como Traceur. Parte de esto se debe a que es porque logra generar resultados que son sensibles y fáciles de leer.

Para obtener más información sobre su historia, lea ~ 2015 en revisión por su autor Sebastian Mackenzie. Babel utiliza complementos configurables que se aplican al código fuente y se convierten en código de aplicación. La mayoría de las transformaciones son para convertir códigos ES2015 y ES2016 específicos en código ES5. Sin embargo, los complementos para envolver componentes de reacción, verificación de tipo estático y contratos se han escrito utilizando Babel.

El equipo de babel implementó varios complementos para compilar JSX de React para `React.createElement`. Todas las funciones utilizadas por react, incluidas Es2016, clases y otras, se agrupan en un preset llamado `babel-preset-react` que puede usar en su aplicación.

Aquí hay una respuesta tl; dn / for dummies: Babel es, en una palabra, magia.

Imagine que hay diferentes versiones de JavaScript: una antigua llamada ES5 y una nueva llamada ES6. Ahora imagine que realmente desea utilizar todas las nuevas funciones brillantes del nuevo y genial JavaScript ES6, pero significa que el viejo Sr. Internet Explorer no se lo permitirá. Boooo! No se preocupe, aquí viene Babel al rescate (¡sí!).

Lo que hace Babel es que toma el asombroso JavaScript ES6 que escribiste y lo convierte en un aburrido JavaScript ES5 que incluso Internet Explorer puede entender.

Técnicamente, Babel es un transpilador, solo piense en ello como un compilador pero con un “trans” en lugar de un “com”.

Ah, y en cuanto a por qué entiende JSX, eso se debe a que fue construido con soporte inmediato para transpilar JSX.

Más información:

Si desea comenzar con Babel, consulte este artículo introductorio. O si está interesado en las nuevas y brillantes características de JS, hay: Introducción a ECMAScript 6, también conocido como ES6.

Si desea una mejor explicación de la diferencia entre compilar y transpilar, lea la respuesta de Sangeetha Jeganathan a: ¿Cómo difiere la transpilación de la compilación?