🟢 Curso Practico --- Intermedio-Avanzado --- de React.js (2020) #2 | incluyendo Babel

hola qué tal programadores de youtube

como están espero que muy bien en este

vídeo aprenderemos a cómo crear nuestros

primeros componentes y también a

utilizar nuestro punto de entrada en

este caso es index.hu está esto y

también vamos a implementar babel pero

que es volver bueno va a haber es una

herramienta que vamos a utilizar para

poder convertir javascript moderno en un

javascript que puede ser compatible con

todos los navegadores entonces esta

herramienta nos va a ayudar bastante a

crear aplicaciones modernas con las

nuevas características de javascript

bien empecemos lo primero que vamos a

hacer es difícil' mejor la carpeta

component y crear un nuevo componente el

cual llamaremos riart

punto j es

dentro de este componente importamos

para crear

de este real

seguidamente vamos a crear una constante

llamada raya com

que es nuestro componente esto va a ser

una función que simplemente va a

retornar

un texto que es

happy coin

perfecto lo último que vamos a hacer es

exportar este componente decimos export

default

riart font

perfecto tenemos nuestro primer

componente ahora lo que vamos a hacer

es configurar nuestro punto de entrada

le explico un poco esto nuestro punto de

entrada es el primer archivo que se va a

ser detectado y por ende es al que vamos

a trabajar toda la configuración del

riego y este archivo justamente es

nuestro archivo index punto j s

lo que vamos a hacer aquí es importar

arrollar

tal y como lo hicimos en el componente

y también vamos a añadir una segunda

librería que es reactor pero que el real

don real don es una librería que

funciona en paralelo con rial y que nos

va a servir para empujar todo lo que

hagamos con react hacia nuestro

navegador aquí recae la importancia de

esta de este módulo o de este elemento

vamos a importar

enrollar 2

brillando

perdón aquí me faltó un riesgo

bien entonces vamos a empezar llamando a

nuestro real

con su método render

el método renault recibe dos parámetros

uno que es el componente y otro es la

dirección a donde vamos a empujar ese

componente así que vamos a importar

nuestro componente que creamos hace un

momento escriba con

y esto le importamos dt el componente

perfecto

y pasamos aquí nuestra componente

ahora nos queda darle la dirección a

donde vamos a empujar este componente en

este caso vamos a empujarlo y un gif que

va a tener de haití

app así es que vamos a decir hace una

referencia

punto de telemann by haití a un elemento

que tenga el id

app

perfecto ya tenemos toda la

configuración de index hasta ahora así

es que lo que nos queda es crear este

componente

en nuestro index.hu tm

vamos a poner html5 para crear la

configuración básica de html y dentro

del boli vamos a crear nuestro div que

va a tener mi de que va a ser justamente

app ya tenemos listo nuestro html ahora

lo que vamos a hacer es instalar va a

haber aquí se viene lo interesante vamos

a nuestra consola a nuestro terminal de

comandos y visitamos npm store

pavel

también vamos a necesitar un loader el

papel loader

vamos a necesitar

bizet bar babel

reaser

y por último vamos a instalar babel

puede ser

enrollar

todas estas dependencias son de

desarrollo recuerden y para ponerlas y

desarrollo vamos a poner el comando

menos de will flag y le damos enter a

esperar a que instale nuestras

dependencias

bien una vez instalado vamos a nuestro

editor de código otra vez y les voy a

explicar un poco de cómo es que vamos a

configurar va a haber

bien en la raíz de nuestro componente

por el proyecto vamos a crear un archivo

llamado punto babel en el s en cómo se

estaban dando cuenta este archivo es un

tanto peculiar ya que vamos a

inicializar lo con un punto eso no lo

habíamos hecho antes les explico en

sistemas operativos basados en unix este

punto significa ocultar pero tú y torre

código va a identificar esto así es que

no tienes que preocuparte de que no lo

encuentran

vamos a crear entonces en la raíz

un archivo llamado punto babel

rc

y aquí lo tenemos como ven hasta le da

un poquito el cual ya nos dice que le

está identificando entonces en el

archivo vamos a crear un objeto con las

dependencias que acabamos de instalar

decimos abrimos llaves y llamamos a

pixels

esto va a ser igual a un arreglo este

arreglo va a contener dos elementos el

primero es

babel

louis

y el segundo es a babel

fraser

enrollar

les explico babel kuyt m nos va a servir

para trabajar con todo lo que es el mar

5 y heslip 6 y lo otro nos va a permitir

a trabajar pues con todo lo que es js x

y en private en si hemos llegado al

final de este vídeo y espero que les

haya gustado que hayan aprendido que es

lo más importante y vamos a hacer un

repaso de lo que hicimos como siempre

hemos implementado nuestro archivo

inicial es el index punto j s hemos

implementado el ratón y hemos empujado

nuestro componente y por último ya hemos

implementado va a ver

en el siguiente vídeo vamos a

implementar world pack para que por fin

podamos visualizar este componente

en el navegador hacemos chao