CSS Grid, Infinite Scroll y Tests en nuestra app de React

[@midudev]

¡Hola 👋! ¡Gracias por apuntarte al LIVE de hoy! Mientras esperamos, dale LIKE 👍 al vídeo y SUSCRÍBETE 🔔 si no lo estás ya! ¡Hasta luego!

[@donaldpratt8979]

De los pocos buenos canales en KZbin para aprender frontend, grande midu!

[@midudev]

😊 Gracias Donald!!!!!

[@sebastianmedina5106]

totalmente de acuerdo

[@pedrok1557]

Gracias por compartir tu conocimiento👏👏👏🤙

[@midudev]

Un placer!!!

[@JoseGonzalezUwU]

muy buen video, muchos conceptos nuevos y complejos, a paracticar

[@jorgellanque7704]

Increíble!!! confieso que me he liado con los testing, confieso que debo estudiarlos más

[@Faroock1]

Recién ahora entiendo lo que enseñaste en Platzi... acá está muchísimo más claro, sobretodo para alguien que está recién comenzando en esto del front...

[@moisesbarillas8051]

No me imagine que iba aprender algo muy interesante de css en este vídeo, Gracias!

[@jugb]

excelente explicación sobre como realizar testing en react.

[@lalomores4686]

Buenísimos estos videos. Felicitaciones y gracias!

[@JoseGutierrez-gw4yc]

Excelente clase😎

[@Neil_Jordan]

Gracias profe Miidudev, tremenda clase :) 🤩

[@juanfernandovilladiegomade9423]

Hola!!!, Soy nuevo en el canal y se ve super interesante el tema de hoy

[@midudev]

Gracias Juan! 🙃 Creo que ha quedado un Live muy chulo!

[@andresgama4]

excelente video ! Quedo loco al ver que logras hacer todo esto , tan rápido y en directo … es como si lo supieras de memoria y además , cuando tienes errores sabes al instante cuales son y los solucionas rápidamente. jejejeje cual es el truco? de verdad! se te admira mucho y espero algún día llegar a tu nivel , Saludos!

[@kerneldiego]

La experiencia lo es todo

[@Fran-kb2wi]

primero poner like y después ver el video, gracias como siempre !!

[@diego.coder26]

Explicas súper bien, me gustaría así un profesor explicando Python saludos

[@diego.coder26]

Piensas subir a futuro algo de Python ? es lo que está arrasando hoy

[@madmaxdios]

en el minuto 1:12:05, cuando hablas de sacar la función de nextPage fuera, y que no se podría porque habría que inyectar el setPage, no se podría hacer con bind(this)? function nextPage() { this.setPage(prevePage => prevPage++ } .... const debouncedHandleNextPage = useCalback(debounce(nextPage, 200), [setPage]) Gracias!!!

[@silvinaronzoni9573]

excelente !, muchas gracias

[@marcosMartinez-wm7bd]

1:30:00 pregunta, para que el lazy? Para que la home solo se cargue si entramos a la ruta principal es decir "/"?

[@elProdigio]

Mil gracias Miguel. ¿Harás un vídeo sobre clean arquitecture?

[@midudev]

Me lo apunto! Me gustaría hacerlo pero para que quede un vídeo redondo, habría que preparar muy bien el material. :)

[@elProdigio]

@@midudev Sería la bomba, la verdad. Muchas gracias por todo el tiempo que nos dedicas. Se ve que, además de muy buen profesional y gran comunicador, eres muy buena persona. ¡Club de fans de Midudev a la de ya!

[@pikachu5223]

Usa react testing library para el directo de test. Es el modulo usado en las compañías serias. Saludis

[@midudev]

Es que es el que usamos en el vídeo. 😅

[@pikachu5223]

@@midudev perdón no había llegado a esa parte jaja no hay mucho material sobre testing en react, tú explicas perfecto

[@midudev]

@@pikachu5223 sin problema crack!! Quiero hacer mas material sobre testing! 😊

[@pikachu5223]

@@midudev muchas graciasss

[@pupoxws983]

GRACIAS

[@diegosepulveda8691]

1:03:08 en esa parte dices que la funcion se va a crear con cada render y que si esa funcion es muy pesada va a afectar el rendimiento, pero la funcion se ejecuta al ocuparla no al crearla cierto? Si esta función es muy pesada, va a ser pesada al ocuparla y no al crearla entiendo yo. Estoy en lo correcto?

[@titoworlddev]

Hola Midu, tengo una pregunta con respecto al useCallback. Lo usamos para que la funcion no se vuelva a crear, eso si, se me ha formado la duda de que si la volvemos a crear pero ya estaba creada, simplemente la sobreescribe no? Igualmente es necesario el useCallback para no volvera a crear aunque se sobreescriba porque es costoso o queremos que sea igual, pero simplemente tengo esa duda. Por cierto usando usaCallback como en el video me daba error de eslint, que dice "React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.", para arreglarlo he tenido que llamarlo al reves de como tu lo habias arreglado, es decir, tu habias quitado esto () => debounce(() => setPage())... y lo habias puesto asi debounce(() => setPage()), pero el error que me sale se quita si lo pongo asi () => debounce(setPage()). Nada mas, gracias por este cursito corto, me esta sirviendo mucho para inciarme muy bien con React.

