Babel

by Didier Martinez

​My learning process

ejercicio para los conceptos básicos de babel

comprender y luego entender

Siga esto pasos uno a uno y no se los salte​

Poll

Qué es Babel en el contexto de Javascript?

• Son unas torres y no sirven para nada porque ya no existen

• NPI

• Compilador o traspilador, pero no sé bien qué es un compilador y traspilador

• Compilador (traspilador)

  Creo que sé qué es y cómo funciona

es:

Una herramienta que está desarrollada en javascript la cual ejecutamos a través de node, para que lea nuestro código y le haga unas transformaciones según la plantilla o regla que le apliquemos

​

​Algunas de estas reglas salen de los estándares de la industria, otras para hacer compatible el código que escribimos con todos los navegadores y también podemos crear nuestras propias reglas de transformación

Un ejemplo práctico es cambiar sintaxis de ES6 a ES5 para que desarrollemos en versiones actuales, pero al momento publicar la versión en producción sea compatible con navegadores antiguos

​Este código es el que escribimos en los archivos de desarrollo

​ejecutamos babel

Babel nos entrega código ES5 el cuál será compatible con navegadores antiguos

package.json

Qué es el archivo package.json

qué es npm o yarn

Código para entender mejor

• ​Cree una carpeta

• ​Cree un archivo index.html

• ​Cree un html básico

• ​Cree un archivo index.js

• ​Referencie el js en el html

​jsx... qué????

​En el index.js con sintaxis ES6 cree una clase que extienda React.Component y un método llamado render que retorne la creación de un div pero no lo coloque en comillas ni backticks, así como la imagen.

​Si, ya sé que va a fallar, haga caso !

Multiple Choice

Ejecute la página con liveServer y abra la consola del navegador. ¿Qué error ve en la consola del navegador?

• No hay error

• No sé que es liveServer

• Uncaught SyntaxError: Unexpected token '<'