a hacer la aplicación de gif desde cero y el tema es que tenemos diferentes
opciones para empezar esta aplicación una de estas aplicaciones una de estas
formas que podríamos empezar la aplicación sería partiendo de la base de
este proyecto que hicimos de aprender webpack paso a paso desde cero y lo
dejamos en un punto donde ya podríamos haber utilizado react así que una opción
podría ser empezar esta aplicación desde aquí no lo vamos a hacer así pero
puede ser algo interesante si os interesa pues miraros el vídeo y empezáis desde
ahí vale esa podría ser una posibilidad perfecto ahora que más tendríamos una
segunda opción que sería utilizar next years que next 10 pues lo que tiene que
es muy interesante es que es como un framework que ya viene preparado en un
montón de cosas vale o sea pues se prepara el tema del enrutado se prepara
también el tema del seo tiene un montón de cosas que ya te vienen listas sin
tener que preocuparte de muchas cosas y además te da server side rendering que
esto renderizar tu aplicación desde el servidor trae un montón de cosas
interesantes hoy no lo vamos a hacer así pero seguramente haremos vídeos sobre
esto en el canal vale para que conozcáis de next 10 para que veamos cómo lo
podemos hacer y además cómo lo podemos desplegar a producción y creo que es
bastante interesante vale así que ya tenéis dos opciones o lo hacéis desde webpack con el
proyecto que hicimos en directo en el live de hace dos o tres semanas dos
semanas como pasa el tiempo rápido vale dos semanas o podríamos partir de next
yes que lo haremos en un siguiente vídeo no sé si en un live o en un vídeo normal y
lo haremos dos opciones tercera opción create react app vale esto es básicamente
una utilidad que es de facebook que es totalmente oficial que lo mantiene el
equipo de facebook el mismo equipo que está manteniendo react y que lo que nos
permite es crear rápidamente pues una aplicación con no voy a decir lo justo
pero si sencilla puedes llegar a la producción con ella pero por ejemplo no
tiene renderizado en el servidor pero aún así me parece muy interesante para
proyectos que no necesiten tanto seo porque al final lo que te hace pues es
crearte los estáticos para poder deployarlos en producción y es bastante
rápida y bastante cómoda bastante sencilla no es tan compleja y no te ofrece tantas
cosas como next 10 no te da tanta granularidad de opciones como crearte tu
propia configuración pero creo que sobre todo para empezar es muy buena opción
así que esta es la que vamos a hacer hoy entonces vamos a ver server site
rendering server site rendering no sé es que la gente se dice que entendió
cerveza server site rendering no sé cuánto como de rápido tengo que decir
cerveza rendering para que salga cerveza vale hasta aquí bien no
tres opciones web pack la primera podríamos tener web pack podríamos utilizar
parser podríamos utilizar diferentes opciones para crear nuestra aplicación
desde cero segunda opción crear utilizar un framework como puede ser next 10 que
viene súper bien preparado y es bastante más avanzado en el sentido de opciones
que te da y finalmente tendríamos create recap que es la que vamos a ver hoy así
que esta es la que vamos a utilizar este sería el repositorio de github donde
podemos ver un poquito pues lo que necesitamos para empezar nuestra aplicación es
importante en este punto que me imagino que si está aquí ya debería saber pero
si no pues lo vamos a comentar que para utilizar este tipo de utilizadas de
utilidades y es que en el mundo del frontend es súper necesario tener no 10
instalado yo en mi caso ya lo tengo instalado entonces no lo voy a volver a
instalar pero habría que ir a la página de no 10 y descargárselo lo puedes
descargar directamente como un instalador le das aquí te lo descarga ya lo
tendrías lo ejecutas y debería instalarte los ningún tipo de problema o la
forma que yo suelo recomendar es utilizando una cosa que se llama nvm que es
node version manager con node version manager sólo puedes utilizar en linux y en
mac en windows hay opciones creo que aquí lo pone que hay opciones para hacerlo pero
en windows pues es quizás es más recomendable ir directamente al
instalador que más sencillo y tal si no lo puedes hacer con nvm es un poquito más
avanzado pero lo que te permite es que puedes instalar diferentes versiones de
node que muchas veces es necesario claro si tú utilizas instalador pues lo tienes
una versión de note en tu ordena pero con esto puedes instalarte diferentes
versiones y a veces es bastante útil tener diferentes versiones así que vale se
escucha por ahora bien sí perfecto entonces esto sería como instalarse note
vamos a dar por hecho que ya tenemos note instalado que ya tenemos una terminal que
todo esto lo tenemos hecho si no es así quédate para ir quedándote un poco como
funcionaría y luego pues te lo miras con calma seguramente en algún punto haré un
vídeo de cómo instalar note con nvm para que todo el mundo lo sepa pero vamos a ir
concluir real act react app y vamos a utilizarlo para ello vamos a ir a la
terminal y vamos a abrir a ver la terminal vale aquí está vamos a hacer esto un
poquito más grande pipipi vamos a ir a mi carpeta de desarrollo y aquí tenemos que
ejecutar en piex create react app que es npx en piex lo que es es una cosa que te
instala note porque te instala en piem que es como el gestor de paquetes de no de y
te viene este comando que lo que te permite es ejecutar comandos al vuelo
instalarte los y ejecutarlos a la vez vale en este caso queremos instalar
create react app y que lo ejecute y le tenemos que decir el proyecto que vamos a
crear en este caso el proyecto que vamos a crear pues aquí pone my app pues le vamos
a llamar po po po gif gif y vamos a llamarle gif esto lo que va a hacer es instalar todas
las dependencias que necesitamos nos va a crear la estructura de nos va a crear el
directorio y nos va a quedar algunos archivos dentro y ahora veremos lo que nos deja mientras
instala voy a leer lo que me vais comentando saludos desde mataró dice yo
usef el sobre matías duarte buenas vais conectándose ahí ahora qué diferencia
hay entre usar en piex create react app y npm creo ya que vale ahora ya no se
debería utilizar en pie en que vio acá porque antes antiguamente se tenía que
instalar de forma global el paquete tenemos que hacer un en pie en install menos
g que era global y luego creo y una vez que lo tenemos instalado lo ejecutamos esto
da un montón de problemas de permisos vale a un montón de problemas de permisos porque
cuando instalas un paquete global lo tiene que poner en el paz del usuario y eso te
podía dar problemas de permisos con esto de en piex evitas todo esto así que ya no hay
que utilizar en pie visto el menos g y ejecutarlo de forma global de hecho creo que en el creo que
aquí lo lo comentan y todo si aquí tienen una frase no que dice si lo tenías así pues desinstalalo porque
no te lo recomendamos de ninguna forma vale ya lo tenemos nos ha dicho nos ha hecho aquí un montón de
cositas y aquí pues no nos dice mira puedes empezar el desarrollo ejecutando diferentes cosas vale nos
dice te sugerimos te sugiero que pues nada que hagas te de gif y que entres al directorio y hagas un ya
estar vale vamos a gif y que es nuestra aplicación y ya dice que hagamos ya estar porque ya vale ya
es como el en pie de facebook es el gestor de dependencias de paquetes y módulos de note pero de
facebook así que claro ellos aprovechan un poquito en este momento de que vale vas a utilizar
cribría capos vamos a hacer que utilices nuestro gestor de paquetes creo que igualmente funciona en
pie así que podríamos seguir utilizando en pie dice ya no estar pero en este caso pues vamos a utilizar
en pie así que vamos a utilizar en pie en estar y esto debería levantar ya nuestra aplicación voy a
ejecutarlo y a ver qué vale ya nos está dejando aquí en el puerto 3000 nuestra aplicación de hecho ya
tenemos nuestra aplicación funcionando nos ha creado aquí unos componentes de prueba ya nos dice lo que
tenemos que editar para empezar todo esto aquí en la terminal nos ha dejado la termina nos ha dejado la
url y el puerto donde nos ha levantado todo esto pues genial ya hasta aquí lo llevamos bien voy a abrir
aquí una pestaña nueva y voy a abrir mi editor de código que es visual studio code y para eso yo utilizo
la terminal a mí me encanta y pongo code punto que es ábreme este directorio en visual studio code vale
cuánto llevamos llevamos 10 minutos así que no hay problema queda aislado en la carpeta del proyecto
pues cuando hacemos se refiere aquí en este caso si haciendo npx queda aislado en la carpeta de
proyecto ni siquiera queda en la carpeta del proyecto queda en la carpeta de temporal o sabes o sea no lo pone
en la carpeta de proyecto lo pone en una carpeta temporal que luego se borra cuando reinicias el
ordenador y tal así que es bastante interesante también por eso porque evitando instalar cosas
pues no nos comemos esa memoria bueno ese espacio de disco y de esta forma pues bueno ahorramos un
poquito vale ya tenemos aquí el editor voy a ponerlo aquí en otra ventanita y esto también lo voy a sacar
y yo lo voy a lo voy a poner aquí para que lo hagamos todo bastante más en un solo sitio vale
muy bien esto son la estructura de directorios que nos ha creado create react up nos ha creado una
aplicación que le ha llamado giphy en el package json podemos ver que le ha llamado como pone el nombre
que es giphy y además pues todas las dependencias que le ha instalado es muy interesante que ahora ya
te instalar las dependencias para testear y seguramente lo veremos en un siguiente vídeo
que está muy guay que son las de testing library lo veremos más adelante nos ha instalado react react
dom y unos scripts que necesita para funcionar vale aquí tenemos todos los scripts que podríamos
ejecutar en nuestro proyecto hemos ejecutado el de start que sirve pues para empezar el proyecto
el de bill que es el que nos generaría los estáticos el de test pues para testear que ejecutaría
los test que tuviésemos en nuestro proyecto y el de yek que es para sacar la configuración interna
que tiene que vivir acá y que nosotros podamos customizar la no es muy recomendable porque una
vez que haces yek básicamente te desconectas un poco de lo que estabas haciendo en tu proyecto
y por lo tanto el día de mañana si se va actualizando que libre acá con nuevas versiones pierdes el hilo
no ya pierdes la posibilidad de reenganchar te así que hacer yek es poco recomendable al menos que
necesites o tengas claro que no quieres volver atrás a que libre acá luego aquí tiene diferente configuración
ya tenemos lo de slim config o sea el inter ya está configurado viene con unas reglas preestablecidas
aunque aquí podríamos cambiar y usar las nuestras aquí nos dice browser list aquí serían los navegadores
que vamos a soportar en nuestro proyecto porque dependiendo de esta configuración la compilación que se va a
hacer en nuestra app va a ser diferente en este caso pues le estamos diciendo que la cuota de mercado
que tiene que tener tiene que ser mayor a un 0,2 por ciento que no esté muerto y tal y en desarrollo
solo vamos a soportar que sea la última versión de chrome la última versión de firefox y la última
versión de safari hasta aquí el package json vamos a ver un poco las otras carpetas que nos ha ido dejando
vale tenemos en public tendríamos lo que es la carpeta pública lo que queremos pues que que sea visible
hacia afuera como por ejemplo imágenes o por ejemplo el favicon los estáticos que realmente queremos que se vean
ya desde fuera y que no hace falta que estén hechas con react en este caso también tenemos un index.html que es donde
vamos a a renderizar nuestra aplicación así que en este caso pues ya no lo ha preparado para no tenemos
que hacer absolutamente nada nos ha dejado aquí en el en el div dentro del bad el body nos ha dejado un
div con el root y aquí dentro es donde se va a renderizar nuestra aplicación vale el source que es donde está lo
interesante tenemos algo de estilos con el apunto css tenemos un apunto js donde tenemos el componente más
básico que es el que estamos viendo a la derecha de la pantalla aquí donde tenemos este logo dando vueltas
pues es justamente este logo que podemos ver aquí este logo de aquí de hecho ahora ya podríamos esto
que pone edita el código vale pues vamos a editar esto y guardo los cambios y vemos que aquí a la derecha
pues se ha actualizado con los cambios que hemos hecho luego este este ancor lo podríamos eliminar y ya
empezaríamos a toquetear nuestra aplicación perfecto tenemos también los test que en este caso pues hemos
dicho no haremos pero lo podríamos hacer ya están preparados tendríamos un poquito más de estilos para
el index.css sean los estilos más de la aplicación no tanto del componente como lo hemos visto antes y
tendríamos el index.js que es el punto de entrada de nuestra aplicación acuérdate el punto de entrada de
nuestra aplicación es básicamente por dónde empieza nuestra aplicación que es lo que tenemos que decirle a webpack porque
internamente cruer react up utiliza webpack que es desde donde tiene que construir la aplicación en
este caso nuestra aplicación empieza aquí esto es lo primero que vamos a cargar en nuestra aplicación y
a partir de aquí vamos a ir importando módulos pues vamos a importar react react dom los estilos de
toda la aplicación el componente app vamos importando diferentes cosas luego tenemos otras cosas por aquí un
service worker un setup de los test pero bueno esto ya no es tan tan importante para este vídeo así que
hasta aquí ya lo tenemos listo ya toda nuestra aplicación ya la hemos empezado y ya podemos empezar a toquetear para ir creando
nuestro buscador raudo y veloz de gifs vamos a ver por aquí que va contando un poco la gente vamos a ver qué tal usar
yarn at puedes utilizar yarn at si queréis o sea lo que prefiráis en este caso ya está preparado para utilizar yarn o utilicéis
npm la terminal que utilizo es hiper o hyper como le queráis llamar que es de de los chicos de now
hyper terminal esta es es totalmente gratuita es de código abierto es muy bonita y os la recomiendo un montón
que más tenemos por aquí se escucha bien gracias jesús genial pues vale sobre alguien pregunta aquí cuáles son las
ventajas que te da club ya cap yo a veces creo que está arriba capelo por no tener mucha mierda que no
usaré uy hemos dicho mierda espero que no haya niños mirando el vídeo bueno es verdad que creo que acá lo
que te hace es empezar rápido y sin necesidad de tener que instalar nada yo lo recomiendo porque la verdad
es que no añade muchas cosas que no necesites está preparado para que podamos utilizar lo justo y es
verdad que puedes ampliar un poquito la configuración para que soporte sas de ese post css está el
componen si algunas cositas pero así de salida no no te añade nada muchas dependencias ni nada o sea
que queda bastante limpio vale pues vamos a seguir con nuestro proyecto vamos a volver por aquí vamos a
eliminar estas cosas hemos dicho que vamos a hacer pues una aplicación facilita que sea para buscar gifs gifs no
sé si conoces gifi a mí es un servicio que me encanta lo voy a enseñar por aquí pero bueno es pues un
buscador de gif y tiene un montón de gifes y pues puedes buscar por lo que quieras y pones aquí panda
pues vamos a buscar en pandas a ver qué gifes un vídeo qué bonito pues aquí tenemos gifs de pandas y
genial es un servicio que funciona muy bien y es muy divertido aquí en este caso pues tenemos un gif de un panda
que está bastante enfadado así que este es la api que vamos a utilizar es de este servicio por suerte
pues la api es abierta necesitamos una pique yo ya me he registrado y tengo la pique y te ofrece
diferentes en points tienes para buscar tienes para que te devuelva lo que es trending te devuelve
que te dé un gif random y cosas así así que está bastante bastante bien entonces esta es mi apique que
ya la he creado antes es totalmente gratuita podéis darle vais a gif y developers y ahí os registrar
y le decís para qué queréis vuestra aplicación básicamente yo lo he hecho voy a hacer una
prueba un live coding con un montón de gente así que a ver si no os importa me dais una aquí y nada es
inmediato así que perfecto y luego también tiene este api explorer que es muy útil porque podéis utilizar
decirle vale quiero el endpoint de buscar y lo quiero probar pues buscando pandas el límite de imágenes
quiero que sea 10 el rating pues básicamente porque también tienen gif subidos de tono y también
el lenguaje así que nada pues aquí ya he dicho cuál es la app que quiero probar que es esta la que
he creado para testear esta aplicación de react y cuando le doy a send request pues aquí tendría la
respuesta de la api así que esto es lo que lo que quiero lo que quiero ejecutar en mi código perfecto
lo vamos a dejar aquí y vamos a volver a nuestra aplicación los estilos voy a ir un
poquito a saco vale a cuchillo así que bueno no esperéis que haga aquí una cosa fantásticamente
bonita por ahora voy a eliminar esto y lo único vamos a quitar este logo vamos a quitar el logo este
vale bueno vamos a dejar me había gustado el color me había gustado el color así que vamos a dejar el color
ese header vale es app header vamos a el app header vamos a quitar todo el css que sea del logo porque
el logo ese pues no no lo queremos y esto esto esto que está en el app header vamos a llamarle
app content porque app header es un poco raro y vamos a quitar todo este css y ahora sí vamos a poner que esto
sea un section y vamos a llamarle que esto esto es el app header está muy bien esto porque también
podéis ver que este archivo css que tenemos aquí para utilizarlo en nuestro proyecto lo único que hemos
hecho es importar lo hemos hecho aquí dentro del componente import app css y de esta forma pues tenemos
los estilos a nivel de cada uno de los componentes y luego veremos cómo lo vamos a poder ir separando así
que lo vamos a dejar así y aquí lo que me gustaría enseñar pues son todos los gifs no vamos a poner la
palabra aquí vale habíamos visto ya cómo se tenía que utilizar el tema de los hooks en el anterior en el
anterior vídeo que los hooks lo que servía era para tener funcionalidad que le podíamos dar a nuestros
componentes más allá de renderizarse no porque ahora pues estamos renderizando esto pero como podemos
decirle que cobre un poco de vida entonces podían los componentes tener estado tenían un estado que era
como decirle en qué estado en qué forma en ese momento se encuentra nuestro componente así que tenemos que
importar un hook para añadirle un estado a nuestro a nuestra biblioteca a nuestro componente app y el
hook que vamos a utilizar es use state vale para añadirle el estado vale pues entonces vamos a utilizar use state y por
ahora vamos a decir que el valor inicial del estado pues sea un array vacío el use state devuelve un array de dos
posiciones así que vamos a guardar en state el estado que estamos creando vamos a poner este array vacío y
cuáles son estas dos posiciones la primera posición es el valor del estado vale y la segunda posición es actualizar
actualizar ese valor esto que se escribió así y esto siempre lo hago así pero es para que lo sepáis esto es más fácil si lo
escribimos directamente así value y update vale es exactamente lo mismo vale lo que hemos escrito antes y esto es
exactamente lo mismo es una cosa que nos permite javascript ahora podríamos renderizar pues lo que hemos escrito así que
vamos a poner aquí el value y bueno el value pues ahora mismo no es absolutamente nada pero si ponemos aquí por
ejemplo pues vamos a copiarnos un gif por ahora vamos a ir teníamos aquí el angry con fueste a ver vamos a copiarnos
la imagen y vamos a poner aquí pues está este gif vale por supuesto ahora pues es un string lo que tenemos que decirle
es que esto tiene que ser una imagen y que este value que queremos renderizar sea la imagen
bueno ya tenemos nuestro aquí esto no está siendo muy útil pero bueno
ahora el tema es el tema es claro nosotros queremos recuperar los los gifs lo que queremos es realmente hacer una
búsqueda a la api y renderizar los gif además no sólo queremos renderizar uno queremos renderizar más de uno porque
en este caso está funcionando de milagro porque lo que estamos haciendo aquí es un array y le estamos pasando
en source el valor del array y está funcionando bien pero esto no sería correcto del todo porque en realidad
value no es un string es un array de string así que lo que tendríamos que hacer vamos a cambiarle el nombre a
gifs y en lugar de update value vamos a ponerle set gifs y este gif que estamos utilizando aquí y que si guardo los
cambios todo funciona correctamente lo que vamos a hacer con esto ahora es utilizar
un renderizado de listas o sea vamos a renderizar las listas de elementos ahora sólo tenemos un gif
vamos a añadir un segundo por ejemplo vamos a poner este que está bastante gracioso de un panda dando botes
vale nos copiamos la imagen vamos a esto no sale muy bien así que voy a poner aquí inicial o gifs en mayúscula
que esto sea un array y aquí tenemos esto y este vale lo vamos a sacar ahora fuera del componente pero
luego lo arreglamos para que esto se lea un poquito mejor y básicamente en esta constante gif tenemos un array de
strings tenemos ahora mismo dos imágenes que son dos gifs así que el estado inicial que vamos a tener
pues es este array de gif vale ahora si guardo los cambios pues puedes ver que sólo se ve un gif es como
que sólo está renderizando el último y esto es porque ya nos está avisando el editor nos dice esto que
estás esperando es del tipo un array de strings estoy esperando un string y tú me estás dando un array de
strings vale como arreglamos esto lo que podemos hacer es renderizar cada uno de los elementos de la
lista así que le decimos vale por los gif vamos a utilizar el map y por el single gif lo que me quiero
quiero que renderices en este caso es una sola imagen donde este single gif se renderiza ahora guardamos los
cambios vale y ahora sí podemos ver que me voy a quitar esto para que lo veáis mejor el código y ahora
podemos ver que se están renderizando los dos porque está haciendo un loop de este gif básicamente le
estamos diciendo utiliza el map de la red de gif y por cada gif me renderizas una imagen ahora
sí estamos recorriendo todos los gif que teníamos en el state aunque ahora mismo será un state inicial
ahora mismo lo único que tenemos en estado es esto no estamos cambiando de estado simplemente es como en realidad
esto esto esto es como si ahora mismo tuviésemos esto aquí así es exactamente lo mismo ahora he cambiado
he guardado los cambios y se ve exactamente igual esto no tiene no tiene más misterio no por ahora
el estado es exactamente el que le estamos dando de inicio no estamos cambiando cómo lo hacemos para
cambiarlo no porque lo que nos gustaría es cambiarlo es que en lugar de que sean estos dos que sean otros dos
gifs de hecho vamos a hacer otra cosa vamos a poner que estos gif
different gifs vamos a poner different gifs y esto es una red vale vamos a buscar otros dos gifes que sean diferentes
este es el pan es el panadero que está aquí vale ahí no he copiado el como y me echas perfecto vale pues pongamos que
ahora tenemos este otro gif o sea tenemos un array de dos posiciones con un con dos gifs y
tenemos otro array con un solo gif y queremos que cambie vale pues lo que podemos hacer es por ejemplo
poner un botón que cuando se le haga un clic vale cambiar gifs perfecto y aquí lo que queremos hacer es que
pase a ser los gif que teníamos el estado en el que se encuentra nuestro componente en lugar de renderizar
los gifs de antes pues renderice este nuevo para ello vamos a utilizar este método setgif que lo que nos va a
permitir es actualizar el estado de nuestro componente así que lo que vamos a hacer es que cuando hagamos
clic en ese botón en este chiquitísimo pero en este botón vamos a poner rápidamente que además creo que
salgo yo justo justo encima ahora me muevo para que veáis el botón vale ya está movido vale pues
cuando le demos clic a este botón lo que queremos es que cambien los gif para eso hemos hecho esto
cuando hagamos un clic evaluamos esta función que lo que va a hacer es cambiar el estado así que le damos
y hemos cambiado los gif vale ahora si le vuelvo a dar ya no no vuelven a cambiar vale solo cambia una vez
pero voy a refrescar tenemos el estado inicial y cuando le doy clic al botón lo que hago es cambiar
el estado y cuando cambia el estado el componente se vuelve a renderizar con esta nueva información
vale perfecto fácil me voy a quitar de aquí estoy en medio estoy en medio voy a poner solo la pantalla
aquí y se me debería seguir escuchando creo que sí vale entonces hasta aquí ya hemos visto un poco
el concepto del estado hemos visto el concepto del on click como podemos escuchar eventos así que muy
bien vamos a quitar por ahora vamos a quitar esto imaginemos que no queremos cambiar el gif no queremos
cambiar los gif cuando le damos clic sino que queremos cambiar el gif nada más se renderice el componente
como podemos hacer eso no como podríamos decir que este esta aplicación nada más entrar tenga que cambiar
el gif vale lo que podemos hacer es ejecutar un efecto lo que se llama un efecto pero antes vamos vamos
a leer los comentarios a ver si me he perdido algo explicación general como siempre gracias
fire y natsu excelente profe que extensión usas para mostrar esos errores me pregunta mucha gente y quería
hacer un vídeo sobre eso pero es error lens error lens está muy bien porque te dice en línea te da
este este error y te lo comenta no te dice vale este este es el error este es el error que tienes te lo
comenta ahí en lugar de ponértelo subraya que también te lo deja subrayado pero te lo pone en línea y es
súper súper visual y creo que además en los vídeos pues es muy interesante que más pues esa es esa es la
la extensión que usado que veo que me lo está preguntando un montón josef el msouri me dice oye no
conseguiría lo mismo si aquí pones un for each vamos a probarlo vamos a probarlo del for each vale capa chao capa chao
no se renderiza nada vale porque no se renderiza nada porque el for each sí que recorre una lista de
elementos pero no devuelve nada y en este caso si nos fijamos el map devuelve un nuevo array y lo que le
estamos diciendo es que por cada elemento lo que tiene que devolver es una imagen por lo tanto necesitamos
utilizar el map porque el map devuelve algo el for each no devuelve nada vale entonces con el for each
pues no no funcionaría necesitamos utilizar el map importante para que lo sepáis que más que más
lo del warning se llama error gutters bueno yo utilizo en línea error no sé cuál cuál será vale
pedro sánchez que no sé si es el presidente del gobierno de españa me dice que muchas gracias por tu conocimiento
perfecto alguien me decía te falta el retún no no falta retún si yo pongo un for each y aquí le pongo el retún
esto sigue sin funcionar porque el for each no es que no devuelve el for each no devuelve nada no no
o sea no no puede no devuelve nada lo único que hace es pues hace el loop y ya está así que de hecho el map
sí que tiene un retún aquí implícito cuando las arrow functions dejas una sola línea lo que hace es devolver
la misma línea por eso está devolviendo una imagen vale guardando los cambios perfecto muy bien pues
pues entonces volvemos al tema de use effect porque hemos al efecto hemos dicho vale yo lo que quiero
ahora en lugar de tener que darle a un botón a mí lo que me gustaría es que nada más entrar al
componente cambiasen los gif y para eso necesitamos lo que es el concepto del efecto para eso utilizamos
un nuevo hook que se llama use effect y esto nos va a permitir ejecutar una función de forma totalmente
arbitraria podéis utilizar yo utilizo mucho function pero podría ser un arrow function y esto esto se va a
ejecutar cada vez que se renderice nuestro componente así que vamos a poner aquí efecto ejecutado efecto
ejecutado vale guardo los cambios voy a abrir aquí la herramienta de desarrollo para que veamos un
momentito esto a ver que no se ve casi nada vale vale en todo el log podemos ver que aquí me ha ejecutado
una vez el efecto sólo me la ha ejecutado una vez porque porque este componente sólo lo hemos renderizado
una vez como hemos dicho que cada vez que actualizamos el estado se vuelve a actualizar el componente no cada
vez que cambiamos el state se vuelve a renderizar el componente si nosotros volvemos a poner aquí que yo
yo también que lo he quitado y no lo debería haber quitado pero si aquí volvemos a poner el el set
gifs y aquí le ponemos el diferente vale cambiar gifs cambiar que vale si devuelvo a poner este botón de
aquí podemos ver a ver si puedo filtrar los mensajes que salen para que sea un poquito más limpio y no nos
no nos pongamos aquí vamos a quitarle esto y vamos a dejar sólo el info eso muy bien aquí tenemos el
efecto ejecutado efecto ejecutado vale ahora se ejecuta una vez el efecto yo entro a la aplicación
pum y se ejecuta aquí una vez el efecto si yo ahora cambio otra vez los gifs se ha vuelto a ejecutar el
efecto así que aquí podemos ver que el efecto esto lo que estamos haciendo es que esta función que tenemos
aquí se ejecute cada vez que se renderice nuestro componente así que aquí que sabemos que la primera
vez que entramos se ejecuta una vez podríamos en lugar de utilizar el botón como hemos dicho que
lo que queríamos era que se cambiasen los gifs nada más renderizarse el componente pues podríamos
ponerlo aquí dentro pero si yo cambio esto esto va a reventar por todos los lados y como no quiero que
como no quiero que esto reviente no lo voy a guardar vale porque esto reventaría esto reventaría porque
hemos dicho que el efecto se ejecuta cada vez que se renderiza el componente verdad a ver voy a ponerme
para que hay voy a ponerme por aquí para que me veáis un poco la cara de seriedad respecto a este vale
vale entonces hemos dicho que el hay estará no sé por qué se me ha puesto aquí fuera vale hemos
dicho que el efecto se ejecutaría cada vez que se renderiza el componente verdad entonces si yo
ejecuto este efecto la primera vez que se renderiza el componente y dentro ejecutó el cambio de estado
y cuando cambia el estado se vuelve a renderizar el componente que va a pasar a ver que levante la mano
que lo sepa no vale vale lo que va a pasar es que va a volver a va a volver a ejecutar el efecto
no o sea en este efecto se va a ejecutar cuando se renderiza el componente cambiamos el estado eso
vuelve a ejecutar el vuelve a renderizar el componente si se renderiza a través del componente se
vuelve a ejecutar el efecto si se vuelve a ejecutar el efecto se ejecuta el estado actualizamos otra vez
el estado y si ejecutamos otra vez el estado se vuelve a renderizar el componente si se vuelve a
renderizar el componente se vuelve a ejecutar el efecto vale y creo que ya lo estáis entendiendo
no vale o sea que esto es súper importante tenéis que tener cuidado con hacer loops que además sean
infinitos para solucionar esto el use effect recibe dos parámetros el primer parámetro es la función
que queremos ejecutar y el segundo parámetro son las dependencias que tiene este efecto o sea las
las variables o información que si cambia se tiene que ejecutar este efecto y eso tiene que es una
rating es una lista de dependencias de este efecto en este caso vamos a decirle ahora que no tiene
dependencias que significa que no tenga dependencias esto significa que sólo se va a ejecutar una sola
vez la primera vez que se renderiza el componente y esto que vemos aquí equivaldría a lo que antes era
conocido como componente de mount no cuando antes y algunos de vosotros venís de mis clases de udemy
cuando lo hacíamos estos componentes con clases utilizamos el componente de mount porque hacíamos componentes
con clases que era un poquito más largas vale pues este use effect sería un componente esto tal y como
lo hemos puesto con una rey como dependencia sin dependencias ahora sería este efecto no tiene
dependencias por lo tanto sólo se ejecuta la primera vez que se renderiza vale pues esto equivaldría al
componentismo vale perfecto así que ahora si guardo ahora sí como podemos ver cada vez que yo entro ni siquiera se
ve muy rápido no pero podemos ver si pongo aquí un console log y pongo actualizando los gifs al menos pues si guardo
los cambios pues vemos aquí el console log y aunque ha vuelto a renderizar el ha vuelto a cambiar el estado y ha
vuelto a renderizar el componente sólo lo ha hecho una vez porque le hemos dicho este efecto sólo se tiene que
ejecutar una vez no tiene dependencias no depende de nada una vez es como una función que se ejecutaría una vez esto sería
esto sería algo similar al componentismo vale así que por aquí vamos vamos vamos avanzando vamos avanzando
quedaría lope lopeado me encanta la palabra lopeado quedaría en un loop se crearía un loop si yo le quito
esta dependencia si yo quito esta dependencia y guardo que pasa que por defecto el por defecto el efecto lo que
lo que hace es ejecutarse cada vez que se renderiza el componente y por lo tanto esto
crearía un loop infinito vale entraría en un loop porque cada vez que se actualiza el estado ejecuta
el efecto y el efecto ejecuta una actualización de estado vale entonces para evitar eso en este caso
vamos a utilizar este array vacío vale entonces
si tuviésemos otro tipo de dependencias por ejemplo si le llegase parámetros a este componente
dependiendo de ese parámetro tuviese que hacer una nueva llamada entonces si podríamos poner aquí por ejemplo
el parámetro que debe cambiar por ejemplo keyword y a lo mejor si da tiempo pues luego lo veremos
pero por ahora tenemos esto vale así que ahora que sabemos esto que ya sabemos cuando se ejecuta
el efecto no cuando cuando en este caso se renderiza el componente y que hemos dicho no tenemos de dependencias
ahora ya podemos hacer nuestra llamada a la api de giphy para pillar gifs de verdad vamos a ver en qué casos se le pasan
propiedades a ese arreglo vale pues en el caso de que el efecto dependa de esas propiedades del arreglo
además el linter te ayuda para detectarlos igual más adelante esto lo vemos vamos a ver si
si siguiendo en el vídeo vemos algún caso en el que nos ayude podrías explicar en algún vídeo explicar en
algún vídeo cómo integrar preprocesadores me lo apunto a mí lo que no me queda claro que es el use callback
vale es un poquito más avanzado pero intentaremos también más adelante mirarlo cuando quieres que dependa de
de algún concreto exacto pedro sánchez ahí es cuando se quedaría necesitaríamos las dependencias
por ejemplo vamos a hacer vamos a avanzar con el hacer el fetch y a ver si más adelante no nos da la
pues tenemos la problemática y lo arreglamos por ahora pues en este caso tenemos aquí la app explorer
ahí voy a quitarme ya me quito que estoy estoy en medio aquí vale muy bien pues esta sería la request url y
esto abajo tendríamos un poco la respuesta que nos está devolviendo ahora la miramos en detalle está ahora
vamos a quitar todo esto estos gifs que tenemos aquí y vamos a comentar esto y por ahora aquí lo que vamos a poner
es una arribación vale guardamos los cambios y esto pues no renderiza nada porque no hay nada que renderizar
por ahora pero voy a poner aquí la url de la api por ahora y api url vale la api url y vamos a hacer
aquí un fetch aquí haríamos un fetch con la api url y le decimos vale entonces como el fetch nos devuelve una
promesa utilizamos den de la respuesta le decimos que tenemos que convertirla a un tipo json y una vez
que tenemos aquí la respuesta realmente ya formateada como json lo que vamos a hacer aquí es ver cómo nos devuelve
las imágenes aquí nos devuelve un data así que vamos a extraer primero data de response aquí tendríamos data
luego data es un array y nos pone aquí un montón de imágenes o sea que tendríamos aquí una a ver dentro
y tenemos imágenes vale aquí tendríamos todos los resultados tenemos un resultado esto sería es una pena
que esto no se pueda ver si podemos si lo pego aquí
vale esto queda aquí mejor formateado y creo que más entendible vale tenemos data es una rey entonces
podemos ver todas las imágenes que nos ha devuelto cada objeto es un array de objetos el data y cada
objeto es una imagen dentro de imágenes de una propiedad images porque tiene esa imagen en diferentes
calidades así que ahora veremos cuál es la que tenemos que utilizar y dentro de imágenes tiene una propiedad
que es el tamaño y dentro del tamaño tienes la url no veas va a ser interesante así que lo que vamos a hacer es
vamos a tener que transformar el array que queremos guardar así que en este caso vale hemos visto que es un array
así que data esto es un poco lo mismo data hacemos un map y por cada image lo que vamos a hacer es utilizar
el image y dentro de imágenes y dentro de imágenes hemos dicho que cada imagen tiene una propiedad llamada
imágenes y dentro de imágenes hemos dicho que tenemos a ver cuál podríamos fix it original la original igual es demasiado grande
vamos a poner este mismo por ejemplo si este mismo o este este tom size medium vamos a coger esta calidad
y de esta calidad lo que tenemos que acceder es a la url vale pues a la url entonces aquí tendríamos en gif ahora ya tendríamos
un array de gifs espero vamos a poner un consuelo rápido vamos a guardar los cambios y si vale y aquí tenemos
básicamente la rey de url vale en todas las url con todos los gifs teníamos 10 la app nos está devolviendo 10
pues hemos conseguido tener aquí todas las url todos los gifs así que ahora lo único que tenemos que hacer es
utilizar este set gifs que teníamos antes y lo que vamos a hacer es que este estado ahora tenga los gifs que hemos
encontrado en la api así que guardamos los cambios y pum aquí lo tenemos ya tenemos pandas rodando tenemos
un montón de pandas rodando así que hay gente en el chat que me comentaba oye utilizamos axios a ver realmente
podéis utilizar axios si queréis yo no lo recomiendo en este caso yo recomendaría siempre que podáis utilizar
cosas de la plataforma y en el caso de que tengáis la problemática que fech no está soportado en el navegador
donde queréis que funcione vuestra página pues lo que podéis hacer es utilizar un polyfill de fech hay
uno que es muy chiquitito que se llama un fech que es del creador de priak si habéis visto uno de mis
vídeos sabréis que es priak y que sólo son 500 bytes 500 500 bytes cabe en cualquier lado así que lo recomiendo
un montón yo recomiendo que siempre intentéis a no ser que tengáis una necesidad muy especial tiréis de
la plataforma vale estoy asumiendo que data será un array pero eso va a petarse por cualquier ración no es
un array donde debería manejar los ex cases si debería manejar esos ex cases pero bueno en este caso data en
este caso vemos aquí que es un array sí que podríamos meter aquí un montón de y también podríamos poner por supuesto
aquí un catch pero bueno nos estamos concentrando un poco en la aplicación os dejo para vosotros que os dediquéis
a mirar los ex cases vale y si queréis pues luego lo ponéis en los comentarios de cómo lo habéis solucionado
vosotros y todo esto vale aquí por ejemplo podríamos ponerle un valor por defecto por si beta viene and define la verdad
que no sabemos cómo cómo responderá si por ejemplo no tiene resultados si por ejemplo aquí en lugar de
buscar panda buscamos algo de verdad una cosa rara mira pues deita siempre es un array vacío así que en este
caso pues maravilloso no nos debería petar porque han hecho un buen trabajo y la api siempre data
siempre devuelve un array así que ya está bastante bien si os queréis quedar más tranquilos pues podéis
empezar a poner aquí un montón de comprobaciones a reis a reis de eta pues entonces hacemos todo esto eso ya os
lo dejo a vosotros para que os entretengáis pero bueno esto funcionaría bien y ya hemos comprobado si
es una rey o no es una rey si no pues nada os podéis aquí dedicar lo que queráis y más pero hasta aquí
no hasta aquí bien porque ya tenemos pues nuestra nuestra llamada además tenemos aquí un panda que está haciendo
está haciendo sus flexiones esto queda un poco raro aquí y no me gusta mucho y una buena práctica es evitar que
dentro de tus componentes de react metas está este tipo de llamadas siempre que podáis aunque sea podéis
esto esto tiene niveles de complejidad o sea podríamos utilizar esto sería lo más fácil no por ejemplo get give al
al menos tener un fichero que lo que vamos a hacer es que sólo haga exactamente esto no le pasamos esto
que teníamos aquí lo vamos a poner aquí es por default get esta función get gives o sea vamos a extraer un poco
la función que estábamos haciendo ahí de esta forma evitamos vamos a quitar este api url que esto sería lo más
simple esto sería la forma más simple de hacerlo a partir de aquí igual en otro vídeo más adelante
miraremos cómo hacer cómo cómo podemos mejorar esto porque ahora es la forma más simple posible ahora en
lugar de hacer todo esto que hacemos aquí ahora vamos a ver esto llamaríamos a get gives y una vez que tengamos
los gifs lo que haríamos es actualizar el estado ahora este get give lo importante es una maravilla este editor
por favor lo ha editado actual automáticamente me ha importado el archivo porque ha detectado que lo
necesito vale entonces aquí me está diciendo que esto no está importando no está exportando exacto
lo que queremos aquí tenemos que poner el reto porque queremos devolver lo que devuelve esto y este set give lo
vamos a hacer en la otra parte y esto lo que en realidad tiene que devolver es los gif así vale esto
si queréis lo podríais pasar a una sinca weight y como queráis pero bueno en este caso creo que se
entiende con las promesas así que ya está bien así guardamos los cambios y pues nada sigue funcionando
perfectamente podríamos hacer que este get give sea un poquito más inteligente si le posamos un
keyword no y ahora el keyword este api url que teníamos aquí por ejemplo este api url lo podríamos
pasar dentro vamos a extraer cosas vale vamos a extraer por ejemplo la pique la pique es mi apique
para utilizar esta este servicio de gif y lo vamos a poner aquí vale voy a dejar esto así luego está pique es
lo que utilizaríamos aquí dentro al menos para descentrar esto un poquito esto lo vamos a convertir en
template string porque así interpolamos en la pique y así pues tenemos siempre la pique ahora este api url
lo que vamos a hacer es moverlo dentro de la función aquí dentro y ahora en lugar de buscar siempre al panda
lo que vamos a hacer es utilizar la keyword que le estamos pasando aquí como parámetro y por defecto
pues si no le pasamos ninguna vamos a poner que sea un no sé que le podemos poner por poco le podemos
poner no se me ocurre nada que me ha gustado demasiado el el panda vamos a poner muerte de rica en muerte
vale a ver que hay algo aquí que no le ha gustado vale claro no le ha gustado porque ahora que no le
estamos pasando nada y aquí en cambio pues espera una keyword le podemos poner aquí el valor por defecto
que sea un objeto vacío y si no llega pues será muerte vale ya está o sea que por defecto ahora
estaba buscando mortis pero ahora por por fin podríamos pasarle aquí una keyword y decir que
busque por el rick por ejemplo guardar los cambios entonces buscaría cosas de rick o si en lugar de rick
pues podríamos cambiando matías caballero dice qué diferencia de poner el export cuando declaras la
función a ponerla afuera de la función al final del componente en realidad no hay ninguna en este caso
podríamos aquí este export default lo podríamos poner aquí y ya está en este caso no hay ningún tipo de
diferencia de hecho de que he guardado los cambios y sigue funcionando todo correctamente
el tema es si quieres hacer un export nombrado pero bueno en este caso sería exactamente lo mismo sólo que
ya venía así y ya está vale hasta aquí tenemos tenemos saber tenemos que estamos listando gifs que estamos
utilizando el efecto ahora lo que nos faltaría a lo mejor es mejorar nuestra aplicación por nuestra aplicación
ahora es como un solo componente y es un poco raro esto así que hay una cosa a ver a ver teníamos por
aquí te vaya tenía tenía la explorer este esto esto había puesto aquí panda que es que quiero ver un
momento cómo es la api para ver si tiene sentido que saquemos más información porque por ejemplo si
tenemos las imágenes pero no tenemos tendríamos like el title eso title y de vale pues vamos a sacar esa
información también o sea en el get give cuando hacemos este mapa aquí que sacamos la url de la
imagen lo que vamos a hacer no es sólo sacar la url de la imagen o sea vamos a sacar la url por un lado
aquí sacamos la url y vamos a sacar también el title y la idea era title id title y la idea vale y esto
está en la imagen o sea la imagen vale vamos a sacar las imágenes el title y la idea y dales imágenes sacamos
la url y lo que vamos a devolver aquí va a ser el title la idea y la url
vale así que ahora en lugar ahora claro no funciona porque tenemos que hacer un pequeño cambio aquí ahora
en lugar del single gif esto es single gif punto url si lo hemos hecho todo bien si vale lo hemos
hecho todo bien claro porque hasta ahora aquí lo único que hemos hecho de renderizar la imagen pero
vamos a hacer que esto renderice un poquito más un poquito más de información por ejemplo ahora
hemos dicho que como le estamos guardando en el array más información tenemos el title tenemos la url y
tenemos la idea pues aquí lo que podemos hacer por ejemplo es que tenemos el poner el title vamos a
poner aquí un h4 con el single single gif punto title y al menos que salga esto un poquito esto tiene
que hacer un reto que no se nos olvide el reto vale ya tenemos cada uno de los titles de los gif vale
está aquí bien además aquí podemos utilizar aquí me están un error de accesibilidad que me parece muy
bien así que vamos a poner que el title sea el alt perfecto y habíamos dicho también teníamos la idea
pues la idea la vamos a poner aquí delante antes del title y vamos a poner dos puntos bueno es un poco
raro un poco raro tenerlo ahí así que lo vamos a poner justo debajo con el small vale vale esto ahora
los estilos no están siendo no no es muy bonito dice a mí me da urticaria no ver el punto y coma sé
que ahora se lleva a no ponerlo pero me confunde demasiado no sea mira aquí hay puntos y comas que
los había dejado este punto y coma adiós punto y coma a ver no sé es que sinceramente a mí no me
gusta escribir mucho cuanto menos escriba mejor entonces si puedo evitar escribir puntos y coma
pues mejor así que nada espero que te acostumbres si no siempre puedes instalar peter y que te añada
todos los puntos y coma mientras escribes y ya está al final ahora que existe peter ya estas cosas no son
tan preocupantes vale entonces habíamos dicho que ahora tenemos toda esta información pero bueno esto queda
un poco raro no así que podríamos empezar a crear componentes uno de los componentes por supuesto
esta estructura a mí no me gusta mucho al menos hemos ahora tenemos services que está guay pues yo aquí
tendría components y en components empezaría a crear componentes uno podría ser gif y entonces en el gif este
tenemos que importar react desde react y aquí pues hacemos lo mismo export default función que le llamamos un
gif y vamos a ver qué es lo que vamos a renderizar pues aquí que estamos haciendo esto que queda un poco
con esto lo vamos a tener aquí en este en este componente y aquí esto que lo teníamos así este single gif que
estábamos pasándole ya no va a tener tanto sentido porque el title la idea y la url le va a llegar como
parámetro como prop a este componente así que ponemos title y de y url y ya está así pues nada queda un
poquito mejor y más separado de esta forma este gif que teníamos por aquí esto es lo que vamos a renderizar
vamos a poner que este gif le va a llegar el title la url y la id ahora podemos eliminar todo esto que
estamos haciendo aquí que era un poco y ahora lo dejamos así el tema aquí vamos a poner esto aquí es que
tenemos en el single gif tenemos el title la url por aquí y por aquí la idea vamos a ver si esto
funciona damos los cambios uy claro es que no hemos importado no hemos importado el componente
tenemos que decirle el componente queremos utilizar y está en components gif ahora guardamos los cambios y
esto funciona correctamente vamos a poner aquí programming para que cambie al menos y ver que esto funciona
correctamente un matrix está ahí con un quiz matrix que más que más que más te falta identificador
key que se usa en el map cierto y es que en react por eso he sacado al aire pero gracias por recordar
me lo había sacado la idea porque en react cuando hacemos un listado de elementos y de hecho seguramente
nos estará dando aquí un warning aquí vamos a ver esto es tan chiquitito vale si vamos a la consola
si soy capaz vale si vamos a la consola aquí podemos ver que nos está dando una advertencia no dice oye cada hijo en una lista tiene que tener una
key única una prop key única esto le sirve a react para identificar en una lista los elementos que está renderizando
y por lo tanto cuando lo eliminas evita volver a renderizarlo desde el principio y tal es como una optimización de performance que hace a funcionar funciona sin utilizarlo pero no funciona de la forma más óptima
tenemos que decirle que este elemento que estamos realizando en una lista tiene que tener una key así que le decimos single give punto id
tiene que ser la key tiene que ser única tienes un identificador único o sea que no podríamos poner por ejemplo poner un string que sea a tendría que ser único hay gente que utiliza el index pero el index no
el index no es muy fiable si utilizamos el index del array no es fiable porque el index puedes volver a utilizarlo para otro elemento por ejemplo este array si
cambiamos el estado y el array la key en el índice 0 tenemos otro gif pues seguramente puede ser que no se renderice correctamente así que siempre hay que utilizar una id única
vale siempre que se pueda una id única tampoco vale un math random no no hagáis esto por favor
si hagáis un math random cada vez que se renderice tendrá una aquí diferente y eso no tiene sentido tampoco tiene que ser una id que identifique
no tiene que ser un número vale que mucha gente que cree que tiene su número no tiene por qué es un número podríamos poner la url y funcionaría también
de hecho puede ser hasta un símbolo pero bueno eso ya son cosas un poco más avanzadas pero con la id ya somos felices vale
dicen por aquí podrías hacer el rest no para o sea el spread operator una opción que podríamos hacer es
aquí pasarle todos los todos las propios podríamos hacer así que sería decirle vale a gif pásale todas las propiedades que tenemos aquí en single
gif a mí personalmente esta no me termina de gustar normalmente no me no me gusta mucho a veces sí pero a veces la uso pero solo si
solo si es demasiado exagerado yo en este caso la que más me gustaría utilizar sería decir de este objeto que tenemos aquí sacó el title
yo era él o sea me aseguraría de que sólo le paso lo que realmente necesita entonces al extraer estas propiedades
ahora sí puedo al menos utilizarlo así y además ves visualmente lo que realmente estás pasándole al componente que uno nunca
sabe lo que en un objeto puedes tener y lo que puedes provocar y de esta forma es como que lo estamos cerrando un poquito un poquito
más además me gusta mucho ordenarlos alfabéticamente sé que es una chorrada pero a mí me ayuda entonces esta podría ser una
una opción podríamos llegar un nivel más y podríamos decir
podríamos decir que el gif este sea también a su vez un componente y es que en react todo puede ser un componente así que podríamos tener el list of gifs
vale o sea cuando renderizamos esta lista de componentes que
esto que hacemos este map pues también sacarlo un componente y de esta forma todo esto en lugar de hacer esto tenemos aquí list of gifs
y aquí le pasamos los gifs
ahora tenemos que crear este componente claro
así que vamos al list of gifs
y aquí pues nada importamos react
desde react
voy a hacer esto quitar esto
export default function
list of gifs
y hemos dicho que le llega el parámetro
de los gifs
y ahora hacemos un return y esto es
lo que tiene que devolver
todo esto de esta forma
ahora aquí en este componente
es donde necesitamos el propio gif
ahora esto voy a intentarlo bien
a mi me gustan las cosas bien intentadas
vale perfecto
ahora aquí en la app
vamos a utilizar el list of gifs
en lugar de utilizar
list of gifs
vale
en lugar de utilizar el gif
si guardamos los cambios
y aquí pues le pongo
no sé
vamos a ver
chile
que decían que me había olvidado de chile
pues bienvenido a chile
vale pues ya está funcionando correctamente
wow
esto da
te puede dar una cosa
mirando eso
entonces
de esta forma
ya estamos viendo
que nuestra aplicación
cada vez tiene menos
digamos menos información
si que tiene esta lógica
que le hemos dejado aquí
aunque este use effect
lo podríamos mover
perfectamente dentro del list of gifs
y todavía quedaría mucho más limpio
pero bueno
por ahora lo vamos a dejar así
o bueno
vamos a moverlo
si si si
me gusta me gusta
muy bien
buena idea
Miguel Ángel
muy bien
vamos a moverlo aquí
para que al final
quede la app
quede bastante limpia
vamos a mover el use effect
así que lo que estábamos haciendo aquí
con este state y todo
vamos a
el state también lo vamos a mover
que sea list of gifs
realmente
el que tiene que hacer
todo
todo eso
vale
y así la app
la vamos a dejar
vamos
limpísima
la app no va a saber
absolutamente nada
lo que pasa es que ahora
este list of gifs
en lugar de pasarle los gifs
como eso ahora es
un estado
lo que vamos a tenerle que decir
es la keyword
que queremos utilizar
a la hora
de buscar
de esta forma
nos va a quedar
nos va a quedar una cosa
y vamos a ver
si si si si
muy bien
ahora voy a explicar
una cosa
a ver
centro aquí
pam
yo
bien
porque vamos a ver
el ejemplo del use effect
y esto creo que está bastante bien
vale
habíamos dicho lo que necesitamos
una dependencia del use effect
con esto que estamos montando
lo vamos a ver
así que
voy a voy a moverme
voy a moverme aquí
aquí debajo
si aquí
vale
y vamos a ver todo esto
vamos a vamos a terminar
de arreglar esto
pero vamos a poder ver
el error del linter
de la dependencia del use effect
y cómo arreglarlo
así que
vamos a terminar de arreglar la app
la app la vamos a dejar limpísima
porque no queremos que tenga
ninguna referencia
ningún state
ningún efecto ni nada
list of gif
hemos dicho que necesita
el keyword
keyword
vale
y por ahora vamos a poner
pues que sea
hemos dicho que había gente de ecuador
nos han dicho
que había gente de ecuador
pues lo vamos a poner
ya no necesitamos
el get gif
aquí
solo necesitamos esto
a ver
type element
vale
y aquí
tenemos que devolver
ah
aquí hay otro
otro tema
vamos a importar el get gif
vale
ya hemos dejado el use effect
ahí lo arregla solo
que bueno
aquí guardando
vale
muy bien
entonces
aquí hay diferentes cosas
que son muy interesantes
es que me lo arregla
vale
ahora en la aplicación
tenemos el componente
list of gifs
que le tenemos que pasar
a una prop keyword
y a esto
nos va a hacer un cambio
esto
la keyword
nos va a hacer el cambio
o sea
nos va a hacer el cambio
nos va a hacer una llamada
a la API
con esta keyword
en este caso es ecuador
vale
entonces
vamos a ver que hace
el list of gifs
le llega la prop
tiene un estado inicial
que es un array vacío
o sea
no tiene resultados al principio
y hacemos un efecto
de forma que la primera vez
que se renderice
hacemos una llamada a la API
con esa keyword
que le hemos pasado
por parámetro
¿no?
entonces
¿qué es esta keyword?
¿qué es esta keyword?
es una dependencia
del efecto
ahí está
ahí está
la dependencia del efecto
de forma que
nosotros lo que queremos
es que este
este
este componente
podríamos dejarlo así
o sea
no estaría mal del todo
es un poco raro
pero
podríamos dejarlo así
podríamos decir
bueno
solo queremos que te renderices una vez
es raro
¿por qué?
porque normalmente
lo que nos gustaría
es que
cada vez
que se vuelva
se cambie
la prop que le llega
que se vuelva a renderizar
¿vale?
esto
este
aquí ya nos está diciendo
el
el inter
nos está diciendo
el react hook
el use effect
necesita
una dependencia keyword
porque la estás utilizando dentro
claro
aquí dentro la tenemos
¿qué significa?
que este efecto
tal y como está ahora
solo se va a renderizar
la primera vez
pero claro
si dentro estás utilizando keyword
no prefieres
que cada vez que actualices la keyword
se vuelva a ejecutar este efecto
que tiene sentido
entonces
por ahora
voy a hacer una cosa muy chunga
que es desactivarlo
¿vale?
voy a desactivar esta
esta opción
y lo que vamos a hacer aquí
rápidamente
para ver este ejemplo
es tener
la keyword como estado
set keyword
¿vale?
vamos a tener aquí
y por defecto
la keyword va a ser
panda
vamos a poner que sea panda
entonces
vamos a tener otra vez
nuestro botón maravilloso
que es muy bestia
que lo que va a hacer
es cambiar la keyword
y la keyword
que le va a hacer
es
vamos a poner mapache
por ejemplo
¿vale?
cambiar keyword
esto lo voy a poner
arriba del todo
en lugar de
debajo del list of gif
porque si no
esto no se va a ver muy bien
¿vale?
use state
lo tenemos que importar
de aquí
use state
importamos
guardamos los cambios
perfecto
bueno aquí salen todos los gif
no es el mejor
el mejor estilo del mundo
pero bueno
sale
ay sale Ecuador
porque hemos puesto aquí Ecuador
es cierto
tenemos que utilizar el
el estado que hemos creado
aquí ¿vale?
o sea estamos creando este estado
tenemos que utilizarlo
¿vale?
guardamos los cambios
el estado inicial
es panda
entonces yo ahora
cuando cambie la keyword
el estado de la keyword
o sea tenemos
tenemos este state keyword
aquí ¿no?
vale pues lo que queremos
es que cambie a mapache
debería cambiar a mapache
por lo tanto deberíamos cargar
gif de mapache
voy a cambiar
y cuando le hago clic
no funciona
no funciona
¿por qué es esto?
porque hemos puesto
que el efecto
no tiene dependencias
lo hemos forzado ¿vale?
esto lo hemos forzado bastante
pero bueno
hemos puesto que no tiene dependencias
y al no tener dependencias
esto se ejecuta solo
en el primer renderizado
para solucionar esto
vamos a quitar
el slim disable line este
ya nos está avisando
oye aquí falta una dependencia
vale le vamos a decir
la dependencia de este efecto
es keyword
de forma que cada vez
que cambie este keyword
me vuelves a ejecutar este efecto
guardamos los cambios
teníamos panda ¿vale?
cuando le haga clic aquí
vamos a cambiar el estado
de la keyword
de panda a mapache
le damos
y ahí tenemos mapache
se ha vuelto a ejecutar
el efecto
del list of give
lo mejor de esto
es que el problema
que habíamos visto antes
el problema que habíamos visto antes
es que entraba
en un loop infinito
pero claro
aquí
solo cuando
el valor de keyword cambie
volverá
a renderizar esto
volverá a ejecutar el efecto
eso sería lo correcto
volverá a ejecutar el efecto
si yo le vuelvo a dar
a cambiar keyword
como la keyword no cambia
no vuelve a hacer
este efecto
no lo vuelve a ejecutar
y por lo tanto
no entramos
en ese loop
que es infinito
bueno me alegro un montón
que hemos podido ver
este ejemplito
así que eso está
muy bien
vale
vamos a ver
a ver cuánto tiempo
llevamos
llevamos una horita
y había prometido
que íbamos a ver
algo de router
y como no quiero
que se alargue mucho
y será un ejemplo
bastante rápido
vamos a
vamos a
vamos a
vamos a hacerlo
el router
¿vale?
para
para tener nuestra aplicación
un poquito más
con cara y ojos
que a lo mejor
en otro videito
podríamos hacer
tener el input
para hacer las búsquedas
y tal
pero bueno
por ahora
quería más que nada
que vieseis
cómo crear
toda la aplicación
y cómo
un poco estructurar
las carpetas
al menos para que podáis
empezar
que creo que ya es interesante
así que voy a quitar
todo esto que había puesto
del botón
hay otro error
hay otro semi error
aquí
¿vale?
sí
keyword
vamos a poner
que esto
sea
panda
bueno
pero al menos
ya hemos visto
que está preparado
para buscar cualquier cosa
me parto con este panda
que está haciendo flexiones
o sea
es demasiado
hace más flexiones que yo
ha hecho más flexiones que yo
en la vida
paginación
me lo apunto
para otro vídeo
¿vale?
porque me parece
interesante
vale
entonces
¿qué quería?
sí
lo del router
lo del router
ahora tenemos aquí
el listo gif
entonces lo que me gustaría
aunque es un poco raro
pero lo que me gustaría
es que pudiera darle
un clic
a cada una de las imágenes
de hecho
voy a adecentar
un poco
los gif
hemos dicho
que esto tenía
un gif.css
vamos a ponerle aquí
un class name
vamos a poner aquí
gif
y pues en el punto gif
vamos a ver
con un borde
así
borde radius
6 píxeles
vamos a ver aquí
y aquí
para que veamos esto
tenemos que importar
estos estilos
del gif.css
vale
bueno
más o menos
más o menos
ya
display flex
el quiz al 100%
vale
vamos a ponerle
un poquito
de margen
también
que esto respire
el margen
del body
se lo vamos a poner aquí
vamos a poner
que esto tenga
16 píxeles
también
¡ay no!
vamos a poner un padding
si no
claro es que
esto tiene que ir dentro
para que se me quede
el color
que es verdad
que el color
lo habíamos puesto aquí
pues lo vamos a dejar aquí
al menos
al menos un poquito
que respire un poco
la cosa
que si no
es un poco
raro
el flex dirección
dirección
column
vale
claro
ahora la imagen
image
object
fit
contain
vale
más o menos
más o menos
sé que no es el mejor
mejor estilo
que puedo escribir
en dos segundos
pero bueno
más o menos
encima he perdido el otro
bueno
no pasa nada
más o menos ya se ve
porque todo esto
ahora queremos que sea clicable
cada una de estas cartitas
queremos que sea clicable
vale
entonces ahora
al igual de ser un div
vamos a hacer que sea
un anchor
y este anchor
por ahora
vamos a hacer que tenga
la id
así que esto
vamos a hacer que
sea
la id
y le ponemos el hash
así que ahora
cada vez que cliquemos
en uno
a ver
gif
gif
vale
cada vez que cliquemos
en uno de estos
voy a ponerlo en blanco
porque aquí no se ven
no se ven los
a ver
ahí
ahí está
text decoration
vale
cada vez que hagamos clic
en uno de estos
vale
pues puedes ver aquí
aquí arriba
que se está cambiando
¿no?
que
no se ve muy claro
pero bueno
se está cambiando
cada una de estas ideas
entonces vamos a instalar
este paquete
que a mí personalmente
me gusta muchísimo
porque es súper chiquitito
que
que
que nos lo va
nos lo va
a solucionar rápidamente
¿cómo haces?
vale
me preguntan por aquí
porfa dejo el vídeo
si no os preocupéis
cuando termine el directo
vamos a tener el vídeo
en mi canal de youtube
que te recomiendo
que te suscribas
para no perderte ninguno
¿qué más?
¿qué más dicen por aquí?
¿qué día hago directos?
normalmente los viernes
en hora española
8 y cuarto
y dependiendo del país
pues la hora que sea
pero lo suelo poner en twitter
en instagram
y en facebook
así que
suscríbete a cualquiera
de esos canales
o en youtube
que te avisa
y te lo va a decir
¿qué más?
¿qué más?
yo borraría la idea del vídeo
de la vista
sí
eso en realidad
lo había visto
lo había puesto solo
para que vea
viésemos visualmente
que lo teníamos
pero sí
vamos a quitarlo
va
ya está
pum
ya no tenéis idea del vídeo
vale
pues entonces
tenemos guter
guter es una alternativa
a react router dom
y todos
y cualquier dependencia
que queráis para utilizar
para hacer routers
y lo que tiene interesante
aparte que es compatible
con PRIAC
es que es muy chiquitito
es muy pequeño
aquí lo puedes ver
que no tiene dependencias
eso es lo primero
lo segundo
que solo ocupa
un poco más de un K
en cambio
Real Router
ahora mismo ocupa 16 K
y que es un poquito
más sencillo de utilizar
porque no necesitas
poner como top level
o sea no necesitas
envolver tu aplicación
con el componente router
podríamos hablar un montón
de cómo hacer routers
y tal
voy a hacerlo un poco
bastante aligerado
para que al menos lo veamos
y para añadir la dependencia
voy a ir aquí
a mi terminal
y voy a hacer
npm install guter
así que esto
debería instalar la dependencia
debería tardar poquísimo
porque como ocupa tan poco
la API es súper similar
a Real Router
entonces lo que aprendamos
lo que veamos aquí
te va a servir
para Real Router
vale
pero bueno
a mí personalmente me gusta
si no tengo necesidad
pues ya me gusta utilizar
este tipo de librerías
que son súper livianas
y que no tienen
ningún tipo de dependencia
no dependemos
no dependemos
de tantas cosas
otra sería
Rich Router
pero ahora se ha fusionado
con Real Router
uy se ha quedado
pues mira
tanto que digo
que no debería tardar nada
y está tardando
un montón
a ver a ver
me ha dejado
a ver si se ha caído
en pm
que eso también podría pasar
y entonces me ha dejado
aquí todo tirado
a ver
si puede ser
resolviendo
lottestranios
bueno
a ver
a ver a ver
bueno
vamos a dejarle
un rato
a ver si tiene
npm install
ay no será
que no tiene
ni siquiera
si hombre
si debe tener
el paquete de npm
a ver
npm gooter
me sorprende
ah si si que tiene
no lo que
es npm
que no va muy fino
que fuerte
bueno bueno
me ha tardado ahí
incluso
si si no
me parece que no
no va muy bien
npm
bueno pues igual
no lo podemos utilizar
a ver
como lo podríamos
hacer esto
bueno
a las malas
lo que podemos hacer
como es tan chiquitita
es descargarnosla
y la metemos ahí
directamente
vale
no es lo ideal
pero es que veo
que npm
va muy muy lento
así que por si acaso
vamos a
vamos a ver
a ver si está todo
en un solo archivo
porque a lo mejor
react devs
vale
pues nada
vamos a esperar
un poquito
a ver si
wow
o igual es que si que tiene
un montón de dependencias
pero solo cuando lo instalas
porque si
vamos aquí al paquete
si vamos al package
package
podemos ver
que las dependencias
que tiene
o sea
no debería tener
dependencies
es que no
no tiene
no tiene dependencias
solo tiene de desarrollo
o sea que me parece
que es un tema
más de npm
en si mismo
que está tardando
bastante
en poner
en ejecutar
bueno lo voy a dejar
ahí un ratito
a ver
mientras leo
vuestros comentarios
estábamos todos
descargándolo a la vez
claro pues dejad
dejad de descargarlo
dejadme primero
descargarlo a mi
y luego lo descarguéis
todos vosotros
error lens
es la extensión
exacto
error lens
es la extensión
que utilizo
en Visual Studio Code
para el tema
de que me salgan
los errores
del linter
en la misma línea
que más
ay claro
ya sé lo que está pasando
veis
ya sé lo que estaba pasando
porque estaba tardando tanto
ya sé lo que ha pasado
ya sé lo que ha pasado
lo que ha pasado
es que cuando hemos creado
el proyecto
es que de todo se aprende
cuando hemos creado
el proyecto
ha utilizado yarn
entonces
si tú en un proyecto
de que ha hecho
la instalación yarn
intentas utilizar
npm
y hacerse npm install
claro
lo que npm dice es
yo no conozco este proyecto
pues voy a instalar
todas las dependencias
por eso estaba tardando tanto
porque está intentando instalar
todas las dependencias
del proyecto otra vez
ay
pues menos mal
que me he dado cuenta
porque si no
esto se vuelve
se pone y se queda ahí
un buen rato
voy a ver si no me ha
machacado las dependencias
al menos
vale
bueno parece que funciona
vale
si no me la da
vale pues eso es lo que estaba pasando
vale
que lo tengáis en cuenta
no pasa nada
podríamos haber dejado
el npm install funcionar
hubiera reinstalado
todas las dependencias
del proyecto
no solo la que queríamos instalar
y ya está
eso es lo que ha pasado
no era que lo estés
instalando todos
vale
me había asustado
vale
¿cómo funciona
Wooter?
vamos a utilizar Wooter
y a ver
yarn mejor que npm
sí
sí
lo que pasa es que
hay veces que yarn
ay
a mí me gusta mucho yarn
pero por ejemplo
ahora que han sacado
la versión 2
ya ha roto compatibilidad
con algunas cosas
y algunos paquetes
no funcionan
está bien cuando
cuando todos los paquetes
funcionan
y va bastante rápido
pero hay veces
que hay algunos paquetes
que petan
y hombre
es bastante problemático
vale
pues vamos a importar
esto
vamos a importar
el link
y el root
de Wooter
y vamos a ver
un poco
qué significa cada uno
bueno
vamos a importarlos
aquí en la app
en la app
vale
en la app
bueno el link
en realidad no lo necesitamos
el root
sirve para de una forma
declarativa
decir qué rutas
tiene nuestra aplicación
así que
lo que vamos a decirle aquí
es que cuando entremos
en una ruta
que tenga un path
que sea
barra gif
barra
y tengamos un keyword
en esa url
entonces
el componente
que vamos a renderizar
sea
el list
of
gifs
esto es lo que vamos a hacer
vamos a guardar
los cambios
voy a poner esto
un poquito más
esto lo voy a poner aquí
así
por ahora vamos a dejar
a este component list
of gif
vamos a ver
el root
params
vale
una forma
que es bastante interesante
que se puede utilizar
esto también
claro
porque aquí no
no lo utiliza directamente
así
puedes utilizarlo
uno
con children
pones la ruta
y le dices
lo que tiene que renderizar
cuando estás en esta ruta
otra
es básicamente
le dices el path
y luego ejecutas una función
donde tienes los parámetros
que esto es bastante interesante
y esta que es la que queremos utilizar nosotros
es decir
el componente que tiene que renderizar
vale
pues esta es la que tenemos que hacer
vale
aquí me está dando un error
y antes me está dando otro error
y tal
y este error
es porque
en el list of gifs
aquí estamos devolviendo una array
esto no le gusta mucho a React
a React
le gusta bastante más
el tema de
de que sean componentes
o tal
entonces
aquí podríamos solucionarlo
de diferentes maneras
uno
le ponemos el dip
un dip
y lo de dentro
lo renderizamos
ahí
o sea le decimos
esto que está renderizando aquí
pues lo renderizas
dentro del dip
esto le va a gustar más
y va a dejar de darnos el coñazo
con ese
con ese warning
vale
hasta aquí
o podríamos utilizar
esto
que es utilizar un fragment
así que guardamos los cambios
bueno ahora no
no funciona
tendremos que ver
por qué
porque debe haber otra cosita
pero al menos esto
le gustaría un poco más
podemos dejar un dip
que me parece un poco más limpio
vale
esto sigue
element
is not as enabled
to dotar
bla bla bla
a ver listo
lo tenemos aquí
aquí tenemos el export default
aquí estamos devolviendo esto
esto parecía que tal
vamos a poner aquí
aquí
up
guardamos los cambios
vale
ahora nuestra aplicación funciona
¿por qué no funciona?
¿por qué parece que no funciona?
en realidad
no funciona
porque no hay ninguna ruta
que ahora mismo
esté macheando
o sea
nuestra aplicación
si miramos aquí la url
ahora estamos aquí
pero esta aplicación
o sea
esta ruta ahora
no debería renderizar nada
porque le hemos dicho
que la ruta donde tiene que renderizar
es
gif
barra
y luego tendríamos el parámetro
con el dos puntos keyword
hacemos que este keyword
sea un parámetro dinámico
entonces
lo que tendríamos que hacer
es cambiar
aquí
y decir
vale pues aquí
vas a gif
panda
y aquí sí
bueno
ahora veremos esto
aquí sí
que debería funcionar
y nos debería buscar el panda
¿por qué no busca el panda?
vale
pues vamos a ver
qué es lo que está pasando aquí
si miramos aquí las keywords
vamos a mirar todas las props
que le llegan a este componente
vamos a poner aquí props
vamos a poner un console.log
a saco
de las props
y
claro
ahora nos dice
vamos a poner una constante keyword
por ahora
que sea un string vacío
vale
estamos aquí
y vamos a ver
qué tenemos en las props
en las props
ahora no nos llega el keyword directamente
sino que nos llega un objeto params
que tiene todos los parámetros
que
de los que ha encontrado
en la url
como nosotros le habíamos dicho
aquí
en la app.js
le habíamos dicho
que teníamos este parámetro keyword
vale
teníamos este parámetro keyword
este parámetro keyword
es este panda
y eso nos lo deja en el objeto params
entonces aquí
en params
tendríamos
o sea en las props
tendríamos params
y dentro de params
es donde tendríamos
la keyword
así que hacemos así
y ahora sí
tenemos
en keyword
el parámetro de la url
ahora si aquí ponemos
rick
pues tendría
que buscar rick
morty
argentina también
vale
o sea que
y también teníamos gente
de perú
pues de perú
teníamos gente de méxico
también
teníamos gente
de barcelona
vale
pues ya tenemos la url
esto ya funciona perfectamente
y está bastante bien
entonces
qué podríamos hacer
claro
si yo ahora voy a la raíz
de mi proyecto
esto no funciona muy bien
es un poco
es un poco rollo
¿no?
o sea sale app
y ya está
no tiene mucho sentido
podríamos hacer
es
podríamos hacer un montón de cosas
pero una de ellas
sería tener aquí
un href
que me enviase
a los sitios que quiero
por ejemplo
gif de pandas
vale
pues gif de pandas
¿qué más?
podríamos poner
gif de ecuador
y gif de chile
vale
entonces tenemos estos enlaces
que no se ven absolutamente
en nada
pero que vamos a solucionar
rápidamente
color
09f
font size
24 píxeles
vale
un poquito más
un poquito más
vale
entonces justo
justo encima mío
aquí
aquí justo encima mío
tenemos los enlaces
¿no?
gif de panda
gif de ecuador
gif de chile
y yo si doy un clic
pues me lleva perfectamente
piro
piro
cuidado
me dice alguien
no te olvides de colombia
venga
no me olvido de colombia
no me olvido de colombia
colombia
no me olvido de colombia
no me olvido
¿qué más?
vale
pues tenemos
ay
pues he puesto colombia
y ha petado todo
vale
ahora
colombia
ecuador
chile
vale
entonces
esto funciona
yo le doy gif de colombia
y me lleva a esa página
bueno me lleva a los de
claro no le cambia
vamos a poner colombia
vamos a poner aquí ecuador
vamos a poner aquí chile
para que la url
que a la que nos lleva
sea la correcta
¿no?
colombia
ecuador
y chile
vale perfecto
entonces
esto funciona
pero si nos fijamos
no está funcionando
exactamente bien
no estamos haciendo
una single page application
¿por qué?
vamos aquí a la
a la home
y yo
creo que sí que se ve
incluso con mi vídeo
claro
¿qué pasa?
se está refrescando
toda la página
si yo ahora me voy
a colombia
gif de colombia
pum
ha refrescado
toda la página
y eso
y se ha tenido que descargar
todos los estáticos
otra vez
¿no?
no queremos eso
no queremos eso
no queremos que cada vez
que cambiamos de página
haga un refresco
¿no?
esto es lo que queremos evitar
¿para qué estamos utilizando react?
¿no?
queremos cosas buenas
entonces
lo único que tenemos que hacer
es importar link
que es el que había dicho
que es el componente
que nos proporciona
booter
para hacer enlaces
que funcionen
por el history.push
o sea que lo que hagan
es utilizar el history
del navegador
sin refrescar la página
actualizará el enlace
el router de booter
hará match
y cambiará el componente
que tiene que renderizar
y lo hará
sin ningún tipo de recarga
así que lo único
que tenemos que hacer
es
todas las as
que habíamos utilizado
por aquí
¿no?
teníamos este
teníamos este
y teníamos este
lo cambiamos
por el link
y en lugar de tener
un href
tenemos que decirle
tú
tú
¿hacia dónde
tiene que ir?
entonces le decimos
este link
va a este path
gif Colombia
vale
entonces ahora
si le damos a gif Colombia
y de hecho
se nota
se nota que no se refresca
o sea hemos hecho
una single page application
un momentito
así que
vamos a ver
ahora en el network
si yo me voy
a la raíz
de nuestro proyecto
a la raíz
vale
a la raíz del proyecto
ahora es normal
la primera vez que entra
así que recarga
pero si me voy a gif de Colombia
y le doy click
ha cargado todos los gif
pero no ha vuelto
a refrescar
toda la página
que es lo que queríamos
justamente evitar
gif de Ecuador
pues de hecho
se ve que no da ningún salto
es mucho más
se está cambiando
la url
¿no?
y no está haciendo
ningún salto
y con esto
ya tendríamos
una single page application
una pequeña aplicación
con algo
de buenas prácticas
a ver
de forma un poquito
chiquitita
pero con buenas prácticas
que nos ha permitido
pues rápidamente
empezarla
así que
a partir de aquí
te animo
y te reto
a que por ejemplo
añadas
una ruta
que sea para el detalle
¿no?
que yo al darle un clic aquí
a este gif
pues pueda entrar
al detalle
¿no?
que cuando haga clic
entra al detalle
y vea información
de ese gif
y que al tener una url
que funciona
pues que la pueda compartir
con todos mis amigos
esto es importante
¿vale?
porque ahora
esta ruta
que tenemos aquí
de gif Colombia
si yo
me voy a un tab
y entro directamente
el router directamente
ya entra aquí
¿vale?
aunque lo está haciendo
todo en el cliente
pero lo interesante
es que esta url
ya responde
con el contenido
que realmente nos interesa
así que
no está nada mal
me parece a mí
para ver cuánto tiempo
hemos estado
una hora y media
bueno
no está mal
una hora y media
pues esto
no os preocupéis
a los que
se está llegando ahora
porque
el vídeo que hemos hecho
todo el vídeo
se va a quedar
en mi canal de YouTube
que te animo
que te suscribas
que le des like
a todos los vídeos
si te gustan
porque esto me ayuda
me anima
me pone contento
y cuando estoy contento
hago vídeos
y si hago vídeos
pues todos
estamos contentos
entonces
darle like
suscribiros al canal
compartirlo con gente
cuanto más seamos
pues mejor
más contenido podremos hacer
y
y dándome ideas
para hacer vídeos
a veces
me dais unas ideas
muy complicadas
pero
que me podéis ir dando ideas
de oye mira
hiciste este
el de real router
pues me gustaría
que hicieses exactamente
lo mismo
con otro router
o
qué pasaría
si aquí
añadíamos esto
o por ejemplo
una cosa que me gustaría
que sería arreglarle
un poco los estilos
y a lo mejor
añadirle test
y esto es una cosa
que tenemos pendiente
y seguramente
haremos un
o un live
o algún vídeo
sobre esto
así que
que tal
esto sirve para un loading
div
mientras se renderiza
me dice reverse
div
podríamos hacer un loading
súper sencillo
la verdad es que
en el get give este
que habíamos este
teníamos esto
a ver
si quitamos esto aquí
podríamos tener
un estado
que sea
use state
vamos a poner esto
use state
del loading
vale
lo que hacemos es
un use state
que el valor inicial
es false
y tenemos loading
que sería el valor
set loading
para actualizarlo
ay esto
perdón
esto no estaría aquí
esto es el servicio
esto no lo haríamos aquí
esto lo haríamos
en el list of gif
vale
list of gif
aquí
aquí si tendríamos
el loading
set loading
entonces
en el efecto
antes de llamar al servicio
pues lo que podríamos hacer
es poner que
set loading
a true
y una vez que tuviésemos
la respuesta de la API
con los gifs
pues aquí ya
podríamos decirle
que tenemos que dejar
de cargar
a false
entonces por defectos
false
pero antes de empezar
la llamada a los gif
lo ponemos a true
y una vez que tenemos
la respuesta
lo pasamos a false
y de esta forma
podríamos hacer algo
tan interesante
como aquí
pues poner
vamos a poner aquí
esto
y vamos a poner
si está cargando
vamos a devolver
esto
y aquí vamos a utilizar
esto
que bueno
es un poco
ajá
bueno
lo dejamos así
va a ser muy rápido
¿no?
o sea
se ve muy muy muy rápido
pero si ponemos
al nick wall aquí
que esté
slow 3G
pues deberíamos
¿veis?
bueno
se ve muy chiquitito
pero podríamos
tendríamos una página
de cargando
súper rápido
o sea
lo habríamos hecho
en un momentito
voy a poner aquí
los estilos
rápidamente
80 píxeles
bueno
ahí se ve un poco
¿no?
si me voy a otra página
de ecuador
bueno pues ahí
cargando
¿no?
obviamente no es lo más bonito
del mundo
pero se puede hacer
muy fácilmente
tal y como lo he dejado
si está cargando
lo que devolvemos
es cargando
y si no
y si esto es false
pues seguirá el código
y ejecutará
la lista de elementos
con todos los GIF
muchísimas gracias crack
te ganaste un suscriptor
me hizo de Pedro
pues muchas gracias a ti
te agradezco
la confianza
y que te vengas
¿existe algún hook
para agrupar los user states
que tendrá el componente?
es una pregunta
algo alocada
lo sé
a ver
en realidad
es recomendable
separar estados
que tengan sentido
por sí mismos
o sea
en GIF
ya tenemos un array
por lo tanto
ahí ya hay cosas
que se están agrupando
pero
nada te impide
que
en el estado
guardes un objeto
por ejemplo
aquí podríamos poner
un nombre más genérico
podríamos poner
bueno
vamos a utilizar este de GIF
¿vale?
vamos a utilizar este ejemplo
en lugar de tener
el loading
podríamos decir
que el estado inicial
del GIF
de GIF
sea un objeto
donde tengamos
el loading
que es false
y el results
que sea un array vacío
¿vale?
entonces
voy a hacer esto
más chiquitito
para que lo veamos
ahí
ahí está
vale
entonces
ahora que tenemos
este estado
claro
ahora hay un montón
de errores
porque teníamos
justamente
lo que
como estaba el estado
antes
podríamos modificar
todo esto
de forma que
este loading
viniese de GIF
.loading
este GIF
.results
esto por un lado
y ahora
a la hora
de actualizarlo
podríamos decirle
que esto sea
setGIF
y aquí le pondríamos
loading
esto sería true
y los results
viniesen de GIF
.results
o sea
se quedase
lo que ya teníamos antes
ahora
aquí en lugar
de hacer
estos dos
estas dos actualizaciones
del estado
lo haríamos en una sola
le llamamos
setGIF
donde
tendríamos el loading
que pasa a FALSE
y los resultados
que son los GIF
exactamente
claro
el problema de esto
es que además
claro
aquí ahora
se va a hacer
este GIF
.results
lo necesitamos
para la
como dependencia
porque tenemos que pasarlo
para esto
solucionarlo
podríamos hacer
recuperar de aquí
el estado
bueno
el GIF
o actual
actual GIF
en lugar de tener
esto aquí
esto lo eliminamos
y al actualizar
el estado
podemos pasarle
una función
que nos deja
como parámetro
el estado actual
así que
a la hora
de crear
el nuevo estado
podríamos utilizarlo aquí
y ya lo tendríamos
lo que había pasado
el error
era básicamente
que se estaba
volviendo un poco loco
por lo que comentaba
antes del loop infinito
al tener
obligarle
que la dependencia
fuese los resultados
en sí mismos
los resultados
siempre cambiaban
entonces
se volvía loco
pero podíamos hacer esto
le pasamos
una función
a este setGIF
que nos devuelve
como parámetro
el valor
de ese momento
del estado
y le pasamos
un objeto
de esta forma
ahora solo tenemos
un estado
pero
no me mencionéis
cuando habléis
de que hacéis
estas cosas
en vuestras casas
a ver
hay veces
que tiene sentido
pero
si puedes evitar
tener
tampoco tiene sentido
tener 15 estados
pero tampoco
tengas uno
agrupándolo todo
para volverte loco
porque no puede ser
buena idea
ahí entraríamos
en temas
de utilizar
ureducer
que puede ser
interesante
y eso lo podemos
ver en otro
en otro vídeo
también
¿qué opinas
sobre pasar
por props
un callback?
pues no solo
me parece bien
sino que a veces
me parece necesario
de manera que
puedan montar
botones
como componente
que actúan
según el callback
que se le pasa
sí
pues perfecto
pues puede tener
todo sentido
en el mundo
así que genial
respecto a organización
de carpetas
¿cómo haces
para separar
entre componentes
y páginas?
¿haces diferencia
entre ellos?
sí
solo hace
página
diferencia entre ellos
en este caso
no lo he hecho
no me ha dado tiempo
tampoco
tenemos muy pocos
componentes
igual si
creo que es un proyecto
que es bonito
y a lo mejor
podríamos continuar
con él
pero yo haría
pages por un lado
components por otro
y luego services
y en services
podríamos utilizar
domain driving design
podríamos utilizar
al menos separación
por capas
podríamos hacer
diferentes cosas
pero yo tendría
seguramente
como mínimo así
componentes
páginas
y servicios
como mínimo
¿vale?
¿qué tema
utilizas de Visual Studio?
utilizo uno
que es el mejor
del mundo
y el más antiguo
que es OneDark
OneDark Pro
que está muy bien
y que creo que
tiene una extensión
incluso
sí
OneDark
OneDark Pro
este es el que tengo
este
muy guay
a mí me encanta
lo estoy utilizando
desde siempre
desde siempre
utilizo siempre el mismo
¿estaría bien un vídeo
del Redax
para aplicaciones grandes?
sí
no te voy a engañar
no creo que hagamos
un vídeo de Redax
porque no soy muy amante
de Redax
pero sí
que haremos uno
del contexto
y de cómo utilizar
RedUser
y cómo podemos
hacer un pseudo Redax
con eso
eso sí que puede ser
no me
no sé
¿cómo hacer el build
sin que React Scripts
te genere los Service Workers?
pues creo que puedes eliminar
podemos hacer aquí
en el punto de entrada
de nuestra aplicación
pues quitamos el Service Workers
quitamos los Service Workers
y en el index
también deberías quitar
el Service Workers
y ya está
además
lo hemos dejado
por aquí
pero
una vez que tenemos
ya todo esto
aquí en nuestro proyecto
podríamos hacer
un MPM
bueno
a ver que
ay
¿cuáles son los scripts
que tenemos para ejecutar?
vale
era build
pues podemos hacer
un MPM run build
y aquí esto
nos ejecutaría
la build
nos
crearía
los estáticos
de nuestro proyecto
y estos estáticos
ya los podríamos subir
a diferentes servicios
además está muy bien
porque te dice lo que nos ocupa
el proyecto ahora mismo
y ya pues podríamos
utilizarlos
de hecho nos lo ha dejado
en la carpeta build
y aquí tenemos los estáticos
todos los estáticos
pues ahí
eso lo subiríamos
a un servidor
que también es una cosa
que podríamos mirar
en algún sitio
algún día
y ver cómo lo podríamos hacer
¿harás algún vídeo
sobre React Native?
sí
y espero
que lo haga
hacerlo pronto
¿cómo manejar
los datos
de una app
grande?
sí
eso es interesante
para manejar
los datos
de una app
grande
lo miramos
pero mi recomendación
es
solo utilizar
Redux
si realmente
lo necesitas
creo que ahora
utilizando justamente
React
pues lo puedes hacer
nos han quedado
un montón de temas
crear custom hooks
podríamos haber creado
un custom hook
para recuperar
para recuperar
creo que
es que me parece
muy interesante
creo que a lo mejor
el siguiente live
va a ser de eso
de crear custom hooks
y no solo crearemos
ese sino podemos
crear diferentes
adecentaré un poquito
el proyecto
el CSS
y podemos continuar
con eso
y creo que puede estar bien
sí
el próximo viernes
hago directo
y seguramente lo haré
de lo que he dicho
crear custom hooks
que me parecen muy guay
y a lo mejor
con eso
también podemos hacer
podemos hacer
temas de
View Reducer
y todo esto
Bianco Michio
el Imiotzi
dice
gracias crack
clarísimo todo
Aide dice
que las páginas
o views
generalmente
son las vistas
en la app
y a partir de eso
hay componentes comunes
y componentes propios
de la vista
muy bien
buenas tardes
buen tema
recién ingreso
lo volveré a ver después
dice Esteban Barrantes
respecto a organización
me decían esto
la diferenciación
que ya lo hemos hecho
todavía he aprendido
ningún framework
de Javascript
que recomienda
para cuando me toque
React
o tirarme a Svelte
ya que está sonando tanto
a ver a mí me encanta Svelte
y os recomiendo
todos los vídeos
que tengo en mi canal
pero
tengo que ser
de corazón
y deciros
que yo os recomiendo
que aprendáis React
y de hecho
hay un vídeo
de React desde cero
que es el anterior live
que yo creo
que está bastante bien
casi dos horas
y que React
además te explico
porque deberías aprender React
así que
míratelo
y toma tus propias
conclusiones
creo que está guay
Svelte
a mí me gusta mucho
y me lo paso pipa
haciendo vídeos sobre ello
pero
si tengo que priorizar
yo primero haría React
¿vale?
¿qué más?
pues no sé John
lo miraré
en la documentación
a ver cómo se puede quitar
los service workers
porque yo pensaba
que era tan fácil
como quitar los imports
ah
y también quitar el index
HTML
y todo esto
en el index HTML
aquí
tienes el manifest
que esto te creará
el manifest
bueno
el manifest lo puedes dejar
pero puede ser que aquí
ah pues no
aquí pensaba que no
seguro que se puede desactivar
me estrenaría que no se pudiera
algo se puede hacer
¿por qué usar context API
y no React Redux?
pues simplemente
porque context API
es parte de la API de React
y
a lo largo del tiempo
me parece más fiable
lo primero
no tienes que aprender más cosas
lo segundo
suele ser bastante potente
y lo tercero
es que utilizar React Redux
desde primeras
te puede añadir
no solo complejidad
sino que puedes cometer
ciertos errores
que luego son difíciles
de eliminar
que no digo que sea mala solución
solo digo que tengáis cuidado
al añadirlo
o sea
cuando empecéis un proyecto
no lo añadáis
y ya está
¿vale?
os lo tomáis con calma
ver si lo necesitáis
y si lo necesitáis
utilizarlo lo menos posible
cuantas menos tecnologías
os acopleis
mejor
o sea
suficiente tenéis con React
no añadáis
tantas dependencias
en vuestro proyecto
que además
se convierten en core
del núcleo
de vuestra aplicación
cuantas menos tengáis
mejor
¿vale?
¿hay buena demanda
de laboral con React?
sí que lo hay
y sí
claro que trabajo actualmente
trabajo en Adivinta Spain
es una empresa española
que tiene un montón
de marketplaces
y estoy súper contento
pues nada
compañeros
amigos
amigas
colegas
a todos
os agradezco un montón
que hayáis estado aquí
de verdad
me ayudáis mucho
si le dais like
si lo compartís
por vuestras redes sociales
con vuestros amigos
compañeros
amigas
parejas
mascotas
con lo que sea
me lo he pasado súper bien
me encanta estar aquí
con vosotros
me encanta que
participéis tanto
en el chat
de verdad
es maravilloso
y me encanta
que os guste
saludos Tatiana
saludos Nicolás Santis
Joan Sebastián
JG
muchas gracias
a todos los que habéis
puesto en el chat
vuestras impresiones
habéis estado participando
en vivo
me encanta que seáis
que participéis tanto
de verdad
me parece súper guay
los que lleguéis tarde
no os preocupéis
el vídeo se queda en el canal
así que suscribíos al canal
le dais a la campanita
y veréis este
y todos los que hay
que hay unos cuantos
y que creo que son muy interesantes
de verdad de nuevo
espero que estéis
súper bien
que os cuidéis mucho
que tengáis mucho cuidado
os mando
un abrazo enorme
a todos y a todas
por estar hoy aquí
os lo agradezco
nos vemos en el siguiente live
nos seguimos viendo
en el canal de youtube
suscribíos
dadle like
y dadle cariño
poned comentarios
hablad
comentad
vivid
sed buenos
y quedad mucho
disfrutad mucho
del fin de semana
hasta luego
y nos vemos
en el siguiente
viernes
a la noche y cuarto
hora española
y si no
pues en todos los países
hasta luego
y ahora
a ver si soy capaz
de darle al botón del finish
que también
esta era mi primera vez
en este tema
2
3
2
1
2
2
3
3
2
3
2
2
3
2
2
2
3
¡2
2
2
2
2
4
4
5
12
letra
1
2
12
1
1
2