Creando Custom Hooks y usando Context para conseguir un estado global en ReactJS
En la clase en vivo de hoy veremos más hooks, cómo crear nuestros propios hooks (Custom Hooks) y cómo podemos usar el contexto para crear una especie de estado global.
¡Si te gusta dale LIKE 👍 y SUSCRÍBETE! 👇
https://www.youtube.com/c/midudev?sub_confirmation=1
Repositorio con el código 📖
https://github.com/midudev/react-live-coding
SEGMENTOS 📹
00:00 - Bienvenida y presentación del código
07:22 - Añadiendo un form que haga de buscador de Gifs
12:10 - Usando useLocation de wouter
21:10 - Extrayendo lógica a un custom hook: useGifs
34:20 - ¿Custom Hooks son High Order Components?
36:25 - useGifs, haciendo que use el localStorage
44:45 - ¿Por qué extraer los métodos de callback en constantes?
47:10 - Usando Context de ReactJS
50:25 - Usando el Provider del Context
52:45 - Acceder a la información del Context desde un componente
54:41 - Valor inicial de Context por si no usas Provider
01:00:44 - El problema de hacer export default
01:03:10 - Lograr un estado global usando el Context
01:17:06 - Recuperar el detalle del gif del estado global
01:19:59 - Preguntas del chat
01:34:38 - Buenas prácticas para el Context por Kent C. Dodds
01:36:05 - Despedida y cierre
#reactjs #customHooks #reactContext #frontend #midudev
-~-~~-~~~-~~-~-
¡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
-~-~~-~~~-~~-~-
Видео Creando Custom Hooks y usando Context para conseguir un estado global en ReactJS канала midudev
¡Si te gusta dale LIKE 👍 y SUSCRÍBETE! 👇
https://www.youtube.com/c/midudev?sub_confirmation=1
Repositorio con el código 📖
https://github.com/midudev/react-live-coding
SEGMENTOS 📹
00:00 - Bienvenida y presentación del código
07:22 - Añadiendo un form que haga de buscador de Gifs
12:10 - Usando useLocation de wouter
21:10 - Extrayendo lógica a un custom hook: useGifs
34:20 - ¿Custom Hooks son High Order Components?
36:25 - useGifs, haciendo que use el localStorage
44:45 - ¿Por qué extraer los métodos de callback en constantes?
47:10 - Usando Context de ReactJS
50:25 - Usando el Provider del Context
52:45 - Acceder a la información del Context desde un componente
54:41 - Valor inicial de Context por si no usas Provider
01:00:44 - El problema de hacer export default
01:03:10 - Lograr un estado global usando el Context
01:17:06 - Recuperar el detalle del gif del estado global
01:19:59 - Preguntas del chat
01:34:38 - Buenas prácticas para el Context por Kent C. Dodds
01:36:05 - Despedida y cierre
#reactjs #customHooks #reactContext #frontend #midudev
-~-~~-~~~-~~-~-
¡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
-~-~~-~~~-~~-~-
Видео Creando Custom Hooks y usando Context para conseguir un estado global en ReactJS канала midudev
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Crea una app con React usando create-react-appLazy Load, Suspense y paginación con ReactAprende Webpack paso a pasoReact: Context Apimúsica para programar, trabajar y estudiar - {code-fi} 👨💻useReducer y tests de hooks con react-hooks-testing-library💃 useRef y useImperativeHandle. CONTROLA tus COMPONENTES de forma IMPERATIVA ☝️ (Bootcamp FullStack)Estado global simple - Context API - useReducer - React HooksMastering React Hooks with TypescriptReact Hooks useContext Tutorial (Storing a User)Usando Firebase Firestore para crear y recuperar tweetsCurso REACT JS ⚛️ - Aprende desde CERO 📈 Componentes, State, JSX (Tutorial Desde Cero en Español)useEffect explicado a fondoCSS en JS y Styled Components con Emotion y ReactJSON Web Tokens 🔐 - Asegura tu Express API fácilmente (Full Stack JavaScript Bootcamp)Subiendo imágenes a Cloud Storage y creando un Timeago de forma nativa sin Moment.jsMis DESASTROSOS inicios en la PROGRAMACIÓN 😱 - ¿No sirvo para programar? (Experiencia REAL)Login y Sesión de Usuarios 🔐 para guardar Favoritos ⚛️ [En directo]Ideas de negocio para programadoresCreando la página Home y configurando ESLINT y PRETTIER en nuestro proyecto