Agregando compatibilidad con todos los navegadores usando Babel

Clase 9 de 29 • Curso Práctico de React JS 2019

Resumen

Babel es una herramienta muy popular para escribir JavaScript moderno y transformarlo en código que pueda entender cualquier navegador.

Instalación de Babel y otras herramientas para que funcione con React:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Configuración de Babel (.babelrc):

{
  ""presets"": [
    ""@babel/preset-env"",
    ""@babel/preset-react""
  ],
}

Francisco Gustavo Hidalgo López

student•

A mi me salió el siguiente error

Lo sulucione ejecutando

npm cache clean --force

Y volviendo a instalar babel, como en la aqui:

Oscar Barajas Tavares

Team Platzi•

Interesante error, tratare de replicarlo, la solución que propones nos ayuda a limpiar todo recurso que queda tras instalar o eliminar paquetes dentro de node.

Edgar Ivan Hernández García

student•

Ami me salio el mismo error pero fue por que olvide abrir hyper como administrador

Rodrigo Reyes

student•

ojo! en el siguiente vídeo cuando lo quería correr con "npm run build" me marcaba error! estuve una semana sin saber que pedo, pero casi antes de mandar todo al diablo leyendo encontré la solución en el minuto 4:03 de este vídeo el profe pone ".....document.get.ElementById(app)); puse _app _entre comillas y arreglado ".....document.get.ElementById("app")); no se porque soy nuevo en esto pero asi lo solucione, si alguien me puede explicar porque funciono estaría chido.

También tengan cuidado cuando importan import ReactDOM from 'react-dom’ y no ReactDom es con mayúsculas.

espero y esto sea de utilidad y no tengan los mismo errores que yo

bye

Jeymi Melanie Valdivia Eguiluz

student•

Igual tenia la misma confusión, pero si te das cuenta en el archivo index.html que esta en la carpeta public hay a una etiqueta div donde le añade un id="app"

<body>
  <div id="app"></div>
</body>

Eso quiere decir que el componente HelloWorld.jsx lo va añadir dentro de ese div con id=app y lo hace con el document.getElementById('id del elemento donde lo quieres insertar'):

ReactDOM.render(<HelloWorld />, document.getElementById('app'))

Rafael Andrés Cisneros Corro

student•

La razon por la que te da error es la siguiente: cuando trabajas con codigo, las palabras que no son reservadas del lenguaje, y las usas sin comillas, hacen referencia a variables. Al hacer document.getElementById(app), le estas pasando una variable llamada app a la funcion, no estas pasando un valor como tal, si no has definido una variable con el nombre app, te va a dar error. Al colocarle las comillas, le pasas una cadena de caracteres a una funcion,esto si es un valor. Bien podrias definir una variable asi: const myVariable = "app", y pasarsela a la funcion asi document.getElementById(myVariable), al momento de ejecutarse, myVariable cambia por su valor que seria "app".

Rulo Code

student•

Comando normal

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Comando resumido:

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

Mariana Cortés

student•

Esas abreviaciones de "install" = i
o "--save-dev" = -D ...aplican siempre para npm, cualquier librería?

Carlos Jesús Fernández Salazar

student•

LithyaBlake, install o i si lo puedes usar en cualquier caso cuando necesites instalar. Por su parte --save-dev o -D sólo lo debes usar cuando la dependencia que quieres instalar deseas que sea una dependencia de desarrollo devDependencies, es decir, que no es necesaria para que la aplicación corra en producción dependencies, sino que acciona durante la etapa de desarrollo. Hay distintos tipos de dependencias, encontré este post en medium super resumido sobre ellas.

Miguel Angel Martelo Quiroz

student•

No paro de aprender React, es mi pasión, terminaré todos los cursos que hay en platzi!!! Fantastico.

Oscar Barajas Tavares

Team Platzi•

Después de este curso puedes continuar con el Curso de React Router y Redux

Bernardo Aguayo Ortega

student•

let's go front-end eveloper!

Cesar Augusto Barco de Gouveia

student•

Acá está la recolección de notas e información conseguida en Internet para complementar este curso.

