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

Hoy vamos a seguir con nuestra aplicación de Gifs en React para pasar a usar CSS Grid en nuestras búsquedas. Además, vamos a hacer que nuestra app tenga infinite scroll usando React y le añadiremos algunos tests para ver cómo funcionan.

¡Si te gusta dale LIKE 👍 y SUSCRÍBETE! 👇
https://www.youtube.com/c/midudev?sub_confirmation=1

SEGMENTOS
00:00 - Presentación
03:22 - CSS Grid
06:31 - grid-template
08:20 - unidad fractions (fr)
10:00 - utilidad repeat
11:00 - grid-gap y gap
18:45 - Usando auto-fit
20:00 - minmax
24:40 - Centrando elementos con align-items
26:05 - Usando masonry experimental con Firefox
34:30 - Infinite Scroll
37:50 - Añadir externalRef a useNearScreen
44:50 - Arreglando el loop infinito en el useEffect
45:45 - Usando debounce
51:00 - Añadiendo propiedad once a useNearScreen
59:00 - ¡Infinite Scroll conseguido!
01:01:47 - Explicando useCallback de React
01:14:40 - Testing con react-testing-library.
01:18:29 - Test básico: que tu app no pete!
01:28:08 - ¿Por qué la lógica en Javascript puro?
01:29:12 - ¿React Router vs. React lazy para code splitting?
01:31:49 - Pruebas unitarias sobre rutas que se cargan async
01:38:10 - waitForElement en testing-library
01:40:00 - Testeando eventos y formulario
01:52:37 - Despedida y agradecimientos

Repositorio de código:
https://github.com/midudev/react-live-coding

#reactjs #frontend #css #cssGrid

-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
https://www.youtube.com/watch?v=8ZA2p1SBssk