hoy vamos a ver tres cositas la primera va a ser grid vamos a ver cómo podemos pasar es el resultado
de búsqueda que teníamos en grid porque a ver si lo tengo no sé si tengo el proyecto por aquí
abierto si lo tengo que tener aquí vale pues teníamos este problema no que por ejemplo pues
si buscamos vamos a buscar avengers en el proyecto vale aquí teníamos pues el resultado de la búsqueda
y ya habíamos hecho por la paginación y cuando le damos a siguiente pues al cargarse pues hace
esta cosa rara que es como que carga solo una columna la de la derecha del todo si te fijas
en lugar de añadirlos parece que sólo la añada a la columna de la derecha eso es por cómo están
hechos los estilos como los empecé a hacer es porque lo hice ahí súper rápido y además que
quería probarlo que me parecía muy interesante utilizar el calo el column no es el column count
y el column gap y entonces tú le puedes decir de utilizar columnas para poner tu información y
todas las los elementos me pareció interesante utilizarlo pero si no no es lo ideal en este
caso y es mejor utilizar display grid y eso es lo que veremos lo segundo que vamos a ver es cómo
hacer infinity scroll que es no voy a decir complicado pero el retador sobre todo teniendo
en cuenta que queremos utilizar el use near screen los problemas que nos podemos encontrar loops
infinitos entonces vamos a ver cómo vamos a ver si lo conseguimos pero creo que sí vamos a ver
cómo lo conseguimos el hacer infinity scroll para no tener que darle al botón este que teníamos aquí
abajo del todo este botón para evitar tener que darle a un botón no pues ver cómo lo podemos hacer
directamente con infinites creo cada vez que bajemos que haga la siguiente paginación y lo tercero que vamos
a ver espero que me dé tiempo o al menos pasar un poco por encima es el testing es ver cómo funciona el
test tiene incluir backup hacer dos tres cuatro test algo que podamos más o menos asumir y a partir de ahí
pues dejaros esa práctica vosotros no de cómo podéis añadir más test y podéis hacer prs al proyecto para
que añadáis pues todos los test que consideréis me gustaría más adelante a lo mejor hacer un live o
hacer vídeos más enfocados sólo a testing porque aquí vamos a pasar muy por encima es algo muy denso
entonces vamos a verlo de una forma más pragmática pero creo que puede ser un buen inicio para que
empecéis vale entonces vamos con con que empezamos vamos a empezar primero con el con el css grid vale
vamos a añadirle el grid a nuestra aplicación y me dicen vamos antes de empezar vamos a ver qué dice por
aquí de ahí hola hace un proyecto de la vida real aunque sea pequeño bueno acepto ideas así que me podéis ir dando
ideas a ver alguna cosita que veáis que puedo hacer en este caso me gustaría deciros una cosa tengo
aquí la noticia y todo vale que facebook ha comprado giphy por 400 millones de dólares o sea que no no se
puede decir que no hemos elegido bien la api ni el proyecto ni la compañía 400 millones de dólares esto
está calentito que lo acaban de anunciar y antes de que se me olvide que es que se me había olvidado que
muchas gracias a la gente que comparte mis vídeos y que se lo curra tanto como gil que dice que invita una
cerveza si viene y no le gusta el vídeo o andrés que incluso pone que está preparando hamburguesas
para el directo de midudev estas cosas de verdad a mí me dan la vida me encanta así que bueno que
sigáis haciéndolo porque que me encanta vale entonces vamos con el css grid vamos a empezar lo
primero que vamos a hacer es pues quitar el column este básicamente todo el estilo que teníamos voy a
poner esto aquí espero que se vea bien voy a hacerlo un poco más grande para asegurarme que
veis bien el que veis bien el código vale lo primero que vamos a hacer y a ver cómo se ve es eliminar las
propiedades css que eran para las columnas son esas dos y también teníamos estas tres nunca ha tenido mucho
éxito esto el column count es una pena la verdad vale entonces ahora ya podemos ver cómo cómo queda esto
y cómo queda esto pues bueno puedes ver que queda un poco ahora solo siempre una sola columna no está
apilado uno encima del otro lo bueno de esto si voy para abajo y hago la paginación es que obviamente no
pues la debería pues pegar no vamos a ver get next page vamos la pega abajo que justamente un poco lo que
queremos conseguir entonces vamos a ver cómo podemos conseguir esto utilizando display grid vamos para arriba
hay hay hay avengers muy bien reunidos vale pues lo primero que vamos a hacer lo que necesitaríamos es
decirle que la lista de gif es un display grid no display grid es un nuevo tipo de display bueno nuevo
ya no tan nuevo no pero teníamos blog inline blog flex en este caso pues tenemos display grid que es como
un grid de 2 o sea 2d que podemos tener pues columnas y filas o sea que está bien y es justamente lo que
vamos a querer no sobre todo porque vamos a querer tener columnas pero a diferencia de la otra que las
columnas el orden que seguían no era el correcto aquí sí que queremos que vaya de izquierda a derecha y de
arriba abajo en el otro irá era de arriba abajo y de izquierda a derecha que era justamente lo contrario así
que vale pues guardamos los cambios y ya está no hay ningún tipo de cambio si miramos y esto puede ser
interesante si abro las herramientas de desarrollo voy a abrir las herramientas de desarrollo y me pongo
encima del list of gif mirad esto esto es interesante voy a quitar el display grid este que tengo aquí lo
voy a desactivar entonces si yo hago hover sobre list of gif igual no se nota mucho pero si estás en casa y
lo pruebas pues verás que sí que se resalta lo que son esos elementos y se resalta con un colorcito y ya está
si pongo el display grid y me pongo encima se puede ver aunque a lo mejor no se nota aquí mucho
vale pero se puede ver que el borde ahora es como un borde descontinuado no que te indica cada uno de
los elementos mira aquí aquí lo vamos a ver por ejemplo no se ve mucho es muy chiquitito pero si lo
pruebas en tu casa lo verás entonces esto es lo que te indica que qué es el grid y eso lo que nos va a
ayudar un poco a servir como de guía para lo que queremos hacer entonces ahora con el display grid lo que le
tenemos que decir es cómo se tienen que comportar tanto las columnas como las filas no cómo va a
ser esta plantilla en la que queremos trabajar así que lo que vamos a hacer voy a quitar esto lo que
vamos a hacer en este caso es decirle bueno mira lo podemos a que lo pienso voy a poner esto por ahora
así y lo vamos a hacer directamente aquí para que vayamos viendo los cambios más rápidamente aquí lo que
tenemos que decirle primero es que qué plantilla cómo se tiene que comportar el grid por lo que le vamos a
decir es que el template que tiene que utilizar en las columnas porque justamente queremos que
tenemos columnas en este en esta cuadrícula es decirle vale pues quiero que haya una columna que
sea por ejemplo de un 25 por ciento vale pues ya tenemos una columna del 25 por ciento pero claro
alguien me puede decir bueno ya pero o sea te has dejado todo todo vacío o sea esto que es claro porque
le hemos dicho lo que le estamos diciendo es que de todo el espacio disponible que tiene queremos una
columna con 25 por ciento así que si quisiéramos quisiéramos otra tenemos que decir bueno pues
ponme una segunda columna con un 25 por ciento no y dices bueno vale ahora tengo dos columnas pero te
falta el 50 por ciento bueno podríamos hacer algo para hacerlo más automático decirle bueno pues auto
entonces lo que hace es vale me has dicho que es una columna 25 por ciento segunda columna 25 por ciento
pues todo lo demás en automático y así yo mismo me lo arreglo que pasa que el resto del espacio era un
50 por ciento pues lo ha dejado y con esto tenemos tres columnas bueno no es lo que queremos porque lo que
nos gustaría en este layout más o menos sería tener cuatro columnas con un 25 por ciento vale cuál es el
problema de esto de 25 por ciento es que esto es un poco repetitivo y ya lo dice un poco la palabra no
repetitivo si tuviésemos cinco columnas pues tener que poner bueno claro no podríamos poner 51 25 por ciento
teníamos que ponerla del 20 pero este es el problema también si ponemos cinco del 25 no cabe dentro del
100% así que no tiene sentido al final cada 25 por ciento que pasa que lo que le estamos diciendo
es que qué trozo tiene que utilizar no qué fracción necesita utilizar o sea que podríamos decir lo mismo
pero una forma más automática al hablar de fracciones lo que estamos diciendo es vale pues hazme una columna que
sea una fracción claro pero si sólo hay una columna cuánto es la fracción de una columna pues es el 100%
pero si hay dos columnas cuál es la fracción si hay dos columnas que cada una tiene una fracción cuánto
valdría una fracción pues cada una sería un 50 por ciento vale esta es la unidad que se utiliza bastante en
grid para hablar de fracciones porque se entiende un poquito mejor que el tanto por ciento y además pues te ayuda
a que se adapte fácilmente porque dependiendo del número de columnas que tenga las fracciones en sí valen
más o menos así que de esta forma podríamos decir vale pues queremos cuatro fracciones vale entonces es
normal que estén estos huecos luego intentaremos arreglar un poquito pero lo que está pasando aquí es que
está intentando bueno lo que está diciendo es vale tú tienes cuatro columnas y voy a meter en cada una
pues pues pues en la fila tienes cuatro huequecitos donde meter algo ya está así ahora de alto pues
está adaptando al elemento más alto está empujando digamos toda esa fila así que la altura va a venir
determinada por la altura máxima de el elemento que esté en esa fila en este caso que tenemos cuatro
elementos pues este cuarto que puedes ver aquí es el que empuja al resto así que tendríamos como esta
altura vale como decía antes esto en realidad es repetirse no es repetir constantemente las
fracciones o cuántas veces queremos hacer algo pues para eso tenemos una utilidad que es también de css que
nos ayuda a simplificar esto para eso podemos utilizar repita y le decimos el número de veces que queremos
repetir algo y luego el tamaño así que queremos cuatro veces repetir una fracción sería exactamente lo mismo
que hemos visto antes lo mismo con el 25 por ciento al final ahora visualmente si utilizamos el 4 con el 25 por ciento o
el 4 con una fracción es esencialmente es lo mismo así que vamos a poner pues una fracción le estaba diciendo
vale pues repite cuatro veces el tamaño de una fracción por lo tanto vas a crear cuatro columnas de una fracción cada una
el problema que vamos a tener con esto ahora además es el gap no podemos ver aquí que están todos pues muy
juntitos o sea que excepto de arriba abajo aquí sí que hay una pequeña separación se puede ver que hay una
pequeña separación pero eso es porque en el gif le pusimos esa separación pero de izquierda a derecha pues
no están demasiado juntitos para esto lo que podríamos hacer es utilizar grid gap indicarle el gap que queremos que
tengan que estar entre cada uno de los elementos así que le podemos decir por ejemplo pues que nos ponga un gap
de 16 píxeles y ahora has visto cómo los ha separado y ha dejado una separación de 16 píxeles para esto
las fracciones son geniales porque si yo pongo aquí 25 por ciento esto empieza a aliarse vale claro que le hemos
dicho que las columnas tienen que tener un tamaño 25 por ciento pero con el gap le estamos diciendo vale si la columna
es 25 por ciento pero entre cada ese 25 por ciento que ocupa cada columna tienes que poner una separación
de 16 píxeles claro entonces ya no ocupan 100% sino ocupará un 25 por ciento 25 por ciento 25 por ciento 25
por ciento más multiplicar por cada separación 16 píxeles y por lo tanto pasa esto se está rompiendo
entonces esta es la razón por la que se utilizan las fracciones porque es algo que mucha gente cree que es bueno
pero porque se utilizan fracciones porque más fácil y porque nos está ayudando de alguna forma a simplificar
tanto el diseño y que sea más responsive como para nosotros entender conceptualmente lo que está pasando
así en las fracciones lo que va a quedar es justamente el espacio que necesitamos para que esto encaje
correctamente vale entonces bueno podríamos poner 16 píxeles como que podríamos poner un tanto por ciento lo que
prefiráis en este caso tenemos un problemilla y es que ya teníamos una separación en el gif entonces además
este 1 por ciento bueno es un poco raro vamos a poner 32 píxeles por poner algo 16 píxeles pero aún así aquí
podemos ver que hay una separación doble porque ya teníamos una separación previamente entonces lo que podemos hacer
es utilizar el grid gap le vamos a indicar tanto el horizontal la el gap horizontal como el vertical
así que el primero sería el horizontal y el segundo sería el vertical por lo tanto no es al revés el primero
es el vertical ahí la he liado el primero es el vertical que es el arriba abajo así que el primero le diríamos
que tiene una separación de cero y luego está el horizontal que es en la izquierda derecha así que el segundo
valor le decimos 16 píxeles esto claro si no le ponemos el cero primero y sólo tiene un valor va a
utilizar este valor tanto para horizontal como horizontal como vertical anda aquella horizontal no he bebido
lo puedo lo puedo decir entonces si no queremos que tenga un gap de vertical vale ponemos un cero al
primero y luego entonces tenemos un horizontal y 16 píxeles y lo puedes ver claramente así no porque aquí si lo
lo voy subiendo y lo voy bajando pues nada se va viendo como el cero sería el que tenemos para arriba
y abajo y el 16 el que tenemos horizontal vale vamos a a ver que me contáis hasta aquí a ver a ver
al parecer con grid no se puede utilizar el estilo más sonri por eso sirve el column count
exacto el problema es que como puedes ver aquí esta separación era lo que quería evitar con el column count
y es verdad que se evita queda súper bonito pero el problema es lo que decía no que no está haciendo bien
correctamente como queremos que vayan los elementos y el column count esto sí que lo hace
pero bueno sobre el más sonri luego ahora vamos a ver una un tema una sorpresita grit es más para hacer layout
y flexbox es más para los componentes internos sí a ver al final yo creo que cualquiera de las dos
se puede utilizar depende un poco de los estilos es verdad que grit está pensado más para la ya 8 pero en este caso
creo que puede quedar muy bien y a veces es interesante si por ejemplo quisiésemos hacer que un gif ocupase el doble
por hacerlo más destacado para eso grit funciona muy bien y simplificaría mucho el conseguirlo vale vaya
explicación si le entendí dice gerardo tengo hay una que es muy interesante que dice tengo entendido que
grit gap estaba deprecado y que se debería usar gap que sería la opción al usar grit vale no está deprecado
como tal grit gap pero sí que es verdad que se está añadiendo una nueva propiedad al css que se llama gap
pero este gap no sólo funcionará y es súper interesante no sólo funcionará para grit sino que funcionará para
otro otro tipo de displays no sólo para para gris sino que creo que también podría funcionar para flex
creo ahora tengo mis dudas pero creo que sí así que es bastante interesante hemos de belo perdices de
gris definido inicialmente apropiado gris gap y esta propiedad aplicada está siendo reemplazada por
es verdad está siendo reemplazada totalmente de hecho vamos a probar y yo creo que debería funcionar
perfectamente así que pues lo que pasa es que lo que os digo el gap es que está pensado está muy bien
pensado porque va a ser algo que va más allá de grit no sólo se utiliza con con grit sino se puede utilizar
las cosas entonces pues tendrá sentido porque esto nos va a ayudar con muchos problemas que tenemos con el margin
y con el padre vale vale porque en tanto por ciento y no rem o en lo podríamos hacer con tanto por ciento con
rem con en con píxeles con cualquier con cualquiera vale pero utilizado porcentajes para que entendieseis
conceptualmente las fracciones vale todos los valores de css usan el sentido de las agujas del reloj empezando desde
arriba efectivamente eso es lo que dice andrés es totalmente cierto y a mí es normalmente lo que me ayuda para
sabes cuando tienes el margin y no sabes exactamente qué es lo que va arriba pues nada pues piensas en las
agujas del reloj y ya está muy bien que más que más que más en este caso lo del margin para que lo veáis
cuando tenemos el margin este si yo pongo uno dos tres cuatro pues si pensáis este es el de arriba este
es el de la derecha este es el de abajo y este es de la izquierda porque es como las las manecillas del
reloj vale que más es necesario instalar grid ya que mi proyecto no realiza el un una fracción no debería
ser totalmente compatible no se puede utilizar con flex sólo se puede utilizar con grid sólo cuando
cuando estéis utilizando el grid template columns vale así que perfecto pues nada espero que hasta
aquí todos lo tengamos más o menos por dónde íbamos vale si estamos vamos a dejar el gap ya que ha
funcionado correctamente tenemos esa separación vale entonces ya tenemos esa separación pero hay un
problema con todo esto y es que si yo ahora esto lo hago chiquitito pues esto está siendo un desastre
un desastre porque se quedan las cuatro columnas se están quedando las cuatro columnas siempre no y no
vamos a querer que esto funciona así no que nos gustaría que se fuese adaptando de alguna forma entonces para
esto existe otra utilidad que tenemos en css que le podemos indicar cuál es el ancho mínimo que en este
caso es el ancho o el tamaño que tendría la columna mínimo y el máximo y de esta forma dependiendo de
eso que grid determine cuántas columnas tiene que crear cuántas tiene que utilizar en este caso aquí
podríamos decirle ya pues mira creo quiero que esto ya tenga auto fit y lo que va a hacer el auto fit es
auto fit auto fit si lo he puesto bien vale vale vamos a quitar esto un momento yo vale lo que le
podríamos utilizar en lugar de decirle cuatro es decir de cuántas son las que tiene que o sea que utilice
una propiedad que rellene automáticamente dependiendo del tamaño las columnas y nosotros no le tengamos que
decir cuántas son las que tiene que meter vale entonces vamos a ver a ver si ahora me sale el auto
tenemos auto fit y le decimos que tenemos 100 píxeles vale en este caso pues automáticamente ha ido
metiendo las columnas como ha podido y ya se va adaptando está diciendo vale pues ahora si es de
100 píxeles pues sólo voy a hacer que esa columna de 100 píxeles y me voy adaptando no lo podemos hacer
un poquito más grande que sean 300 píxeles por ejemplo 30 no 300 entonces hasta que no quepa pues lo que va a
hacer no es hacer que salte a siente lo que está diciendo es vale voy a hacer que automáticamente
voy a rellenar la fila y cada fila cada elemento que hay en esa fila la columna sólo puede tener 300
píxeles por lo tanto en esta fila sólo cabe un elemento en este caso uno si esto lo hago más grande
y ya tenemos pues 600 y pico píxeles ya cabe otro por lo tanto ya tenemos dos columnas y he podido meter dos
elementos de la fila vale pero esto está bastante bien pero todavía no se adapta del todo no porque
da este salto que deja ese espacio en negro y bueno es una pena pues perder espacio lo que podemos
decirle es utilizar esta utilidad que comentaba de min max le podemos decir mira una columna como mínimo
debería tener este espacio y como máximo podría utilizar este espacio de esta forma se va a poder ir adaptando
y rellenando ese hueco siempre que pueda vamos a decir el min max y le vamos a decir bueno como mínimo
puede ser de 100 píxeles y como máximo pues 300 píxeles vale en este caso vamos a ver que todavía
no funciona del todo bien sí que funciona cuando tiene una cuando tiene una lo bueno no es que sí que lo
está adaptando pero todavía no funciona del todo bien cuando tenemos más de una sólo funciona bien cuando tenemos
una para que se adapte correctamente antes hemos visto cómo podíamos especificar mejor los espacios
sobre todo cuando ya hay más de una columna y cómo lo podemos hacer pues hablando de fracciones le podemos
decir que como mínimo tenga un ancho y le podemos decir que como máximo siempre tenga una fracción en este
caso lo que va a hacer es decir vale pues siempre voy a intentar tener las 100 que es lo mínimo y luego lo voy a ir
haciendo cada vez más grande el problema de esto es que claro 100 píxeles es bastante chiquitito así que
si lo dejamos en 300 ahora sí si lo vamos haciendo pequeño podemos ver como sí que tiene una cierta
adaptación que está haciéndose más grande de 300 píxeles pero cuando ve que ya puede caber otro no
que también son 300 píxeles dice ah pues este lo meto y entonces divido en toda la fila lo que ocupa cada uno
así que vamos a ver otra vez ahora cuando tenemos uno pues se va haciendo grande y cada vez ahora
en cuanto tenga la posibilidad de meter un tercero con 300 píxeles que es lo mínimo que puede ocupar lo
va a introducir y ya no tenemos ningún tipo de hueco y de esta forma pues ya tendríamos perfectamente
nuestras columnas funcionando bueno vamos a un madre mía cuánto chat ha sido así de repente
vale dice álvaro moral paz muy buenas miguel me gustan tus directos y así gracias así seguiré
muchas gracias álvaro funcionará para flexbox esto no funciona esto que hemos visto no funciona para
flexbox si estás preguntando sobre el gap tengo entendido que sí que funcionará para flexbox que
que más que más cuando pones un valor en margin afecta los cuatro si pones dos exacto muy bien
alejandro valencia dice y os lo voy a enseñar aquí voy a hacer esto un poco más grande porque si no
claro lo que dice es si ponemos un margin y ponemos aquí 0 0 bueno lo que había puesto 1 2 3 y 4 vale si
ahora lo que hacemos es quitar los dos primeros lo que va a ocurrir es que este primero va a ser
vertical y el segundo será horizontal así que esto será el margen de arriba de abajo y este de izquierda
derecha bueno y si dejas el 4 pues será para arriba para abajo izquierda derecha ahí está ese como un
que tiene vale que más que más para centrarlo se puede agregar sí ahora lo vamos a centrar cuál es la
diferencia entre auto fit y auto feel tengo que reconocer que yo me hago un lío vale pero es
sobre todo en este ejemplo no lo vamos a poder ver de hecho si yo pongo auto feel debería verse
exactamente igual vale si pongo auto feel vamos a ver esto que es exactamente lo mismo el tema es sobre
sobre todo cuando en una fila tienes la oportunidad de meter menos o sea si tú tienes una fila y solo
tienes tres elementos con el auto fit con el auto ahora tengo dudas con el auto fit sí que tomaría todo
el porcentaje de esa fila pero con el auto feel lo que dejaría es solo los tres elementos en las tres
columnas y dejaría hueco a la derecha vale con el auto fil haría eso con el auto fit lo que haría
es vale solo tienes tres elementos bueno pues en lugar de dejártelo eso vacío lo que voy a hacer es
rellenarlo eso esa sería la diferencia pero creo creo puedo estar equivocado que la diferencia es solo
cuando cuando eso cuando en una fila pues te podría quedar no tienes suficientes elementos para rellenar
esa fila esa primera fila o primera fila o última fila claro la última fila donde pueda pasar lo interesante
de esto claro ahora que lo pienso puede ser interesante claro aquí a lo mejor sí que vemos la diferencia
a no pues no no pensaba que vamos a ver la diferencia de que a lo mejor este tomaba todo el espacio
restante pero no igual es solo cuando tengo dudas me lo voy a apuntar me parece súper interesante
vale vale vale pues nada por aquí esto queda vamos a terminar y me gustaría enseñaros una cosita
el caso es que bueno aparte de todo esto que hay algunos que podemos ver que hay un hueco pues
esto lo podríamos lo podríamos centrar una forma de centrarlo bueno una forma no la única se me ocurre
sería hacer este no align items que es muy parecido bueno es el mismo que tenemos en flex y haría esto al menos
los centraría vale los tendríamos centrados verticalmente y de esta forma pues sí que queda
hueco pero no nos queda de arriba abajo no que de la otra forma si lo quitamos pues podemos ver que
tenemos este hueco aquí lo que prefiráis podemos dejarlo align items enter y así pues ya lo tenemos
vale entonces alguien preguntaba y me parece muy interesante y antes de perderlo todo voy a copiarme
los estilos que hemos hecho y los voy a dejar aquí este sería uno y ya está no voy a guardar los
cambios a ver si todo funciona bien parece que sí a ver si vale esto lo tenemos ya perfecto vale aquí
podríamos hacer cosas para que no tengamos este hueco podríamos decirle que el link este pues que como máximo
yo que sé pues que tenga para evitar esto podríamos hacer algo así no sé podríamos decirle oye como máximo
pues que tengas de 200 poquito menos así entonces le ponemos una altura máxima y de esta forma pues
bueno queda un poquito más menos separación pero se pierde información lo que también a vuestro criterio os lo
dejo lo interesante voy a aquí voy a refrescar esto lo interesante más sonri no alguien decía oye pero
es que esto es una pena porque no se puede utilizar más sonri y es verdad entonces vamos a hacer una cosa
sobre esto que os parece si os enseño cómo hacer más sonri sólo con css y sólo añadiendo una línea de
código quien se lo cree que luego lo puedo hacer quien se cree que soy capaz con una sola línea de
código sin tocar nada más una sola línea de código hacer que este grid que hemos hecho tenga más sonri y
funcione bueno no sé si perfectamente pero que se va a ver bien eso seguro que os apostáis una cerveza os
bueno entonces vamos a vamos a hacerlo vamos a ver cómo lo podemos hacer es un poco truco os lo tengo que
decir pero el caso es que la última versión de firefox tiene una cosa muy buena estoy en firefox nightly vale que
versión muy muy beta este es el proyecto no que teníamos y que pues ya tenemos esto de con el grid y que
se va adaptando y perfecto pero lo que le faltaría que estaría muy bien no es que tuviera el grid que
comentaba entonces lo que podemos hacer es donde teníamos este grid el list of grids aquí a ver si puedo
hacer esto más grande para que lo veamos bien qué bonitos son las herramientas de desarrollo firefox me gustan un
montón sobre todo para temas de diseño están muy guay vale entonces y esto no sé por qué está bueno no
importa en este caso mira mira si me dice que el gap a porque puesto 2 claro y cuando es que es que
está muy bien ves aquí te indica cuando algo lo filtra mochila y te dice por qué vale hemos visto que el grid
template columns tiene para las columnas entonces en realidad el problema que tenemos es con las filas
porque las filas por alguna razón se está adaptando la altura al elemento más alto entonces lo que nos
gustaría es que las filas fuese lo suficientemente interesante inteligente para saberse adaptar en el
grid dependiendo en realidad de cuánto espacio tiene a la fila de abajo no o la fila de arriba no que se
pueda adaptar así así es como conseguiríamos el masonry pues lo que le podemos decir es grid template rows y
más sonri y ya está ya está funcionando ya lo tenemos no me digáis que no es bonito vamos aquí
tenemos el efecto más sonri de gratis y ahora cuando añadimos uno nuevo pues esto funciona como tiene que
funcionar añadimos otra página y esto funciona ni que lado pues ya tenemos el más sonri que os parece
bueno es un poco trampa lo tengo que reconocer es un poco trampa porque esto sólo está disponible en esta
versión de firefox vale todavía ni siquiera está en la versión estable pero la verdad es que funciona muy bien y queda de lujo y como
puedes ver pues sólo hemos añadido una sola fila aquí no sé si se debe ver si vale son añadido una sola fila aquí y ya está le decimos que
tiene que utilizar el estilo de más sonri y ya está aquí pues teníamos los diferentes no el feed content tenemos el max content en
un montón y firefox tiene este más sonri si lo queréis probar para ver cómo cómo funciona bueno aquí tenéis un poquito de esta es la demo que
tienen que es la demo oficial y ya os indica que está detrás de un feature flag para ir al feature flag pues creo que tenéis que
poner about config a ver así about config about config vale aceptáis el riesgo y continuáis y aquí pues tenéis que buscar más sonri
y simplemente pues lo activáis y ya lo podríais utilizar aquí está el anuncio y creo que va a ser algo súper interesante para el layout es una pena
que no estaba disponible para nosotros sé que chrome también lo va a añadir eventualmente pero bueno que ahí está y ahí queda para para que lo
sepamos y que al menos hemos hecho el más sonri que no se diga que no lo que no lo logramos también antes de antes de irnos de aquí
bueno voy a dejarlo puesto porque esto lo subiré el grid template raw rose vamos a ponerle más sonri lo interesante de esto además si yo guardo los cambios
perdón que he puesto aquí dos puntos si guardo los cambios lo interesante es que chrome seguirá funcionando exactamente igual por lo tanto no vamos a
tener ningún problema de compatibilidad nosotros podemos dejar esta línea de aquí la dejamos ahí y cuando tengamos pues compatibilidad pues
fantástico tendremos compatibilidad y si alguien utiliza firefox nightly pues lo verá como lo tiene que ver pero mientras pues aquí en chrome lo veremos así lo interesante es que esto es una mejora progresiva que se dice es una mejora que no estamos poniendo ningún problema a los usuarios sino a los que tienen la última versión pues tiene una mejora progresiva los otros le sigue funcionando pero a lo mejor no se ve tan bien vale vale perfecto
pues con esto tendríamos ya el tema del grid vamos a ver ahora el infinity scroll pero antes vamos a ver que comentáis por aquí
qué recomendaciones das para nombrar las clases pues sí que tienes que utilizar si tienes que nombrar clases pues lo que te diría es que utilices que ven utilices suite utilices alguna convención de nombres y no te vas a volver loco si tienes que
nombrar clases si no utilizas css en js y te olvidas de nombrar clases vale que más que más esos messi del front en sí gracias más quisiera yo equipararme al front en lo que él hace en el fútbol
vale que bueno pregunta básica dice valderrama en mi opinión de tailwind css pues que me parece muy interesante sobre todo para empezar o para
prototipar pero no soy muy amante del atomic css sobre todo de atomic css que tienes que utilizar tu mano que es diferente al de facebook que ahora ha creado uno pero es automático es como que te crea el atomic css
automáticamente al vuelo al vuelo no al compilar y eso está muy interesante pero el que esa mano no soy muy fan no soy muy fan porque es muy difícil imagínate que tienes una ristra de
class names que además el class name me parece que es un contrato un poco endeble en general pero imagínate que tienes un margin utilizando pues un class name si después de meterle un montón de class names al final del todo utilizas otro margin
ya se te va a olvidar que habías puesto un margin ahí se te no sé no me no me suele gustar me gusta mucho para prototipar eso sí para hacer cosas rápidas ellos me parece muy interesante y me gusta tailwind por eso
¿qué más? ya no haría falta utilizar tanta librería eso un live de puro css Iván Iván bueno puro puro no que ahora vamos a javascript además va a ser tela eh
vale si pone css en el componente siempre se renderiza cada vez que el componente se actualiza no bueno depende del css en js pero no lo que hacen es extraerlo y está muy bien porque además lo optimiza bastante y solo le manda al usuario css que necesita
y eso está bastante bien lo que sí que es verdad en términos de server site hacia el cliente que sí que puede ser que cargue dos veces el mismo css pero no que lo renderice dos veces
sino que ese texto de css claro tú se lo envías al servidor desde el servidor al cliente al usuario porque mira este css que necesitas pero luego claro como sabes en el cliente cuando tienes que cargar que css
pues no lo sabes porque depende del usuario ¿no? entonces claro
ese css tiene que navegar sí o sí y es lo malo ¿no? que lo tienes que enviar dos veces pero creo que es un mal menor
vale joseph se va a cenar así que pues nada que lleva todo el día con el ramadán así que pues nada que aproveche y disfruta nos vemos la semana que viene joseph
vale ¿podrías hacer un vídeo hablando de personal de react? vale lo haré vale me encanta la performance así que lo haré
vamos ahora con el infinity scroll si estamos todos preparados me puedo equivocar mucho sobre esto así que espero que tengamos todos paciencia y buenos alimentos
vale entonces para hacer infinity scroll lo que vamos a hacer vamos a ver donde teníamos aquí la esto lo voy a hacer más chiquitito para que se vea bastante el código
porque creo que aquí lo más interesante va a ser el código estoy pensando como no la puedo liar ¿vale? vale
el infinity scroll lo vamos a poner en el search results en el search results que lo tenemos aquí es donde estábamos haciendo la paginación
que ahora mismo pues como podemos ver aquí pues hacemos el use give le pasamos a la keyword y teníamos este método set page que lo que hacía era actualizar
qué página estábamos para hacer la llamada a la siguiente paginación y tal como esto va a tener un scroll muy grande estoy pensando que lo primero que podríamos hacer
es limitar el número de resultados que devolvemos en el service de esta forma al menos pues será más fácil paginar ¿vale?
vamos a poner aquí 5 y guardamos los cambios
vale ahora hay 5 y así que ahora si pagina o si pagina o si pagina o
ay ojo ojo que también está el tete el page ah no ya está vale estaba pensando si voy a la siguiente página
vale ya está ya está listo el offset lo hace automáticamente muy bien no sé quién lo hizo pero lo pensó bien esto de con el límite cálculo el offset
vale entonces lo que podríamos hacer es utilizar el use near screen para saber cuando estamos cerca del final ¿no?
ya que tenemos ese hook que habíamos hecho en la anterior clase el use near screen lo podríamos reutilizar
entonces lo que podemos hacer es una técnica que se llama
chivato o visor o como le queráis llamar pero básicamente es poner un elemento del DOM
que podamos observar para saber cuando estamos al final ¿no?
en lugar de estar mirando
así si solo ponemos un elemento será más fácil ¿no?
porque nos va a servir como de guía así que vamos a poner aquí este div vamos a decir que esto es el visor
vale y ahora que tenemos ese visor vamos a quitar el botón que ya no tiene mucho sentido
y esto por ahora pues lo vamos a contar
ahora vamos a utilizar el near use near screen
ay me decía de auto importarlo eso quiero yo auto importarlo
y esto nos decía si el near screen si era true o false y además podríamos tomar la referencia ¿no?
utilizando el from ref podemos decirle de esta referencia
vale pues de la referencia de la que queremos observar es esta ¿no?
de este div
vale guardamos los cambios
pum
ha reventado
vale es normal y es un poco difícil de entender pero es normal
lo primero que podríamos intentar lo que pasa es que esto nos podría dar otros problemas
es ver por qué falla ¿no?
pero ya lo cuento yo por qué falla
es porque el elemento que queremos observar no existe
como estamos aquí haciendo un renderizado condicional
y aquí tenemos un loading que cuando al principio es true
por lo tanto tenemos el spinner al principio
y esto ocurre después
le pasamos como le estamos pasando la referencia al use near screen y está vacía
aquí no estamos haciendo ningún tipo de chequeo para ver si está vacía o si tiene algo ¿no?
entonces por eso puede estar petando
podríamos evitar que pete pero creo que puede ser un
lo vamos a hacer pero igual lo hacemos después
porque al final sobre esto lo que pasa es que igual nos puede ayudar de guía ¿no?
para saber que estamos observando algo que no está
y que por lo tanto deberíamos evitar hacerlo
así que por ahora vamos a ver que
¿cómo lo podemos arreglar?
yo en este caso creo que lo que puede ser interesante
es que el use near screen también acepte un external ref
y que este external ref se lo pasemos desde fuera
porque podremos decirle
oye esta referencia es un poco especial
porque viene de fuera y puede cambiar el valor
de esta forma al principio
podemos hacer que el efecto solo se ejecute
se ejecute cada vez que cambie esa referencia
y podríamos ir pasándole referencias diferentes
en este caso lo hicimos así porque nos era útil
¿no? nos era útil y nos era más cómodo
no tener que utilizar aquí el use ref
pero creo que si utilizamos aquí el use ref
pues puede estar más interesante
más interesante y nos puede simplificar
a la hora de pasarle el external ref
así que vamos a pasar aquí el external ref
y se lo pasamos así
external ref
este external ref va a ser el que creemos aquí
external ref
y vamos a poner esto
vale
este external ref va a ser el visor
y ya no vamos a utilizar el front ref
que teníamos aquí
ahora
este external ref si yo ahora guardo los cambios
que teníamos
tengo aquí
bueno ahora mismo no va a hacer nada
porque el use near screen todavía
debería hacer algo
en este use near screen
debería
claro
decir
cuando tengas external ref utiliza external ref
y cuando no pues utiliza el otro
así que lo que vamos a hacer
es eso
justamente
vamos a ver
ahí
vamos a
por
external ref
le vamos a decir
aquí
o más adelante
aquí vamos a decirle
cuál es el elemento
que vamos a tomar
si nos viene uno externo
pues le vamos a decir
vale
pues si tenemos un external ref
pues utiliza el external ref
y si no
utiliza
el que tienes
del from ref
y este elemento
va a ser el que tiene
que observar
lo vamos a hacer así
vale
el tema
es que
si ahora
guardo
todavía tendremos este problema
¿no?
porque claro
ahora mismo
el external
si ponemos aquí
un console log
este element
seguramente
claro
todavía no hay
aunque lo tome
desde el principio
uy esto
vamos a hacerlo
un poco
tenemos el visor
pero esto es muy peligroso
¿vale?
porque aunque aquí
sí que sale el elemento
en realidad
no lo teníamos
y es que es muy raro
¿no?
porque es como funcionan
las referencias
los objetos
y por eso
poner un console log
a veces
es un poco peligroso
cuando observamos
en un console log
un objeto
puede ser que nos devuelva
la referencia posterior
que teníamos
entonces
no nos podemos fiar
a veces
de qué es lo que tenía
esa referencia
porque la puede haber actualizado
y nosotros estar tan contentos
y pensar
ah bueno sí
aquí tiene justamente
lo que necesitamos
pero no
es porque la consola
es asíncrona
y entonces
lo que ha tomado
como referencia
no está correcto
así que bueno
ya os sabéis
tened cuidado con eso
¿vale?
vale
entonces
vamos a decirle
aquí
que el external ref
que tenemos que pasarle
si estamos cargando
pues no le vamos a pasar ninguno
pero si ya ha terminado de cargar
este elemento
sí que estará disponible
y por lo tanto
pues lo vamos a pasar
external ref
de esta forma
lo que
bueno claro
es que he puesto external ref
external ref
bueno
está bien
no pasa nada
vale
de esta forma
ahora sí
lo que podríamos hacer aquí
es decirle
bueno
no me observes un elemento
si no lo tienes
porque aquí
si ponemos el console.log
del element
que habíamos puesto aquí
más arriba
vamos a ver
que primero es undefined
por lo tanto
vamos a decirle
bueno
si no tienes el elemento
no
si tienes el elemento
entonces sí que lo observas
¿vale?
y ahora sí que podemos ver
que por fin
no ha reventado
por todos los lados
¿vale?
entonces
vamos a eliminar esto por aquí
vamos a poner
esto
vale
ahora ya estamos observando eso
vamos a poner un console.log
para ver
si está detectando correctamente
cuando está ese elemento
cerca de la pantalla
aquí
is near screen
vale
vamos a poner el console.log
uy
¿qué ha pasado?
vamos a poner aquí el console.log
para ver
el
vale
entonces
vemos que es cuatro veces false
y luego cuatro veces true
luego veremos que con esto
podemos tener problemas
podemos tener problemas
porque claro
nos puede indicar
puede intentar decirnos
que ha sido más de una vez
ha hecho near screen
entonces podríamos
hacer cuatro veces rápidamente
un fetch
y esto nos podría dar un montón de problemas
entonces lo que vamos a hacer con esto
es que al menos ya sabemos
que está
estamos observando el elemento que debemos
y lo está detectando
como no quiero que esto se vuelva muy loco
lo que voy a hacer
es que el handle next page este
voy a crear otra constante
que le voy a llamar exactamente igual
pero esto lo que voy a hacer por ahora
es enviar un console.log
que va a decir next page
y vamos a utilizar este handle next page
¿vale?
vamos a añadir aquí
un efecto
que sea
a ver
vamos a poner aquí el efecto
para que cuando cambie el is near screen
entonces lo que haga es
buscar la siguiente página
is near screen
cuando esto sea true
pues ve y toma la siguiente página
vamos a guardar los cambios
vale
entonces
aquí igual voy a filtrar aquí unas cuantas cosas
para que solo se vea lo que nos interesa
voy a dejar los errores por si acaso
entonces si vamos haciendo scroll
llegar a un punto
vale
que ha hecho true
true
next page
entonces directamente
debería buscar la siguiente página
pero si ahora
si hago scroll hacia arriba
y luego vuelvo a hacer hacia abajo
debería volver otra vez
a buscarme la página
claro
¿cuál es el problema?
el problema aquí
es que en nuestro hook
del use near screen
lo que habíamos hecho
era solo
ver una vez
el
claro
solo observarlo una vez
¿no?
porque en cuanto hacía intersección
pues lo desconectábamos
cogíamos el observer
¡pum!
y lo desconectábamos
y esto no nos va a ayudar
porque con esto
lo que vamos a lograr
es hacer solo la paginación
una vez
esto lo vamos a tener que arreglar
por ahora lo vamos a dejar así
y creo que vamos a intentar
bueno no
es que no sé
no sé qué hacer primero
si
vamos a hacer primero el error
o hacemos primero el debounce
porque si lo hacemos así
bueno al menos
nos debería funcionar una vez
venga va
vamos a hacerlo
al final
vamos a ver aquel problema
el problema que vamos a tener
si hacemos esto
voy a guardar los cambios
y al guardar los cambios
claro
uff
esto se ha vuelto loco
true true true true true
de hecho
de hecho voy a pararlo
porque esto
me está haciendo un loop infinito
y antes de que me reviente
vale
¿por qué me ha hecho un loop infinito?
porque si nos fijamos en el efecto
es vale
este efecto
que los efectos
si recuerdas
se ejecuta cada vez
que se renderiza
el componente
este efecto
se está ejecutando siempre
porque se está renderizando
el componente
está tomando
la siguiente página
cuando toma la siguiente página
se está actualizando
los gif
y cuando se está actualizando
los gif
se está actualizando
esta página
y entonces se ejecuta
este efecto
y así hasta el infinito
y entonces todo revienta
y esto no nos gusta
que reviente
vale
entonces
vamos a hacer
cómo podemos evitar
que esto ocurra
lo primero que podríamos hacer
como
hemos podido ver
teníamos en la consola
como un montón de truth
como que
buah
a mogollón
estaba haciendo
un montón de llamadas
lo primero que vamos a evitar
es que esta función de aquí
esta
la de la línea 14
se pueda llamar
tantas veces
tan rápidamente
porque esto
no nos está ayudando
así que lo que vamos a hacer
es utilizar
un paquete
que se llama
debounce
y ahora os explico un poco
ah mira
angus
lo que vamos a hacer
con el debounce
básicamente
es limitar
el número de veces
que una vez que llamemos
un método
se pueda llamar
porque al final
claro
cuando el observador
que además es así
puede observar
más de una vez
que hemos llegado
al final
pero aunque
observe que hemos llegado
2, 3, 80 veces
lo único
vamos a querer hacer
solo una request
así que lo que vamos a decir
es vale
si tú me llamas
80 veces
lo que voy a hacer
es simplemente
llamarlo una vez
voy a ver cuántas veces
me ha llamado
en un lapso de tiempo
y voy a evitar
que me llames
tantas veces
y si me ha llamado
80 veces
yo lo que voy a hacer
es solo
enviar una
y eso es lo que vamos a hacer
con este handle
next page
vamos a volver a comentar
este así
y vamos a poner el del console log
vamos a guardar los cambios
vamos a ir aquí
y aquí
vamos a ver
y aquí
vale
con el next page
next page
vale
entonces
¿qué vamos a hacer aquí
con el next page?
lo que vamos a hacer
es hacer la función
con el debounce
vamos a hacer el debounce
handle next page
vamos a guardar los cambios
aquí
y aquí
vamos a crear
vamos a instalar
primero la dependencia
que se me había olvidado
que si no instalamos
la dependencia
no funciona
que es esta
es esta
es just debounce it
ahora veremos un poco
cómo funciona
¿vale?
install
just debounce it
¿did you?
sí
me refería a install
¿vale?
vale, vale
ahora se está instalando
bueno, básicamente
el debounce
lo que hace es
recibir una función
de forma que
la función que te devuelve
es esta que tiene ese control
¿no?
en este caso
en este ejemplo
aquí
puedes ver que se ha llamado
tres veces
pero como lo ha dicho
que
si tú la llamas
tres veces
agrupa
todas las llamadas
y lo que haces
es que después
de 500 milisegundos
solo
va a ejecutarlo una vez
aunque tú la has llamado
ocho veces
en 500 milisegundos
lo que va a hacer
es solo ejecutarlo
una vez
esto es lo que vamos a querer
para controlar un poquito mejor
el llegar al final
y solo haga una vez
la paginación
así que
lo que vamos a ver aquí
en este caso
este debounce
vamos a hacer
vamos a pasarle
la función que queremos
que tengamos el debounce
que en este caso
es esta
vale
esta sería la función
para que se lea
un poquito mejor
vamos a poner esto aquí
y esto aquí
ahora el debounce
vamos a importarlo
debounce
from
just
como se llamaba
el paquete
just
debounce
it
vale
entonces
este debounce
como podemos ver aquí
recibe dos parámetros
uno
la función
y segundo
el tiempo
milisegundos
que tenemos que esperar
así que vamos a pasarle
también este segundo parámetro
vamos a poner ahora
mil
perfecto
mil directamente
y vamos a poner este
había puesto el console log
no sé si liarla
ya directamente
bueno
por ahora voy a poner el console log
sí
puede ser que la lima
vale
entonces
por ahora vamos a utilizar esta función
el problema
es que con esto
no creo que funcione
como debería
vale
porque
el problema de esto
es que lo que nos puede causar
es que creemos
esta función
que estamos creando aquí
al final
en cada render
la vamos a crear
por lo tanto
si cambia
un valor
o se vuelve a renderizar
este componente
vamos a volver a crear
esta función
y por lo tanto
no se va a acordar
de que esta función
te está refiriendo
en realidad
a la anterior
así que si tú la llamas
cuatro veces
en diferentes renders
estás llamando
cuatro funciones diferentes
por lo tanto
lo que deberíamos hacer
es utilizar
al menos
una referencia
para guardar
esta función
podríamos utilizar
una referencia
pero hoy
me gustaría
enseñarte otro concepto
que es el de
use callback
que es muy similar
al de las referencias
pero lo que hace
es guardar
una función
también con el
ref
podríamos guardar
una función
pero es un poquito
más
de hecho
lo podríamos
lo podríamos mirar
sería hacer así
teníamos aquí
el
the bounce
handle
tal
guardamos esto
pero claro
es un poco más
porque lo que tendríamos
que hacer aquí
es guardarlo
dentro de current
y al ejecutarlo
además
deberíamos ejecutar
esto
el punto current
si guardamos los cambios
esto debería funcionar
vale
bueno
vemos
estos truce
en realidad
es el componente
que se está volviendo
a renderizar
vale
es este
que podemos ver aquí
este near screen
claro
esto puede ser
por un montón
de temas
al final
cuando hemos pasado
de is near screen
lo hemos pasado
de false a true
este componente
se sigue renderizando
porque le llegaba
nueva información
o porque el is near screen
cambia
o por otras cosas
podríamos hacer
en el
live este
de ver performance
por qué ocurre esto
pero por ahora
sabemos que se renderizamos
más de una vez
y lo tenemos que controlar
de hecho
mientras dejamos esto así
vamos a solucionar
esto del once
vamos a solucionar
de que solo podamos
ver siempre
una vez que pasa true
pues ya no se puede hacer nada
vamos a hacer
que lo podamos
pasar de true a false
porque claro
este elemento
está cerca de la pantalla
y a veces deja de estar
cerca de la pantalla
así que habría que arreglarlo
entonces
en el use near screen
aquí vamos a añadirle
una nueva propiedad
que le vamos a llamar
once
once como de una vez
y lo vamos a poner
a true por defecto
para que siga funcionando
todo como debería funcionar
porque anteriormente
el valor por defecto
que pensábamos que tenía
era bueno
que dábamos por hecho
que tenía
era true
así que para que funcione
este hook
como antes funcionaba
lo vamos a dejar
como valor por defecto
como true
y ahora
para simplemente arreglar esto
lo que tenemos que decirle
es
no te desconectes
si es once
entonces
vale
desconectate
pero además
si el elemento
no está haciendo intersección
lo que vamos a querer
si no es once
es
pasarlo a false
esto es lo que vamos a querer
vamos a guardar los cambios
vale
ahora
como
voy a poner esto
un poquito más chiquitito
estoy en el final
pues lo teníamos a true
si subo
vale
pues
totalmente me ha ignorado
me ha ignorado
porque todavía no he utilizado
la propiedad once
vale
vamos aquí al once
aquí
en este
use near screen
vamos a poner esto por aquí
le estamos pasando el external ref
y ahora vamos a ponerle el once
y lo vamos a poner a false
en este caso en concreto
queremos
que no solo ocurra una vez
sino que se vaya actualizando
vale
vamos a ver si ahora esto funciona
voy a bajar
vale
ha pasado a true
subo
false
true
false
vale
o sea que
se está actualizando ese valor
vemos que sí que se está actualizando
ahora vamos a saber
vamos a poder ir
viendo
si ese elemento
deja de estar en el viewport o no
esto es súper importante
porque
¿qué pasa?
si lo dejamos a true
siempre
y lo que hacemos
es llamar al set page
que hemos visto antes
claro
cuando llamo al console log
no hay ningún problema
porque pasa true
no hago nada
no estoy volviendo a actualizar
el estado de los gif
no pasa nada
pero cuando llame al set page
si eso siempre está en true
y encima no tengo el de bounce
lo que va a ocurrir con esto
es que claro
va a haber un loop infinito ahí
pero a saco
entonces necesitamos
controlar las dos cosas
por un lado
el de bounce
pero por otro lado
tenemos que estar seguros
que ese use near screen
en algún momento
pasa a false
porque si siempre es true
pues esto no nos va a ayudar
¿vale?
entonces
ya tenemos
el use near screen
ya podemos pasarlo
de true a false
así que si voy arriba
se pasa a false
true y tal
perfecto
y ahora
que tenemos esto
pues vamos a seguir
con nuestro de bounce
lo había puesto en un ref
y os he comentado
que íbamos a ver
el use callback
así que
el use callback
es básicamente
muy similar
a lo que hace
el ref
porque
es muy similar
pero digamos
que es una mezcla
entre ref
y use effect
¿vale?
porque
sí que guarda
una función
entre diferentes renderizados
para que siempre sea
la misma función
pero por otro lado
acepta
un array
de dependencias
como use effect
para que ese callback
esa función
se actualice
cada vez que esas dependencias
cambien
¿vale?
entonces eso es un poquito
más potente que el use ref
en este caso
ya nos serviría
utilizar ref
o utilizar
el use callback
como está
pero le podríamos pasar
un array de dependencias
para decir
cuándo tiene que volver
a crear esa función
que hemos guardado
¿vale?
entonces
vamos aquí
al use callback
y aquí
en lugar de utilizar
este ref
ah no
este no
este
es que
al final
ah
sí sí es este
este este
este sobra
este sobra
vale
pues lo que vamos a hacer
es
aquí vamos a crear
la constante
del debounce
handle next change
esto lo
voy a poner aquí
como una
un comentario
para que no líe
vale
estamos en esta
entonces en lugar
de hacer esto
lo que vamos a hacer
es utilizar el callback
y el callback
lo que le tenemos que pasar
es la función
que tiene que crear
vale
así que
esto quedaría así
ahora ya nos dice
que el
use callback
no hace nada
cuando se llama
con solo un argumento
¿por qué?
porque el segundo argumento
es justamente
el de las dependencias
en este caso
no tiene ningún tipo
de dependencia
así que lo que tenemos que hacer
es que funcione así
y ya está
vale
ahora aquí está
utilizando el punto current
esto no tiene sentido
tenemos que utilizar
directamente la función
vale
pues ya tenemos esto
y ahora
si vamos aquí
hacia abajo
pues veo que
se ha pasado a true
pero no me ha llamado
no me ha llamado
el next page
pa pa pa
a ver
este de bounce
cuando pasa un segundo
a ver
a ver
aquí a lo mejor
hemos hecho algo mal
cuando pasa
vamos a quitar este
near screen aquí
y vamos a ponerlo aquí
y además aquí
vamos a poner
que cada vez que
cambio el near screen
vale
perfecto
y vamos a ver aquí
si realmente
tenemos el near screen
o es que al final
es el de bounce
este que es el que
no estamos
ejecutando correctamente
a ver
de bounce
vale
false
y true
vale
ahora con esto
si que hemos
arreglado
lo que no se
es porque no sale
el console log
a ver
ahora
ahora voy a ir
a los comentarios
para ver si lo habéis encontrado
pero una cosa
que hemos arreglado
poniendo las dependencias
del efecto
y moviendo
este console log
claro dentro del
near screen
pero lo que vamos a hacer
es que este efecto
se ejecute menos veces
vale
porque este efecto
solo lo vamos a ejecutar
simplemente cuando
el near screen
cambie
así que de esta forma
además vamos a limitar
que llamar a la siguiente página
se ejecute
vale
entonces voy a ver
el use callback
igual me estoy dejando
alguna cosilla
por aquí
ay
ya sé lo que me estoy
ya sé lo que está pasando
voy a los comentarios
a ver si os habéis dado cuenta
vale
y ahora
ya lo comento
vale
vale
dice
no será mejor
para este caso
el throttle
y evitamos cadencia
de invocatoria
del fetch
pues también puede ser
lo que
podríamos utilizar
el throttle
también
al final
el que
os parezca más interesante
en este caso
la verdad es que no sé
por qué he utilizado
el de bounce
el problema del de bounce
es que al final
va a tener que esperar
un lapso de tiempo
antes de hacerlo
es verdad
igual el throttle
tendría bastante más sentido
porque de esta forma
así
evitaríamos
el hecho de tener que
hacer al usuario
que espere
también es verdad
que si hacemos
que tenga suficiente
o sea
que detectemos
bastante lejos
que vamos a ir
a la siguiente página
lo tengamos
pero
me parece un ejercicio
interesante
así que os invito
que lo mováis
a throttle
y veáis
las diferencias
entre las dos
vale
que más
tu cámara tapa
el código
si
vale
a ver
donde puedo mover
esto
voy a hacer
más chiquitito
vale
a ver
perfecto
que más
está retornando
una función
con otra función
retorna esa función
vale
sí
y por ahí va
un poquito
el problema
dice
hola desde Cuba
salúdame
madre mía
soy saludador
hola
para nadie
pero es muy raro
el que salude
y te digas
para nadie
faltó
la dependencia
a llamar
en el use callback
la dependencia
no
es un poco
raro
vale
pero
el tema
el fallo
está aquí
está aquí
este use callback
vale
el tema
es que
el devounce
devuelve una función
no queremos
crear esta
y el use callback
necesita una función
entonces
este
estas tres líneas
de código
sobran
yo creo que es eso
no estoy seguro
pero creo que es eso
vale
ahora sí
ahora sí
vale
el tema es que
use callback
recibe una función
y esa función
es justamente
la que queremos guardar
el devounce
como podemos ver aquí
devuelve una función
en este caso
cuando la ejecutamos
guardamos en fn1
guardamos la función
esta función
es la que deberíamos
ejecutar directamente
y por lo tanto
antes
estamos haciendo esto
y esto que estaba haciendo
es una función
que devolvía una función
que devolvía una función
vale
o sea que
lo que sobraba
era esto
vale
entonces
ahora que ya tenemos esto
ahora sí
deberíamos ser capaces
de llamar
al set page
no sé si esto funcionará
pero vamos a probarlo
vale
vamos a probarlo
y
y efectivamente
efectivamente
bueno no se ha visto
pero
está haciendo
está haciendo la paginación
está haciendo infinity scroll
está haciendo infinity scroll
lo podéis ver vosotros
y no estamos rompiendo nada
y no hay un loop infinito
hay infinity scroll
en este caso
además he puesto bastante
que son 500
no sé
podría ser bastante bajo
para que
ni siquiera se note
un poco la diferencia
porque
podéis ver
bueno
ahora pues ya tenemos
un infinity scroll
pues me parece
una maravilla esto
y mira que funciona bien
ay que bien funciona
y además lo hemos puesto
con 10
o sea con 5
solo 5 cars
mira
hemos optimizado
como funcionaba esto
hemos conseguido
el infinity scroll
y además
no hemos hecho
ningún tipo de loop
bueno ahora
porque estaba ya al final
pero
vemos que no se dispara
vamos
que hace las llamadas justas
oh dios mío
cuando esto lo tengo
tan grande
y no soy capaz
de mover las cosas
me pone de los nervios
a ver
¿cuál es el que tengo que mover?
¿qué barra tengo que mover?
esta no la puedo mover más
vale
vale
esto es normal
pero no es un loop infinito
esto es porque hemos estado bajo
no
si yo bajo
es normal
que haga unas llamadas
¿no?
claro
además como tiene tan poco espacio
vete a saber
a ver
¿cuántas está haciendo?
hace una
cuando está al final
solo hace una
que es justamente lo que queremos
pero claro
si vas muy a saco
es posible
que detente
claro
que se ponga a hacer llamadas
pero si vas poco a poco
y te acercas al final
esto podríamos apurarlo
también con la distancia
¿no?
para detectar
infinity scroll
podríamos hacer que lo detecte
con muchísima antelación
y así pues tengamos
una paginación
fina fina
pero funciona bien
está haciendo una sola paginación
página por página
cuando llegamos al final
pata
vale
seguro que se puede mejorar
y ahí os dejo el ejercicio
para hacerlo
dentro de lo que cabe
es verdad que
esto
el use near screen
el cómo lo habíamos pensado
con
que nos devolvía la referencia
igual lo ha complicado un poco
¿vale?
igual si
desde siempre hubiéramos hecho
que recibiese una referencia
y tal
claro
como esto lo estamos haciendo
y lo vamos construyendo poco a poco
claro pues
a lo mejor no lo habíamos pensado bien
pero creo que
dentro de lo que cabe
ha creado
un hook
pues que es reutilizable
tanto
si lo quieres utilizar
con la referencia
que te pasa
o pasarle una
y no está mal
y además ahora
pues ya podemos observar
un elemento más de una vez
así que
no está mal
¿vale?
¿qué cambios dice esto
que no he guardado?
¿vale?
lo importante es que funciona
¿se puede explicar un poco
use callback?
claro que sí
mira
el use callback
al final
es una forma
de evitar
volver a crear
la misma función
entre renderizados
¿por qué?
porque si tú
haces esto
y aquí creamos
imaginemos
un handle click
¿vale?
y yo aquí pongo
pues una
que esto es una función
bueno
no sé por qué
vale
vamos a ponerlo así
y aquí pongo
hola
¿vale?
vamos a poner
voy a hacer esto
un poquito más grande
uuuh
igual demasiado grande
pero bueno
creo que sobre todo
te fijas en estas tres líneas
este handle click
que
que es
parece una función
súper sencilla
¿verdad?
bueno
que sencilla
pero el tema
es que
esto es una constante
que está dentro
del cuerpo
de una función
¿y qué pasa?
que cada vez
que renderices
tu componente
estás creando
una nueva función
esta función
se vuelve a crear
en cada renderizado
¿vale?
eso es un problema
porque en este caso
¿por qué deberías
volver a crear
esta función
aunque sea tan sencilla?
normalmente
el impacto
en performance
que tiene esto
es muy bajo
pero hay dos casos
en los que quieres
quizá controlar esto
y no volver a crear
la función
en cada renderizado
¿no?
de la misma forma
que he pasado
las referencias
en el primer caso
es porque lo que haces
en la función
puede ser muy costoso
puede ser que
que esa función
realmente sea muy costosa
y que crear
esa función
pues sea algo costoso
¿no?
y que reciba
muchos parámetros
y que solo se tenga
que crear
cuando realmente
lo amerite
pues por ejemplo
cuando cambie
un parámetro
que le llegue
al componente
esa puede ser una razón
la segunda razón
a lo mejor
es porque necesitas
tener esa exacta
misma referencia
que es justamente
lo que nos pasa a nosotros
nosotros necesitamos
que entre renderizados
del componente
ese método
que llamamos
esa función
sea la misma
entre renderizados
no queremos perder
la referencia
porque tenemos que ser
capaces de utilizar
el devounce
para saber
cuántas veces
se ha ejecutado
esa función
y evitar
hacer la llamada
innecesariamente
¿no?
para evitar que se ejecute
más de una vez
entonces
si lo que queremos
es que esta función
se guarde
lo que podemos decir
es vale
pues haz
use callback
y lo que le pasamos
como parámetro
al use callback
es justamente
la función
que queremos
que se guarde
ahora
al hacerlo así
ya nos dice
oye
bueno
en este caso
no dice handleclick
no estamos utilizando
handleclick
pero hay otro error aquí
el use callback
nos va a decir
que tal y como está hecho
tal y como lo estamos
haciendo aquí
no sirve para nada
esto que acabo de hacer
no sirve para nada
esto es inútil
totalmente inútil
¿por qué?
porque básicamente
este use callback
va a volver a crear
la función de dentro
cada vez que se renderice
porque de la misma forma
que pasa con el use effect
no le hemos pasado
ninguna dependencia
y lo que entiende
el use callback
es
ah vale
esta función
que me has pasado aquí dentro
la tengo que crear
cada vez que me renderice
porque no tengo
ninguna dependencia
pues no
lo que quiero
es que solo la crees
una vez
esto significaría
igual que use effect
esto significa
que se ejecuta
solo cuando el componente
se renderiza
por primera vez
aquí lo que le estaríamos diciendo
es que esta función
solo la cree
esto de aquí dentro
lo va a guardar
dentro del handle click
solo una vez
solo
cuando
se crea
cuando se renderiza
por primera vez
el componente
imaginemos
que esto en realidad
este handle click
pues hace más cosas
y por ejemplo
pues toma los gif
¿no?
y dice bueno
cada vez que hago click
pues cojo
bueno un alert
es un poco raro
pero cojo los gif
y cuento cuántos hay
¿no?
digo
digo cuántos hay
claro
¿qué pasa?
que este método
ahora tiene una referencia
dentro de su cuerpo
tiene una referencia
algo de fuera
si lo de
lo de fuera
cambia
y estamos guardando
la función
¿qué va a pasar?
pues que este gif
.lel
siempre nos devolvería
el número
que tuviese
en el momento
que se creó
la función
y no queremos eso
le queremos decir
que tiene una dependencia
que esta función
queremos que se vuelva a crear
cada vez que los gif cambien
y esto es muy interesante
porque el componente
se puede renderizar
80.000 millones de veces
pero hasta que no cambien
los gif
esta función
no se va a volver a crear
lo que puede hacer
puede pasar
que tu componente
se renderice
80 veces
pero este handle click
solo se crea dos
porque solo son
las dos veces
que ha cambiado
el valor de gif
¿vale?
en nuestro caso
lo que queremos
en nuestro caso
en realidad
no tenemos
ninguna dependencia
no tenemos ninguna dependencia
porque nada
de lo que está pasando
cambia
podríamos ponerla
de set page
pero se supone
que no debería cambiar
el set page
pero bueno
podríamos ponerla
creo que sería
lo más correcto
poner set page
y esto debería funcionar
correctamente
¿por qué?
porque lo que estamos
diciéndole es
vale
crea
guárdame esta función
y esta función
que es justamente esta
está aquí dentro
esta
esta parte de aquí
¿vale?
esta función además
queremos controlar
cuántas veces se ejecuta
de forma que evitemos
que si se llama
cinco veces de golpe
¿vale?
en un lapso
de 200 milisegundos
solo
se ejecute una
¿vale?
entonces
para eso hacemos el debounce
esto nos devuelve la función
que es la que queremos
guardar
dentro del use callback
el problema
es que claro
alguien me podría decir
bueno
pero esto
pues igual
mejor si lo haces
en otro sitio
claro
podríamos
si hiciésemos algo así
aquí tendríamos otra vez
el mismo problema
y es que
esta función
que tenemos aquí
esto podría funcionar
uy
función es un poco raro
pero estaríamos creándola
o sea
la que guardaríamos aquí
en handle page
handle page
y esto ya no tiene ninguna
vale
use callback
y esto
a ver
esto sería así
es que he puesto esto
tan grande
vale
podríamos hacer esto
¿vale?
y esto funcionaría correctamente
podríamos poner
el handle page fuera
y utilizar el use callback
y pasarle la función
que creemos
que se guarde y tal
lo que pasa
es que estaríamos creando
esta función
innecesariamente
fuera del cuerpo
de la función
cuando luego
en realidad
no la va a guardar
es un poco raro
pero bueno
si se entiende mejor así
tampoco tiene un coste
muy grande
digamos que estamos perdiendo
parte del beneficio
que nos daría
use callback
parte
si lo metemos
dentro del cuerpo
de la función
al menos solo se ejecutará
cuando realmente lo necesite
esto react
lo detectaría automáticamente
creo que no ha roto nada
¿no?
vale
use memo
use memo
es parecido a
use ref
y a use callback
solo que es como
use callback
pero para valores
¿vale?
y también para
pues si costase mucho
calcular un valor
pues se podría utilizar esto
para decir
vale
hay una computación
muy bestia
para calcular este valor
pues utilizo use memo
y solo cuando cambien
estas dependencias
pues también
lo ejecuto
y lo vuelvo a calcular
es muy parecido a use callback
pero en lugar de para una función
es para un valor
¿vale?
es una función impura
sí
impura
y si son dos arrow functions
use callback para cada una
o una para ambos
ostras
ahí me has dejado loco
no he entendido muy bien la pregunta
si son dos arrow functions
a ver
puedes utilizar
puedes tener para cada una
un use callback
puedes tener tantos use callbacks
como quieras
igual que puedes tener
un millón de use effects
¿vale?
si necesitas tener cuatro use callbacks
lo mejor sería tenerlos separados
y tal
de hecho
si tienes un handle click
o handle
lo que sea
pues los separarías en dos
¿vale?
¿qué más?
pero entonces estaría guardando
valor en memoria
para mantener ese valor
¿no?
sí
estamos guardando en memoria
la función
tal cual
estamos guardando en memoria
esa función
justo esa función
que solo va a cambiar
cuando cambien las dependencias
tal cual
muy bien
a ver
¿qué más?
voy a ponerme en primera
en primera persona
para leer vuestros comentarios
¿vale?
Miguel
con tus vídeos
ya he aprendido bastante
thanks
¿algún buen site
que tú nos recomiendas
para leer
aprender React
más en profundidad
aparte de la documentación
oficial de React
yo tengo
os voy a decir
un sitio
súper chulo
para aprender cosas
de React
bueno
este
está muy bien
este es mi blog
es mi blog
y tiene cositas de React
no tiene tantas
como debería
pero bueno
que escribo artículos
más allá de esto
ver mis vídeos
es que la verdad
para cosas avanzadas
de React
pensaré
¿vale?
pensaré sobre ello
yo es que tiro mucho
de GitHub
tiro mucho de proyectos
en GitHub
miro que se está moviendo
a veces sí que hablan de ello
en sitios como CSS Tricks
pero tampoco mucho
de cosas avanzadas
no sé ahora mismo
no caigo
no caigo
así que pensaré
a ver si se me ocurre
alguna cosa
y te comento
¿vale?
¿qué más?
tú tú tú
Miguel
pero esa función
se define
no dentro del componente
¿se vuelve a definir?
si se define
no entiendo la pregunta
así Crocs
porque está un poco rara
¿vale?
pero si esa función
se define
no dentro del componente
¿se vuelve a definir?
claro
puedes hacer otra cosa
podrías hacer otra cosa
podrías crear esa función
fuera del componente
pero tienes un problema
en este caso
en este caso
tendríamos un problema
¿vale?
imaginemos
lo que tú dices
dices
no pues
esta función
por ejemplo
esta función
la creamos fuera
¿no?
la creamos aquí
y ya está
next page
vamos a llamarle
vale
pero tenemos un problema
¿no?
y es que
este set page
no funciona
entonces
deberíamos
inyectar
el set page
entonces
al next page
le deberíamos
lo deberíamos poner aquí
así
pero claro
el next page
en realidad
necesita el set page
entonces
el de bounce
ahora
tenemos que hacer así
y ¿qué pasa?
que al final
esto
es crear una función
aquí estaríamos creando
una función
y por lo tanto
te volverías a necesitar
exactamente lo mismo
el problema es que
con esta dependencia
pues
claro
podríamos ir más a lo bruto
y guardarlo
en una variable
pero el problema de eso
es que en realidad
en este caso
este componente
es verdad
que lo utilizamos una vez
pero imagínate
que es un componente
que se utiliza más de una vez
entonces
no es buena práctica
guardarlo en una variable
¿vale?
aunque pudiésemos poner aquí
el
the bounce
handle next page
aquí
y hacer algo raro
que podría llegar a funcionar
no lo recomiendo
¿vale?
esta sería la forma
creo
más correcta
de hacer
este caso
¿vale?
¿qué más?
¿cuál es la diferencia
entre use effect
y use layout effect?
es muy sutil
es muy sutil
el use effect
aunque
siempre digo
que es cuando se renderiza
en realidad
puede haber cosas
que no están renderizadas
en el DOM
del todo
¿vale?
entonces
puede ser que haya elementos
que no estén
bien formados
en cuanto a su tamaño
a los atributos
de su tamaño
por ejemplo
pues
cuanto mide
the width
the height
lo que sea
¿vale?
entonces
sobre esto
el use layout effect
te asegura
que los elementos
en realidad
ya puedes calcular
cuánto miden
no se suele necesitar
¿vale?
a no ser que necesites eso
pues ir al elemento
y mirar
pues cuál es su width
o su height
o cuál es
su posición en la pantalla
y tal
pero en nuestro caso
pues no lo necesitamos
y normalmente
no es interesante
porque ocurre
en un momento
que a lo mejor
es un pelín más tarde
¿vale?
entonces
esa sería un poco
la diferencia
Christopher Ramírez
me dice
si tengo cursos
en Udemy
sí que tengo
tengo uno gratuito
pero está un poco
desactualizado
¿vale?
y lo reconozco
y no lo voy a poder
actualizar
porque
prefiero daros
estas clases
que
meterme en una habitación
y hacer
otro curso
o actualizar el que tengo
porque no me da la vida
¿vale?
¿vale?
y
¿algún repo
de GitHub
interesante con React?
pues ahora mismo
tampoco caigo
pero
lo pensaré
Carlos
¿vale?
vale
no me va a dar mucho tiempo
a mirar mucho
temas de test
pero alguna cosa
me gustaría enseñaros
sobre todo
para que veamos
que funcionan
y me gustaría
dejaros los deberes
para que
uy
voy a quitar mi web
que ya os habréis quedado
con ella
ay
bueno
no ha estado mal
¿no?
el tema del Infinity Scroll
ha estado
interesante
ha sido
ha sido cansado
ha sido cansado
tengo unas neuronas
vale
vamos a ver rápidamente
el tema del testing
vamos a ver alguno
que podríamos hacer
al menos para tener
rápidamente
algunos Quick Win
hay uno
que a mí me parece
que es demasiado fácil
y que no sé
por qué
no hacemos más
¿vale?
voy a crear una nueva
una nueva pestaña
por aquí
no sé si hay
no sé si hay test
ya
vamos a probar
ejecutando
npm run
podemos ver
todos los scripts
que podríamos ejecutar
hay uno que es de test
esto viene
porque en un vídeo anterior
pues lo hicimos con
create backup
y ya viene todo esto preparado
lo cual está genial
así que vamos a hacer
npm run test
y vamos a ver
vale
sí
parece que hay uno
vale
y ya nos está
fallando
no sé por qué
me está fallando
pero me está fallando
por algo
no sé si es porque
no tengo la dependencia
bueno
ahora lo veremos
vamos a ver
es este
hay en diferentes
supuestos
donde los test
los detecta
creo que es en una carpeta
barra baja
barra baja
test
también si tienes
este tipo de archivo
luego probaremos
a ver si somos capaces
de tener diferentes
a ver
por qué fallaba esto
no puede encontrar
el gesto
tu tu tu
de setup test
setup test
voy a hacer un npm install
mientras
porque me da mala espina
esto
porque eso debería funcionar
a ver
mientras esto lo hace
voy a comentar esta línea
a ver
si funcionan los test
y a ver
por qué
por qué falta
ay
creo que ya sé
que puede ser
creo que ya sé
que puede ser
el tema es que
actualicé
estas dependencias
y no debería
haberlo hecho
ay
claro
es que esto
lo actualicé
y puede ser
que no
no le gustase
vamos a ver
voy a copiarme
en un momento
las dependencias
que eran anteriores
y
a lo mejor
por eso
no le gusta
bueno
pues si
ah no
claro
esto es el
esto es master
vamos a ver
la primera clase
cuando creamos la app
y aquí hicimos esto
teníamos estas
claro
a lo mejor
es que claro
es que yo también
actualizando las cosas
a saco
a saco
sin miedo
no hay miedo
pues voy a tener que hacer
un reinstall
así que
o voy a probar
a hacer un reinstall
así a
a las buenas
ahí
a ver si esto
nos hace que funcione
y si funciona bien
y si no
pues veremos
a ver que hacemos
pero lo dejaremos
para el siguiente vídeo
le vamos a hacer
vale
mientras vamos a ver
un poco el test
el test
en este caso
el app.test.js
que tenemos aquí
ah mira
ya ha terminado
voy a intentar ejecutarlo otra vez
al menos que no de ese error
porque me parece muy raro
el error este
ese error es como que le falta
ah no vale vale
si si ya funciona
bien
ya está
fantástico
vale
muy bien
voy a hacer esto
lo más chiquitito que pueda
para que haya bastante código
vale
bueno
entonces
volvemos
mpn run test
esto hace
se ejecuta los test que tenía
ahora pues solo tenemos este test
de app.test
y en este caso
pues ya está fallando
y está fallando
porque no está encontrando
el texto
esto como es el test
que hay por defecto
pues no está encontrando este texto
porque no tiene sentido que lo encuentre
lo que podríamos es adaptarlo
pues para ver si funciona
nuestro
nuestra aplicación
así que
vamos a ver
la home
la home funciona bien
bueno
en este caso
pues lo primero que podríamos hacer
que parece una tontería
pero es que es el test más obvio
es asegurarnos
que nuestra
nuestra aplicación renderiza
esto
os voy a decir algo
esto es el 80%
bueno
igual el 80% es demasiado
vale
pero es
es básico
eh
es básico
yo creo que este
debería ser
si no tiene ningún test
al menos poner este
tampoco te cuesta tanto
entonces podemos
podemos utilizar
las dependencias
que está utilizando
que son muy interesantes
la de testing library
y está utilizando
también jest
jest es lo que está utilizando
para los expects
entonces vamos a hacer
un poco línea por línea
lo que está haciendo
y vamos a ver
vamos a explicar
vale
primero
pues por supuesto
importamos react
porque lo necesitamos
¿por qué?
porque tenemos jsx aquí
y lo necesitamos
si lo quitamos seguro
que nos avisa
lo dice
¿ves?
lo dice
que react tiene que estar
vale
pues nada
pues ya está
luego
estamos importando
el método render
de testing library react
esto lo que va a hacer
es renderizar
el componente
que le estamos diciendo
lo interesante
es que esto es un poquito
diferente
al render
del react DOM
porque le está añadiendo
diferentes utilidades
y funcionalidades
además de que
por dentro
pues está renderizándolo
en un
no es un DOM virtual
pero casi
¿vale?
donde va a estar
nuestra aplicación
no va a ser como
hacemos a lo mejor
en react DOM
que lo vamos a convertir
a un string
sino que aquí
en este caso
se va a convertir
realmente
en algo que
vamos a poder
consultar
vamos a poder
buscar un elemento
más allá de leer
el string
¿vale?
así que
el render
de testing library
aquí estamos importando
pues nuestro componente
nuestra aplicación
tenemos test
podemos añadir
tantos test
como queramos
podemos decir test
pues aquí
podemos poner otro
como queramos
y le decimos
un poco el nombre
descriptivo
que queremos
para el test
en este caso
pues hemos puesto
renders learn
no
renders without crashing
crashing
para saber que
no va a petar
luego aquí
lo que estaba haciendo
y esto es muy interesante
cómo funciona
react testing library
react testing library
vale
react testing library
tiene una forma
un poquito especial
de hacer queries
a ver si encuentro
la web aquí
de hacer queries
al dom
y es que
ya te recomiendan
no utilizar clases
no utilizar
elemento
ideas
y cosas así
así que
a ver
nosotros vamos a tener
que mirar ahora
este
queries
tiene una serie
de métodos
para consultar
el documento
y ver
lo que ha ido bien
lo que ha ido mal
no
buscar los elementos
y encontrarlos
tienes
la posibilidad
de encontrarlos
de forma síncrona
o asíncrona
que eso también
es bastante interesante
he visto que en el packet json
está dando la versión 9
y por lo tanto
hay cosas que
la 10 han cambiado
que han deprecado
y han eliminado
en este caso
pues vamos a utilizar
un poco lo de la 9
aunque si utilizamos
el wait for element
pues está deprecado ya
vale
pero aquí podemos ver
las queries
aquí los podemos ver
para tomarlo
por label
el texto que tiene una label
por el playholder
por texto
por el alt text
por el título
por el display value
por el role
o por el test ID
vale
ya puedes ver
que los métodos
te están diciendo
un poquito
no solo te están diciendo
el orden de importancia
de cómo debería recuperar
estos elementos
sino que te está diciendo
cuál sería la idea
de cómo tienes que hacerlo
y la última opción
sería el test ID
y ni siquiera tienes
la opción de hacerlo
por class name
fíjate
si no se fían
de que sea la correcta
vale
así que
ya lo sabes
en este caso
lo está tomando
get by text
en nuestro caso
en la home
el get by text
lo podríamos utilizar
por este
última búsqueda
que ahora que lo pienso
así debería funcionar
y esto debería ser
en lugar del link element
pues para nosotros
sería el title
vale
title
y aquí
lo que estamos haciendo
es pues espero
que este valor
de title
bueno este valor
no
este elemento
porque el get by text
que lo que hace
es recuperar este elemento
de forma síncrona
lo que está diciendo
espero que este elemento
esté en el documento
vale
así que si
voy a quitar
punto y coma
vale
pues ahora
debería funcionar
no sé
mal
peta
vale
ya nos está diciendo
que no debería petar
y nos dice que
to be in the document
no es una función
esto
en realidad es
porque no es una función
esto
es porque
lo que he comentado antes
el import este
que he hecho
de el extend expect
es el que
está añadiendo
este método
to be in the document
por defecto
gest no piensa
en el dom
no piensa
si estás en una web
en una página
sino que
directamente
digamos que es una utilidad
de testing
para testear código
pero no cosas
que tengan que estar
en el dom
entonces
esta es una funcionalidad
que te añade
esta librería
de testing library
que digamos
que extiende
un poquito más
la funcionalidad
que te da
gest
por defecto
así que este
era el problema
claro
el problema
es que esta función
no funcionaba antes
por las dependencias
pero ahora sí
podemos ver que funciona
vale
hay un tema
que es bastante importante
que dicen
que si no ves un test
como peta
pues ese test
nunca sabrás
si valía para algo
una cosa
que podríamos hacer
básicamente
es quitar la 1
y ver si realmente
esto peta
que peta
efectivamente
porque no encuentra
ningún texto
que sea última búsqueda
vale
esa sería una forma
de verlo
otra
que podríamos hacer
más que el test
podríamos decir
bueno pues vamos a ver
nuestra aplicación
si vamos a la home
realmente
y aquí en lugar
de última búsqueda
pues ponemos
búsqueda
ver si esto peta
y efectivamente
esto peta
vale
es importante
no hagáis un test
veis que está en verde
y pensad
al siguiente
no al menos
tenéis que ver una vez
que esté en rojo
porque si no
no es que sea
un test
muy de fiar
vale
así rápidamente
porque no tenemos
mucho tiempo
cosas que se me ocurren
pues que podríamos hacer
lo voy a hacer aquí a saco
bueno
venga
vamos a hacerlo
en otro fichero
habíamos dicho
que encuentra
los ficheros
app.test
no sé si se ve
o está a mi cabeza
vale
está a mi cabeza
aquí
app.test
vale
creo que también encuentra
la carpeta
test
así
test
creo
voy a añadirlo aquí
y lo probamos
a ver si funciona
entonces
esto
ahora que he hecho
que he hecho
que esto
es porque lo deja vacío
vale
ahora se está quejando
sí que lo ha encontrado
vale
o sea que la carpeta
esta con test
así
también funciona
entonces vamos a copiar
este test
rápidamente
lo guardo
y ahora
ah bueno
y ahora es claro
como esto es relativo
pues esto ahora ya no funciona
así
esto debería ser así
vale
a ver ahora
sí
ahora funcionan
los dos test
solo que este test
pues no tiene mucho sentido
porque es el mismo de la app
uno que podríamos hacer así
rápidamente
es ver si la home
pues funciona
como esperamos
a suspecte
antes de darle
voy a poner esto así
y antes de darle
voy a leer
vuestros comentarios
a ver que me contáis
a ver que me estáis comentando
vamos
podría ser el próximo directo
utilizar el use near screen
para los gif
un hook para la carga
de todos los gif
un hook para dominarlos a todos
y tenerlos en las tinieblas
vale
me lo miraré
a ver
lo que me da miedo
es tener que adaptarlo
vale
porque
o sea
ya lo tenemos funcionando
pero bueno
a ver
lo podría mirar
solo que en un live
no sé si hacer cosas más generales
vale
Andrés
nos comenta
que detecta por defecto
todo lo que acabe
en .test
o .spec
mira .spec
exacto
no me acordaba
pero como podéis ver
también detecta
si tienes una carpeta
que sea
barra baja
o sea
guión bajo
guión bajo
test
guión bajo
guión bajo
bueno
el que prefiráis
que termine en test.js
.spec.js
o dentro de una carpeta
vale
lo que queráis
dice uno
yo prefiero usar en q
en vez de usar
esa de
v
de visual studio code
la otra vez
puse esa extensión
y me dejó el problema
ok
no sé de qué extensión
estaba hablando
pero vale
que bueno
como haces para que
en producción
no estén los archivos
de test
hay mil formas
en este caso
yo estoy bastante seguro
que nos lo solucionará
react de gratis
me extrañaría
que los dejase
que igualmente
vamos a probar
vamos a hacer un build
aquí así
perdón
que estoy yo en primera persona
y no se ve
bueno estoy haciendo un build
a ver
por ver
a ver si los
si los quita o no
y veremos
a ver dentro de la build
pues
no
no están
no están
porque
claro
la build
al final
como lo que haces
empaquetar
donde
hagas imports
pues ya está
si de ese archivo test
no se hace un import
dentro de los componentes
o desde el punto de entrada
de tu aplicación
o en cualquier sitio
del punto de entrada
de tu aplicación
pues no lo va a hacer
¿vale?
hola Miguel
el tema está interesante
pero he llegado tarde
me tocará ver la grabación
pues ahí estará
disponible
¿qué más?
no tengo definido el topic
del que voy a hablar
el próximo viernes
no lo sé
igual nos seguimos con React
y vemos algo de Deno
no lo sé
no lo sé
veremos
¿es un proyecto real
qué tipos de test
se suelen hacer?
pues en un proyecto real
pues
a ver
en un proyecto real
se suelen hacer
muchos test
de muchos tipos
pero bueno
sobre todo
de end to end
se suelen hacer
sobre todo
los más importantes
de integración
que estos que estamos
haciendo aquí
son
bastante de integración
también se suelen hacer
unitarios
para temas en concreto
aunque
a lo mejor
no tanto
no tantos
unitarios
más de integración
parece mentira
pero tienen que integrar
por ejemplo
cualquiera
es que es un debate
muy largo
porque puedes entender
que cuando ya
testeas un componente
ya es integración
porque tiene algo
de integración
¿vale?
¿conviene usar
hook personalizado
o javascript puro?
a ver
a veces tiene sentido
el hook personalizado
y otras veces
el javascript puro
por ejemplo
por ejemplo
en este caso
de los servicios
que hicimos aquí
pues a mí me gusta
tener esto
en javascript puro
¿por qué?
porque este archivo
podríamos ir
a un proyecto
de Angular
y imaginad
que queremos hacer
un proyecto de Angular
que sea sobre GIF
y queremos hacer
un buscador de GIF
con Angular
pues
es que estas funciones
funcionan perfectamente
y no estamos acoplados
en ningún momento
a React
que además
podríamos llegar
a otro nivel
y hacer repositorios
y incluso
tener typescript
y detectar
los tipos
que las transformaciones
hagan correctamente
validaciones
un montón de cosas
y lo mejor
es que eso
lo podrías utilizar
en cualquier sitio
pues
yo diría que eso
ahora
cuando ya estamos
gestionando un poquito
como funciona
dentro de React
pues entonces
ahí sí que
ya pasaríamos
a otra cosita
vale
¿qué más?
¿qué más?
excelente
directo
muy interesante
todos
por cierto
las hamburguesas
estaban de lujo
que malo
React Router
Code Splitting
versus React Lazy
o en conjunto
bueno
React Router
lo necesitas
para hacer Code Splitting
que por cierto
alguien me lo dijo
y me parece muy interesante
pero
sí
el ejemplo más típico
de hacer
hacer split
de rutas
lo tendríamos aquí
en la
en la app
¿no?
aquí
que teníamos
las rutas
que ponía
component
search results
la home y tal
esto
esto podría hacer
un Code Splitting
brutal ¿no?
porque solo tendríamos
que hacer
home page
React Lazy
y aquí ponemos
esto así
y aquí lo que importamos
en lugar de ponerlo aquí
pues lo pondríamos aquí
hacemos un import
de la home
que esto sería
en pages home
y ahora este componente
lo utilizamos aquí
ahora esto va a petar
porque no tenemos suspense
pero nada
pues ponemos suspense
esto es un suspense
ponemos el fallback
a ver
el fallback
estaría muy bien
currárselo un poco
pero bueno
en este caso
pues nada
a ver
esto estaría justo
debajo de la sección
guardamos los cambios
importamos aquí
suspense
ya tenemos aquí
un lazy load
ahora la home
solo se cargará
cuando se necesite
y hará el import dinámico
si fuésemos directamente
bueno aquí lo podemos ver
si vamos a los javascript
pues veremos
quién nos ha creado
aquí este chunk
que este chunk
debe ser la home
seguramente
si no es este
pues debe ser este
pues sí
este es
este
porque teníamos trending searches
ah no
este no
este no es
este es el otro que hicimos
es este
es este
pues este
esta es la home
directamente
aquí tendríamos un chunk
que sería la home
pues ya tendrías
esto sería utilizando
real router
y utilizando
react lazy
o sea que tendrías las dos
el tema
es que esto
solo funciona en client-sand rendering
que ese es otro tema
pero bueno
vale
¿qué más?
excelente direct
vale
¿recomiendas utilizar
Next.js para tu primera app
de React?
sí
Next.js para la primera app
me parece brutal
me parece muy buena solución
y creo que te dan
muchas cosas solucionadas
es muy potente
así que sí
¿qué más?
¿qué más?
¿podría mostrar un test
de cada tipo?
así sean pequeños
por favor
no nos va a dar tiempo hoy
pero un live de testing
con test de integración
y tal
lo veremos
voy a terminar
el que iba a empezar
si os parece
de cada uno
no encuentro los elementos
cuando los busco
vale
Sergio dice
me encanta el lazy load
con rutas
solo me faltan las pruebas unitarias
para ver el renderizado
de cada una
por ruta
no encuentro los elementos
cuando los busco
vale
eso me parece interesante
¿no?
porque ahora
hemos hecho
ahora
la home
es asíncrona
bueno
que antes también lo era
pero bueno
pero el contenido
incluso el de última búsqueda
todo
es asíncrono
por lo tanto
igual ahora
si hacemos
ejecutamos los test
vamos a ver
efectivamente
ahora los test fallan
vamos a verlo
pero sí
sí
ahora uno falla
y el que falla
es el que no
encuentra el texto
anda
interesante
vamos a ver
vamos a ver
cómo podemos arreglar esto
y así
pues
podemos solucionar
el error
que comentaba
claro
ahora alguien puede decir
ostras
pues ahora nuestra aplicación
se rompe
bueno
yo este
este
este
este
este test
seguramente lo cambiaría
porque claro
estábamos tirando de algo
que realmente
puede no estar
porque a lo mejor
es la página
a nivel de página
que no funciona
pero lo que podemos hacer
es solucionarlo
¿no?
en este caso
he dicho
que el get by text
es síncrono
entonces
tiene otros
que te permite
buscar elementos
de forma asíncrona
entonces
por ejemplo
en queries
a ver
para enseñaros
vale
tenemos
get by
query by
y find by
hay un cheat sheet
aquí
que te dice
cada uno
si es asíncrono
o si no es asíncrono
en este caso
tendríamos el find by
el find by
es el que justamente
nos va a ayudar
en este tema
ahora tengo dudas
si esto funciona bien
para la versión
o funciona como me gustaría
en la función 9
pero bueno
lo vamos a probar igual
y ya está
entonces vamos a poner aquí
que esto ahora es un test
que es asíncrono
y aquí vamos a hacer una wait
y ahora
en lugar de hacer un get by
vamos a hacer un find
find by text
y este find by text
lo vamos a tomar
del render
porque el render
nos devuelve un objeto
con un montón de utilidades
que para poder
inspeccionar
lo que hemos renderizado
así que con esto
no sé si funcionará
así de primeras
vale
pues ya está
ya lo hemos arreglado
ya está
ya es asíncrono
bueno podemos ver
si esto realmente
lo que decíamos
si realmente funciona
o si funciona de chiripa
o que está pasando aquí
así que vamos a cambiar
en la home
vamos a cambiar el texto
vale
y vamos a quitar esto
ponemos última
y ahora pues debería petar
si ahora pasa
pues nos deja fatal
no pero ya se nota
que no va a pasar
porque está tardando
y esto es porque
claro está haciendo
claro cuando nosotros
le decimos de forma
asíncrona que busque
un elemento
en realidad lo que está
haciendo es esperar
a que ese elemento
esté
y entonces
tiene un time out
para decir
vale
no lo he encontrado
pues definitivamente
si no lo he encontrado
en 5 segundos
es que esto
pues no existe
entonces por eso
ya se nota
cuando pasa
y cuando no pasa
cuando pasa
es bastante más rápido
cuando no pasa
por eso decía
que el estimado
pues decía
que era ese tiempo
vale
entonces esto sería
para hacerlo con rutas
que son asíncronas
vale
de esta forma
lo que tenemos
es una forma
de preguntar
de forma asíncrona
si un elemento
está o no está
esto mismo
nos podría pasar
por ejemplo
nos podría pasar
con los gif
porque los gif
también son
tienen el mismo
el mismo tema
pues yo que sé
podríamos hacer
bueno aquí ya hemos hecho esto
podríamos
bueno voy a enseñaros
un ejemplo
de test
malo
entre comillas
de cómo no hacerlo
con react testing library
pero que funcionaría
y que podría ser una solución
si queréis tirar
de las clases
vale
en este caso
vamos a renderizar
la app también a saco
y el render
también nos devuelve
el contenedor
sobre el que se ha renderizado
nuestra aplicación
vale
así que vamos a recuperar
el container
y ahora
lo que podríamos hacer
es un query selector
¿no?
un query selector
básicamente es como en el DOM
de decir
quiero que me encuentres
este elemento
vale
pues hacemos un query selector
y vamos a tomar
el gif
esto como teníamos
en la clase aquí
vale
papa gif link
vale
en un mundo ideal
lo que deberíamos
es que este gif link
tuviese pues
algún rol
algún atributo
de accesibilidad
o algo que nos ayude
a identificarlo
pero imaginad
por lo que sea
que no podéis
vale
pues lo tendríamos así
este sería el gif link
ahora
¿qué pasa?
que ahora
lo único que tenemos que decirle
pues si este gif link
es to be
era to be in the document
o to be visible
vale
podemos decirle
que ese link
pues a ver si ese gif link
pues lo encuentra
vale
ahora nos dice
que no es visible
lo cual es un poco raro
¿no?
porque yo lo estoy viendo
y es exactamente lo mismo
es el mismo problema
lo que está pasando aquí
es que aquí estamos intentando
encontrar algo
de forma síncrona
cuando en el render
hemos visto
que este elemento
no está
de hecho
lo más interesante
es que tú puedes hacer
aquí un console log
del container
y aquí
creo que debería enseñarte
efectivamente
bueno
en este caso
tienes el
tienes todo el
como el árbol
el objeto
¿no?
pero creo que
también podemos importar aquí
el screen
que el screen
es una forma
que nos habilita
a buscar más fácilmente
dentro de lo que hemos renderizado
así que así
pues también
podríamos hacer esto
y buscar directamente
ay no sé si el query selector
funciona en el screen
nunca lo he probado
no no
no funciona
el screen directamente
lo que tiene es
todas las funcionalidades
que nos hubiera devuelto
el render
¿no?
con todos los métodos
introspectivos
para ver
si realmente
está un elemento
o para recuperar un elemento
y todo esto
¿vale?
entonces no podríamos hacerlo
con el query selector
teníamos que hacerlo
con el container
¿vale?
entonces
un tema que podríamos hacer aquí
pero esto está deprecado
o sea esto no lo hagáis
en vuestras casas más
el problema
lo digo por si tenéis problemas
y claro
entendiendo que esta
es la versión anterior
pues bueno
ya he visto
cómo lo podríais hacer
con el find buy
pero si
por lo que sea
necesitarais hacer esto
en la versión anterior
en la 10
es la que es disponible
y esta es la 9
que es la que viene
con crew recap
por ahora
que yo sepa
¿vale?
lo que podéis hacer
es utilizar el
width for element
¿vale?
pero ya os digo
esto está
esto está deprecated
de hecho ahora
hay uno que se llama
wait
directamente
que podéis hacer también
cosas que sean
totalmente asíncronas
y esperar por ellas
entonces aquí
como esto ahora es asíncrono
esto es lo que debería
devolvernos
el wait for element
¿no?
teníamos que decirle
oye
encuéntranos
y espera
este elemento
el give link
y esto
ah
tengo que poner aquí
la 5
y esto
pues funciona
¿vale?
¿por qué?
porque como este
width for element
que está deprecated
¿vale?
de nuevo
os recomiendo
que utilicéis
el find by text
todos los find
utilizad siempre
que podáis
y siempre
utilizad find
si no podéis
pues lo preparáis
pero en el caso
de que
oye mira
esto es súper urgente
y no sé por qué
no me funciona
y la clase
y tal
pues bueno
el width for element
sé que está deprecated
y está en la última versión
pero lo podéis utilizar
y si no
pues a partir de ahí
utilicéis el wait
que es el nuevo
y esto es lo que
os consigue
es tener este elemento
y ahora que
todo es asíncrono
pues ya lo tendréis ahí
y ya lo tendría
esto funcionando
vale
vamos a hacer
el último test
rápidamente
y
next.js
¿para qué sirve?
¿qué ventaja
al lado de usar React solo?
Fernando pregunta
next.js
es un framework
que te lo da
todo
te da el server
side rendering
te da un montón de cosas
ya vale
entonces ya está
como preparado
para funcionar
fuera de la caja
con un montón
de funcionalidades
no tienes que configurar
nada
es muy parecido
adquirir backup
pero todavía más grande
vale
con un montón de cosas
entonces
voy a hacer
el último test
más que nada
para que veamos
tema de eventos
aquí tenemos el buscador
pues lo que vamos a hacer
es
vamos a hacer algo
muy
muy
por el tiempo
que tenemos
de probar el formulario
vale
search form
could be used
y aquí ya vamos a decir
que este test
pues va a ser
asíncrono
entonces
renderizamos nuestra aplicación
que esto
estamos haciendo
como test
muy de integración
que igual esto
lo que queremos
es pues solo probar
cosas más pequeñitas
vale
pero bueno
en este caso
es para que veamos
cómo podrían funcionar
a nivel de aplicación
ahora
podemos utilizar
el fire event
que es
una utilidad
que importamos
también
de testing library
y lo que vamos a hacer
en el fire event
es decirle
que nos cambie
el valor
del elemento
que tenemos
en el screen
que el screen
lo vamos a importar
también
que el screen
básicamente
es lo que ha renderizado
nuestra app
con todas sus utilidades
utilidades
y la utilidad
que queremos utilizar
es la de
get by roll
ah bueno
claro
ahora no puede ser
get by roll
porque ahora es
asíncrono
o sea que tiene que ser
tiene que ser así
find by roll
find by roll
y el roll
que queremos buscar
en este caso
esto es súper interesante
pero es bastante
vamos a buscar
textbox
vale
que pasa
textbox
por defecto
todos los elementos
de html
tienen un roll
aunque no le pongamos
específicamente
nuestro html
el roll
por ejemplo
un botón
tiene el roll
button
no button
pues un
input text
tiene el roll
textbox
todos tienen un roll
una imagen
tiene el roll
imagen
image
img
todos tienen un roll
por defecto
y por lo tanto
ya te permite
buscar directamente
por un roll
por defecto
en nuestro caso
este input
que por defecto
tiene este roll
podremos recuperarlo
con esto
así que vamos a hacer esto
input
creo que esto
debería funcionar
y vamos a poner
que el valor
que queremos poner
pues sea matrix
vamos a ver
si esto peta
directamente
o se me ha olvidado algo
vale
funciona
por ahora funciona
vale
entonces
el change
que yo sepa
no era síncrono
pero si queremos recuperar
una vez que hemos cambiado esto
vamos a
recuperar el botón
así que
await
screen
find by roll
y bueno
esto
obviamente
debería estar más trabajado
pero en este caso
como solo tenemos un botón
y un textbox
pues bastante más fácil
se lo hacemos así
así que ahora decimos
que hacemos un clic
en el botón
un clic en el button
y ahora
que es lo que sabemos
cuando hacemos esto
pues que cambia la url
¿no?
cuando hacemos aquí matrix
y vamos a buscar
cambia la url
pero sobre todo
que tenemos este título
bueno
pues podríamos buscar
este título
este título
para buscar este título
podríamos hacer una
wait
de screen
find by text
y el text pues
directamente matrix
que es justamente
el mismo valor
¿vale?
entonces esto
podría ser un poco
lo podríamos
dividir
un poco
así
para que
esté
más legible
ya tenemos el título
y ahora
esperamos
que esto sería
la parte de
jest
que al final
tampoco hemos visto
mucho de jest
pero bueno
esperamos que este elemento
pues esté visible
ya está
vamos a ver si esto funciona
si no funciona
os pido ayuda
en los comentarios
sí
está petando
está petando
algo está pasando
vale
nos dice que no puede
en un
no puede encontrar
este
este elemento
vale
vamos a ver
si me dais ideas
en los comentarios
a ver
qué es lo que puede estar pasando
porque este
button
bueno
a ver si
este button
debe estar
digo yo
a ver si
y vamos a poner
un only
aquí
para que sea más rápido
value
matrix
matrix
y find by text
el botón
sí que está
luego estamos
haciendo la wait
a ver si es que
cuando le damos
un clic
no funciona
esto
igual está detectando
un error de verdad
no
sí que funciona
vale vale
sí que funciona
y he hecho
un find by text
esto lo debería encontrar
bueno
a ver que me comentáis
a ver que me comentáis
enzime
está realmente atado
a react
excelente live
este fin de semana
replicar lo mismo
genial muy bien
yo hacía las pruebas
con jesse enzime
pero viendo que así funciona
y tiene un suscriptor
de pop vida
muy bien
sergio
muchas gracias
gracias por la respuesta
decía fernando
andrés decía
the bug
the bug
es verdad
the bug
testing
library
the bug
cierto
esto nos puede ayudar
vale
lo que podemos hacer
podemos ver que hay un
un
un método aquí
que podemos utilizar
que sea
the bug
oh
the bug
y esto
lo tenemos
aquí
pum
ay
que he hecho
que no lo he puesto
del
o esto
de donde venía
el de bug
esto
ay
es que el de bug
viene del screen
no viene de
esto viene
todo de bug
lo que me extraña
es
porque no encuentra
el fan by text
fan by text
no
es que de hecho
no me está haciendo
aquí la
me está haciendo
la llamada
o sea
sí que me encuentra
lo primero
pero este await
cuando estamos buscando
cuando estamos buscando
no lo está encontrando
o sea que
a este punto
sí que tenemos
sí que está haciendo
la llamada
pero luego
ya no tengo
nada de
oye a ver
fan by text
de que no encuentra
el
vale
fan by text
si lo ponemos
es que no
no lo está encontrando
no vemos
ay
claro
y yo aquí
ahora
ya está
ahora
ahora
no vemos la pantalla
exacto
sí perdón
perdón
que se me había olvidado
vale
a ver
screen
find by text
y tengo la wait
si hacemos un click
y el botón
sí que está
pues aquí esto
sí que me ha dejado loco
porque la verdad
es que daba por hecho
que esto iba a funcionar
tal cual
y en el debug
veo que me está
me dice claro
no encuentra el texto
de matrix
porque al hacer el click
se ha quedado todo
aquí
matrix
bueno
debería darle el click
aquí
y esto aquí
sí que funciona
y si ponemos
a ver
ahora
ahora sí
fernandinan
perdón
que os he dejado
sin el código
vale
no me está encontrando
esto
porque básicamente
es que obviamente
no está el
no está el
el elemento
lo que no sé
es por qué
no está el elemento
o sea no sé
si cuando le doy
aquí al botón
si es que
se me está colando
algo aquí
al poner el valor
no porque
ay dios
dios
que bueno
esto es buenísimo
ay dios
esto es lo que tiene
la magia
la magia de los live
vale ya he encontrado
el error
ay
sí
ya está
ya he encontrado el error
es que claro
yo he puesto aquí el change
y aquí he puesto el value
y luego esto
he puesto super happy
porque he pensado
sí no
es que esto se pasa
en el value
y ya está
y es que esto
no funciona así
esto no funciona así
el segundo parámetro
del change
esto es
el
el objeto del evento
claro
el objeto del evento
no recibe un value
esto recibe un target
y esto recibe un value
o sea que creo
que tiene que ser así
ahora sí
ahora sí
así quito esto
ha costado
estaba alucinando
vale
ahora sí que han pasado
vale
ahora sí que han pasado
voy a quitar el only
pues eso
el tema es que
bueno
está dando un warning
pero bueno
este warning
esto es por el trending searches
habría que ver
qué está pasando ahí
está interesante además
que nos dé este error
pero
ahora lo hemos encontrado
vale
mi error
era que
en el change
en el input
como segundo parámetro
le está pasando
directamente
el value
y no sé por qué
he pensado
con el value
ahí directamente
pero bueno
así veis que no me estoy
copiando el código
tal cual
de algún sitio
o sea que
realmente
es lo que tiene el directo
vale
entonces
lo podemos ver aquí
mira que
quería ir a la documentación
porque
aquí podemos ver
que el fire event
como primer parámetro
recibe el elemento
donde tenemos que hacer
ese evento
donde queremos disparar
ese evento
como el click
o lo que sea
claro
pero el segundo parámetro
es el evento
o sea puede ser todo
todo el evento
toda la información
del evento
vale
entonces
aquí de hecho se ve
que puedes hacer un fire event
y pasarle toda la información
del evento
luego tiene estos shortcuts
de utilizar el punto click
el punto scroll
el punto change
que es el que estamos utilizando
y aquí podemos ver
cómo
tienes que pasar el target
claro
y dentro del target
el value
hay que pensar
que lo que tienes que pasarle
son las propiedades
del evento
entre ellas
pasarle target
value
hay que pensar al revés
cómo recuperarías
ese código
en tu componente
pues harías un event
punto target
punto value
vale
bueno
pues nada
al final
hemos salvado la papeleta
con ese target
estaba ya pensando
que no lo íbamos a conseguir
pero lo hemos conseguido
juntos
y gracias a
a que me habéis dicho
que no veíais la pantalla
pero bueno
me veíais a mí
que a lo mejor
ya estaba guay
cosas que hemos conseguido
señoras y señores
amigos y amigas
hemos conseguido
este pedazo
de grid
que además
está haciendo un maravilloso
infinity scroll
vale
que
funciona bastante bien
que ya hemos visto
que
que vamos a dejar
como ejercicio
que
le pongáis con un throttle
para evitar
a lo mejor
ese retardo que tiene
vale
o al revés
o podemos
mejorar
un poquito
el
cuando
se va a empezar
que sea con bastante distancia
no que apure tanto
que tenemos que ir al final
que sea con más distancia
y además
pues hemos empezado
a hacer algún test
no tantos como hubiera gustado
pero bueno
llevamos ya dos horas y diez
y creo que
nos hemos ganado el descanso
y
creo que
ha estado bien
130 personas en directo
os pido a todos
un like
un like
si os ha gustado verme
sufrir con el test
un like
si al menos
estáis contentos
de que lo he conseguido
resolver
un like
si os gustan estas clases
y un like
por vosotros también
por acompañarme
en estos ratitos
que
que la verdad
es que
nos lo pasamos
bastante bien
Miguel
¿es recomendable
o más bien obligatorio
pregunta Carlos
en YouTube
de suscribirse
de la llamada
API usadas
dentro de
UseEffect?
pues
es una muy buena pregunta
es
buena práctica
evitar
que claro
que cuando
tengan la respuesta
del efecto
del fetch
por ejemplo
o una llamada
una API
intentes setear
el estado
actualizas el estado
de hecho
es posible
que es lo que nos
esté pasando aquí
en este
error del test
esto que aparece aquí
algo me dice
viéndolo
que van por ahí
los tiros
que cuando se desmonta
el componente
para cargar
el siguiente
hace un
intersection observer
del trending searches
que teníamos en la home
¿vale?
porque ya va arriba
y entonces
hace la llamada
y cuando intenta
actualizarlo
cuando intenta
actualizarlo
entonces
da ese warning
de hecho
¿dónde lo tenemos?
lo tenemos aquí
¿vale?
es esto
esto
yo creo que esto
es lo que nos está
fallando
bueno
fallando
está dando este warning
que está intentando
actualizar
el estado
de settrends
cuando en realidad
ya este componente
se ha desmontado
y es porque
hay ese momento
de flickering
que pasa
de home
a los resultados
de búsqueda
donde el trending searches
a lo mejor
sube para arriba
o ese elemento
pues cree que
ha llegado
a estar
en el viewport
y entonces
pasa esto
o sea que
todavía
aquí hay algo
que se podría afinar
¿vale?
Alexandro Munera
muchas gracias
cada directo
es un montón
de nueva información
muchas gracias
a ti
Alexandro
Christopher Ramírez
Montesinos
también por aquí
de corazón
muchísimas gracias
a todos
os voy a dejar
todo este código
os lo voy a dejar
en el repositorio
me podéis seguir
también en Github
para que veáis
las cosas que voy haciendo
por si os interesa
me podéis seguir
también en Instagram
pongo muchas chorradas
el otro día puse
como estaba comiendo
patatas fritas
pero bueno
que estamos en confinamiento
y unas patatas fritas
siempre ayudan
y por supuesto
por supuesto
además de Twitter
como arroba midudev
podéis encontrarme
en YouTube
donde estamos ahora mismo
me podéis encontrar
os podéis suscribir
le podéis dar a la campanita
para estar informados
cuando va a ser el siguiente
para que os avise
oye
que va un live
de midudev
o un nuevo vídeo
y le podéis dar like
comentar los vídeos
me ayuda un montón
me encanta
y por favor
ayudadme
a compartirlos
por ahí en Twitter
Facebook
donde sea
que bueno
cuanto más seamos
me parece que hay unas conversaciones
súper interesantes
preguntas muy muy chulas
y que además me ayudáis
pues a
a no cagarla tanto
que también está bien
pues nada
compañeros
compañeras
amigos y amigas
frontenders
todos
muchísimas gracias
por estar ahí
y nos vemos
el viernes que viene
voy a ir pensando
dadme ideas
en los comentarios
a ver
qué podría hacer
a ver
cuál puede ser
la siguiente clase
muchas gracias
gracias por estar ahí
como siempre
un abrazo muy grande
cuidado mucho
y bueno
ya sabéis lo que dicen
nunca dejéis de darle
al frontend
hasta luego
un abrazo muy grande
un abrazo muy grande
un abrazo muy grande
un abrazo muy grande
un abrazo muy grande
aboneo
un abrazo muy grande
un abrazo muy grande
un abrazo muy grande
un abrazo muy grande
un abrazt muy grande
un abrazo muy grande