Si ayudas a agregar información o investigación extra estaría genial.

Babel (compilador)

Babel es un compilador de JavaScript gratuito y de código abierto que se utiliza principalmente para convertir el código ECMAScript 2015+ (ES6 +) en una versión de JavaScript compatible con versiones anteriores que pueden ejecutar los motores JavaScript más antiguos . Babel es una herramienta popular para usar las funciones más nuevas del lenguaje de programación JavaScript. [3]

Instalación

Usaremos las siguientes dependencias:

// package.json
{
  "name": "react-curso",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

Usamos npm install para instalar todo esto.

Luego configuramos .babelrc para implementar el uso de @babel/preset-env que es para usar js moderno y @babel/preset-react que es para usarlo junto con React.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Valentina Orejuela

student•

Gracias por el aporte

Britney Hadassa Ascencio Henriquez

student•

thanks

Juan Carlos García Esquivel

student•

Lo que aprendí del curso de JavaScript me dice que el componente HelloWorld debería quedar de esta las siguientes formas.

//sin llaves y sin return 
const HelloWorld = () => <h1>Hola mundo</h1>; 
//con llaves y con return 
const HelloWorld = () => { 
	return <h1>Hola mundo</h1>;
}
/*en JSX esta opción también es valida cuando solo
se requiere retornar html */
const HelloWorld = () => ( 
	<h1>Hola mundo</h1>
);

pero no como quedo en el vídeo, ya que esto no retornara nada.

const HelloWorld = () => { 
	<h1>Hola mundo</h1>
};

Derek Samuel Paúl Peña

student•

Por si alguien desea copiar la instalación de babel: npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save–dev

Camilo Paez

student•

Hoy en día usando Babel no es necesario siempre importar React cada vez que usamos Jsx, gracias a la última versión de React se introdujo un nevo runtime que detecta cuando usas Jsx e importa React automáticamente, para habilitar esta función basta con que en nuestro .babelrc agreguemos lo siguiente

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

Así ya no es necesario hacer siempre el import, si deseas saber más puedes leer la documentación oficial aquí.

Nicolas Poveda

student•

.- node_modules: Paquetes y Dependencias. .- public: donde se publicara nuestro resultado final. .- src: nuestros archivos de desarrollo. .- package-lock: versionado y dependencia de paquetes. .- package: historia, config y scripts.

Mateo Nieto Hoyos

student•

Esta es la estructura basica para crear un proyecto en react:

[folder] -> public
	[file] -> index.html
[folder] -> src
	[folder]->components
	[file]->index.js

lo anterior es la estructura basica para comenzar un proyecto con react.js, tambien se debe instalar unas dependencias de npm la s cuales son:

*react
*react-dom

Para tener compatibilidad con todos los navegadores se va a utilizar babel

para la instalación y configuración de babel

1) npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react 
2) crear un archivo llamado .babelrc (en este archivo va la configuracion de babel para convertir nuestro javascript compatible con todos los navegadores)
3) crear un objeto de configuración:
{
	"presets": [
		"@babel/preset-env",
		"@babel/preset-react"
	]
}

Carlos Antonio Espin Constante

student•

Acotando a la instalación de las dependencias. Estos son recursos que necesitamos en nuestro proyecto para tener un mejor entorno de desarrollo.

Cuando usamos solo la bandera (--save), estas se mandarán a producción, Si no escribes ninguna bandera al momento de instalar los paquetes, (--save) se usa por defecto en tu proyecto.

Y si el paquete se instala como (--save-dev), quiere decir que solo será necesaria para nuestro entorno de desarrollo local.

Un shortcut de (--save) es -S y de (--save-dev) es -D

Johan Manuel Perez Soto

student•

Excelente, no me había emocionado por un curso como este hace mucho

Oscar Barajas Tavares

Team Platzi•

Genial, me da gusto leer este comentario.

Raul Hernández

student•

Babel

babel core = herramienta principal que transforma js moderno en "universal"
babel loader = herramienta para trabajar con webpack
babel presets
- env = para trabajar con ES moderno
- react = para trabajar con react
.babelrc = babel run commands