[@jenifermartinez9723]

Hola miguel! como utilizo css grid en distintos componentes de una aplicacion en react y se unan todos ?

[@inmaculadareyesrodriguez3006]

Me ha gustado pero la parte de testing es algo liosa entre las cosas deprecadas y no aceptar las últimas dependencias.

[@midudev]

Lo tengo en cuenta para un próximo vídeo sobre testing de React! Gracias!

[@pablokrainuk8530]

Buenas miguel, acabo de terminar el directo de state of js 2020 muy bueno, queria consultar por que estoy siguiendo este curso de react, y quiero tambien seguir el de next js, me recomendarias terminar este y luego seguir con el otro, o seria buena idea hacerlos en paralelo.

[@midudev]

Primero este y luego el otro!

[@pablotorres7792]

Muchas gracias por el conocimiento...... Una pregunta: En que haría falta el debounce y el callback en este ejemplo?. Al quitar dichas tecnologías me ejecuta de la misma forma. Si alguien me ayuda con una explicación le agradecería mucho.

[@LucyGMDev]

La idea del debounce es que si te detecta rapidamente varias veces que esta en la pantalla te puede llamar multiplesveces a la función que realiza la petición de los gifs de echo es posible que incluso si no lo controles como es algo asincrono, cargues los mismos 5 gifs dos veces seguidas por ejemplo, y se te muestren repetidos(esto ultimo igual no ocurre pero por lo que he entendido puede ocurrir), es decir que el debounce te permite garantizar con una medida de tiempo que no llames a la función varias veces en x milisegundos. Por otro lado para el useCallback lo que quieres hacer es crear una referencia a una función, si te das cuenta la función que guardas se crearia nueva cada vez que se rederice el componente, y esto haria que debounce no funcione, porque aunque la funcionalidad que haga sea la misma, cada vez que se renderice el componente la función que se crea es distinta, por eso quieres guardar una referencia de la función con el useCallback, para que cada vez que renderices el componente tengas la misma función y el debounce funcione. Espero haberme explicado mas o menos bien aunque es una explicación de alguien que lo acaba de ver por primera vez xD

[@ezequielpereyra6494]

Una consulta midu, puede ser que ese scroll infinito no funcione cuando estas en mobile ? Porque hice lo mismo, pero en desktop me funciona, pero cuando paso a mobile no me anda, no se ejecuta la funcion ni nada :c

[@jhoansebastian1358]

Hola midudev podrías por favor, quitar la restricción del video para poder verlo en la web. Saludos

[@midudev]

Hola Jhoan! Es raro, pero mi vídeo no tiene ninguna restricción. ¿Qué error te aparece?

[@jhoansebastian1358]

@@midudev mira que dice desde la web Video no disponible, este video esta restringido e intenté con una cuenta G-Suite, pero mira que es solamente este vídeo. Saludos crack

[@chilahiphop9756]

En el scroll infinity si le ponemos setPage(prevPage=>prevPage+1) dentro de la condicional if(isNearScreen) valdría sin la necesidad deusar un callback para la function y el debounce? si o no?

[@chilahiphop9756]

O tambien solo usando callback para la function habdleNextPage() sin la necesidad de usar debounce

[@ronnydamianrodrigueznole2818]

Saludos ¿de pronto tiene algún curso de CSS de cero a experto en KZbin o Udemy ? Soy nuevo en esto de la programación y quiero aprender CSS ya que por ahora eh dominado HTML5

[@carlosdelpuerto8224]

-Por qué no nos enseñas un proyecto de la vida real? -Facebook comprando el mismo proyecto por 400mm$

[@QuirosErick]

Hice un Infinite Scroll pero cuando llego al final llama lo que sigue bien, pero me actualiza y el scroll sube hasta arriba

[@francoagustin765]

Alguien me explica que se logra al guardar el debounceHandleNextPage en un ref, perdon pero no pude entenderlo.

[@Maikolgames]

Cual es el orden de esta serie?

[@midudev]

En mi web los tienes todos en orden: midu.dev/curso-gratis-react-2020/

[@Maikolgames]

@@midudev no sabía que tenías un curso en platzi, acabo de comenzarlo, tengo mucha emoción y ganas de aprender con tu curso

[@adriatomas4972]

20:54

[@miguetenedor]

buen video pero hace falta usar tantas librerias para solucionar cada problemita que hay? porque se arma una ensalada enorme de paquetes y librerias dentro de librerias xD

[@pablodm9]

28:35 wey... WEY!! que es esta BRUJERÍA!!???

[@Jyro77]

Mas de 2 años del directo y el "Masonry" no se ha integrado en Chrome aún :'U

[@ishigod7346]

mi pc peto con el ciclo infinito :(

[@midudev]

😅 sorry