Published On Nov 10, 2022
En esta práctica construiremos una pokedex utilizando React desde cero, partiremos del diseño ya hecho en otro vídeo. Aprenderás a filtrar con checkbox, a crear un botón de cargar más y a filtrar por búsqueda. Todo esto a partir del Context api de React y el router DOM en su versión 6.
Espero te guste y aprendas cosas nuevas en este vídeo
Temas a tratar:
✅ React Hooks (useState, useEffect, useContext)
✅ Context API
✅ React Router Dom v6
✅ Rutas Anidadas y params
✅ Filtros con checkbox
✅ Filtro de búsqueda
✅ useLocation, Navigate
Y mucho más
_________________________
00:00:00 Introducción
00:00:30 Demo
00:03:15 Creación y preparación del Proyecto
00:05:31 Configuración del Router para la app
00:14:43 Componente Navigation
00:17:38 Creación del PokemonContext y el Provider
00:24:39 Configuración del Provider
00:25:03 Funciones asíncronas API
00:48:18 Página de Inicio
00:50:54 Componentes PokemonList + CardPokemon
00:58:05 Componente FilterBar
01:02:23 Página Pokemon
01:11:18 Componente Loader
01:13:44 Página de Búsqueda
01:25:01 Botón de Cargar más
01:37:01 Filtros Checkbox en Provider
_________________________
📍 Repositorio GitHub:
https://github.com/roberto-aq/Pokedex...
Links usados:
📌 Iconos (HeroIcons):
https://heroicons.com/
📌 API Pokemon:
https://pokeapi.co/
📌 React Router Dom v6:
https://reactrouter.com/en/v6.3.0/get...
📌 Loaders:
https://uiball.com/loaders/
📣 Si tienes alguna duda, pregunta o comentario y necesitas contactarme directo puedes escribirme aquí 💯:
https://t.me/roberto_anq