Giovanni Muñoz

student•

hola alguien me puede ayudar que puedo ejecutar para dejar la vulnerabilidades en 0 pasar webpack y babel sin problemas al instalar saludos

Luis Alonso Otero Seminario

student•

Me pasa exactamente lo mismo. Como hacer para tener 0 vulnerabilidades?

Diego Rodriguez

student•

hay algunas vulnerabilidades que solo se pueden arreglar manualmente ya que npm no puede hacerlo, de pronto te podria servir o actualizar npm o actualizar las dependencias una vez instaladas

Usuario anónimo

user•

Babel es una herramienta muy popular para escribir JavaScript moderno y transformarlo en código que pueda entender cualquier navegador.

Instalación de Babel y otras herramientas para que funcione con React:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loade

Jose Alberto Benitez Cervantes

student•

No es mas fácil si usamos npx create-react-app?

Jhon Diaz

student•

de esta manera se aprende a como hacerlo desde cero 🙄

Jhon Carlos Colorado Angulo

student•

De esta manera tenemos el control de todo ya que instalamos solo los paquetes y librerias que necesitamos.

Cristian Córdova

student•

Me ha instalado todo bien. Pero al finalizar me sale este mensaje: 6 packages are looking for funding run npm fund for details

Alguno sabría a que se refiere??

Victor Martin Ortiz Palacio

student•

Hace referencia a que hay dependencias que buscan financiación para seguir manteniendolas activas. Lo que hace npm es intentar darles un poco mas de visibilidad con ese mensaje.

Lans Quintero

student•

A mi me funcionó con la siguiente: npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Emanuel De Freitas

student•

Hola!

Tengo el siguiente problema.. estoy usando hyper, como administrador, y ya trate con el comendo sudo.. Help!! =(

<ejdff@DESKTOP-1HI7OU2:/mnt/c/Users/Diana Santivañez/Desktop/Platzi/Introreact/platzvideo$ sudo npm install @babel/core babel-loader @babel/preset-env @babel/preset-r
eact --save–dev
npm WARN rollback Rolling back @babel/core@7.10.3 failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core/lib/parser'
npm WARN babel-loader@8.1.0 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN PlatziVideo@1.0.0 No description
npm WARN PlatziVideo@1.0.0 No repository field.

npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core
npm ERR! dest /mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/.core.DELETE
Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core' -> '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/.core.DELETE'] {
npm ERR!   cause: [Error: EACCES: permission denied, rename '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core' -> '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/.core.DELETE'] {npm ERR!     errno: -13,npm ERR!     code: 'EACCES',
npm ERR!     syscall: 'rename',
npm ERR!     path: '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core',npm ERR!     dest: '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/.core.DELETE'npm ERR!   },
npm ERR!   stack: "Error: EACCES: permission denied, rename '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core' -> '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/.core.DELETE'",npm ERR!   errno: -13,npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/core',
npm ERR!   dest: '/mnt/c/Users/Diana Santivañez/Desktop/Platzi/IntroREACT/PlatziVideo/node_modules/@babel/.core.DELETE',
npm ERR!   parent: 'PlatziVideo'npm ERR! }
npm ERR!npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
ejdff@DESKTOP-1HI7OU2:/mnt/c/Users/Diana Santivañez/Desktop/Platzi/Introreact/platzivideo$>

Cristhian Cepeda

student•

Me pasó igual, intenta en este orden npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Daniel González

student•

A ver, porque redundar en la estructura de el archivo HTML?, si estas haciendo este curso, eso es trivial, VS Code funciona con Emmet, simplemente escribe:

<code>
html:5

Presiona tab y te genera la estructura.

Mariana Cortés

student•

Aunque yo hago lo mismo, he escuchado de compañías que hacen pruebas a mano donde te toca escribir el código sin ayudas. Creo que al enseñarnos una y otra vez a hacerlo nosotros, Platzi nos prepara para entornos complicados y de paso, buenas prácticas (no todo el mundo usa VSC).

Agregando compatibilidad con todos los navegadores usando Babel

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue