React useContext Ejemplo Practico

Подписаться 253 тыс.

Просмотров 60 тыс.

50% 1

Este es un tutorial práctico del Hook de React llamada useContext, en este ejemplo práctico aprenderás como usarlo en una aplicación sencilla que hace uso de una REST API. La idea es practicar un poco con este hook que es muy importante para manejar el estado en aplicaciones de React, similar a algunas bibliotecas como Redux o MobX.
Código del ejemplo:
github.com/FaztWeb/react-cont...
🖥️ Videos Recomendados:
Ionic y Android Studio Configuración ➞ • Ionic | Generar Apk de...
ionic curso ➞ • Ionic4 & Angular | Cur...
Ionic vanilla javascript ➞ • Ionic4 | Aplicación si...
ionic vue ➞ • Ionic 4 & Vuejs Intro,...
VSCode REST Client ➞ • Rest Client | Extensio...
Curso de Git ➞ • Git y Github | Curso P...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
👨‍💻 ¿Qué servicios utilizo?
Kite ➞ bit.ly/3dPzXHe
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/SH4YB
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ fazt@faztweb.com
#react #usecontext #redux

Наука

Опубликовано:

7 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 131

@DanielSanchez-yg4mf 3 года назад

justo estaba buscando información sobre este hook siempre a tiempo amigo fazt

@MiguelHG2351 3 года назад

Siempre puedes confiar en Fazt Code

@DanielSanchez-yg4mf 3 года назад

@@MiguelHG2351 sin duda alguna

@khlopok 3 года назад

me paso igual, justo estaba buscando esto

@williammasferrer9067 3 года назад

Clavado!

@LuksFay 2 года назад

gracias fazt. estuve 3 meses trabado mentalmente y mal por no poder avanzar mucho debido a temas como este. desde que descubri tu canal me siento mucho mejor. explicas muy bien, los temas puntuales y no tan largos a menos que sea un proyecto. gracias

@joseluisperez5137 3 года назад

Muchas gracias fazt Los que tambien tenian dudas acerca de useReducer, este video aclaro su uso

@luismanueldiazsequea4354 3 года назад

Justo lo que estaba buscando, me llego la notificacion como mandada por Dios.

@johansebastianpuentespulid1401 3 года назад

De verdad me gustan tus vídeos, por alguna razón nunca dejo el editor cerrado, siempre espero uno de tus ejemplos

@ronaldchelot 3 года назад

Este es el mejor canal de programacion. Muchas gracias Fazt 👌👌🤙🤙

@wxlffhye 3 года назад

Necesitaba este video, muchas gracias! 🤝🏻

@juanignaciobogado1258 3 года назад

Gracias Fazt por tus videos siempre tan buenos y de una excelente calidad. Saludos y bendiciones desde Argentina!!

@yefweb3848 3 года назад

Super Like para este gran sujeto, gracias Fazt por compartirnos este material de alto valor

@SonGoku-pc7jl 2 года назад

fazt aprender contigo es magico, es como aprender magia del mejor profesor mago que haya habido en todos los tiempos ;)

@kevinguzman1929 3 года назад

Excelente video Fazt, un tipazo en el software como siempre. He aprendido y sigo aprendiendo mucho de vos. Dios te bendida siempre!

@oscarclaros2225 2 года назад

Como aprendo con estos vídeos, eres un crack Fazt muchísimas gracias

@jorgejara6854 Год назад

Genialidad pura! sos un cracks Fazt para explicar de manera tan sencilla..

@johansebastianpuentespulid1401 3 года назад

Wow fazt muchas gracias este video es lo que necesitaba

@josuerojasparedes1862 Год назад

Que buen ejemplo la verdad apenas lo hice y si quedo bien claro el ejemplo de usar useContext aunque tuve que también estudiar que era el useReducer pero muchas gracias fazt eres el mejor

@fernandovillalba3346 3 года назад

Había tomado muchos cursos de paga, pero con tu explicación lo tengo más claro. Muchas gracias!

@joseluisperez5137 3 года назад

Efectivamente, algunos instructores saben utilizar react, pero pasan por alto que nosotros como novatos no sabemos ni que hace el hook...

@luisjrcrash 3 года назад

Definitivamente el mejor mentor de desarrollo web

@nataliodigiacomo478 Год назад

Sos un grande!! Gracias por tanto! Abrazoo!

@gabrieltrinidad772 3 года назад

Gracias Fazt por el video eres un genio

@RigbyTroll 3 года назад

Amigo, eres un crack, gracias por existir

@douglasmoranflores9027 3 года назад

Hey, muchas gracias fazt, muchas felicidades que buen video me ha sido muy útil, espero ver muchas más con Redux y otros similares explicas super bien. Saludos y bendiciones!!

@pablorostirolla5859 3 года назад

Todavía no vi el video pero ya le di like😉 porque seguro lo voy a terminar de entender en este video 😌

@CAFernandezB 3 года назад

Excelentes tus videos como siempre, seria genial si hicieras una serie de react con unos proyectos avanzados.. Siempre atento a tus videos.. Bro.. Éxitos!!!

@cruzej2228 2 года назад

Buen video, bien explicado y muy entretenido.. gracias me sirvió de mucho

@davidgoma Год назад

Excelente trabajo, muchas gracias

@francorocchia6982 2 года назад

Gracias genio! Quedó todo muy claro

@gamuro6977 Год назад

Fazt, sos el mejor brother

@snyredbaron21 3 года назад

¡Está excelente tu video! Un gran saludo

@Luisluis12982179CrafterSCT 3 года назад

excelente tutorial, gracias fazt!!

@christianmagnus1003 3 года назад

Paso datos por props entre la jerarquía de los componentes en react hooks ya me enseñe a trabajar de esa forma, no me había interesado mucho por useContext pero ya estoy aquí vamos a ver.

@lucassequeira7193 3 года назад

muy bueno genio! se extrañan los directos!!! F por el "Hey coders" 😭

@JorgeArmandoBM 3 года назад

gran video Fazt, eres una inspiracion bro

@raulbellosom Год назад

Muy buen video bro, no dejo de ver tus videos y tus shorts, espero llegar a ser igual de buen programador que tú. No tengo dinero actualmente si no apoyaba tu contenido monetariamente.

@adanuriplata8443 3 года назад

Hey!! gracias por el video. todo muy claro.

@SanchayanPackiyanathan 3 года назад

sin duda mejor explicación .....

@guidoigualadogui 11 месяцев назад

Que bien explicas el react context 👏

@jorgemarquez1741 3 года назад

Excelente video.!

@flavioforte790 Год назад

muy buebo y bien explicado gracias, los proximos cursos espero sean con typescript

@christopherb.223 3 года назад

Muy buena explicación.

@ManuelRiveraHuapaya 2 года назад

Gracias por tu aporte

@codepunk77 3 года назад

muchas gracias fazt

@javico1127 3 года назад

Esta genial yo ya hice dos apps usando todo esto.

@briandevs 3 года назад

Gracias Fazt! :D

@luisalbertovillarortiz7424 Год назад

If you have a while working with react it is a doable tutorial Nevertheless, for those who are starting off and this tutorial is 'The start' about context is pretty cumbersome. Great topic bad pedagogy. Usereducer seems a Component because of Capital Letter at the very beginning but userreducerFn is more clear to grok...

@standardio8270 Год назад

Al principio no le entendí. Después de leer la documentación me quedó más claro. Gracias.

@valenzin 2 года назад

muy buen video!

@manuelcobasguerra5688 3 года назад

esta muy bueno el video me encanto tu explicacion pero te recomendaria que hables mas pausado no te digo que vayas a camara lenta pero a una velocidad en la que no se tenga que estar repitiendo el video 2 veces para entender lo que dices y lo que haces Me Encanto el Video Gracias Por Compartir tus conocimientos con nosotros Eres un Master

@rodycarlo3497 2 года назад

Wow!! y yo que lo veo en 2x jaja

@luismanueldiazsequea4354 3 года назад

Gracias Fazt

@nelsonvarela7529 3 года назад

Deberias de hacer un video de in login completo usando estas tecnologias, pagaria por verlo.

@brawnie3969 Год назад

Muchas gracias.

@feossandon 3 года назад

Más videos de Hooks como estos por favor !!!

@christopherb.223 3 года назад

¡Amén!

@johansebastianpuentespulid1401 3 года назад

Saludos desde Colombia 🇨🇴🇨🇴🇨🇴

@jeronimoperez7992 3 года назад

sisi

@jeronimoperez7992 3 года назад

grande fazt

@AndresGarcia-ug8ek 3 года назад

thanks you fazt

@diegocamilopenaramirez6101 3 года назад

Muchas gracias

@josemfcheo 3 года назад

Fazt crack!

@sebastianvh7441 Год назад

vengo de entender useState y buscaba entender useContext, pero en este video me choque contra una pared, eso quiere decir que si logro entender este video sere muuucho mas de lo que soy ahora mismo, eso me da animos a no abandonarlo jaja, cuando lo entienda al 100 comentare aqui mismo!!

@DanielGarcia-do9if Год назад

entendiste al 100 o no? cuanto te demoraste en entender yo llevo una semana y no entiendo :/

@sebastianvh7441 Год назад

@@DanielGarcia-do9if si lo entendí, me llevo un tiempo también, pero no te rindas, mira tutoriales de todo RU-vidr que exista, ayúdate con chatGPT, y dibuja el programa en un papel, pasar a papel lo que hace un programa con simples esquemas y demás ayuda mucho mucho, y ve de menos a más, del ejemplo más simple a ejemplos más complejos

3 года назад

Muy bueno el video, gracias! Qué aconsejas usar, Redux o userContext para proyectos medianos?

@juanperalta5853 3 года назад

Oye fazt podrias hacer un vídeo hablando de arquitecturas en el frontend y como implementarlas, es algo que se deja mucho de lado y es muy importante para estabilidad, o digo porque aquí manejas una especie de arquitectura mini basada en el contexto y está cool

@rapustin 3 года назад

Gracias faaazt

@ghedzko 3 года назад

Excelente TUtorial!!! en mi caso me tira éste error: Line 9:6: React Hook useEffect has a missing dependency: 'userContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps

@megasirob 3 года назад

Muchas gracias, lo que si no entiendo aun es porque usar useReducer es una ventaja :/, aun no he visto redux, por lo que puede ser que allí tenga mas sentido, sin embargo de primeras me parece que es escribir más por hacer lo que hace un useState.

@guillermohedzko6634 3 года назад

Excelente tutorial.!!! en mi caso me tira un error : Line 9:6: React Hook useEffect has a missing dependency: 'userContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps

@jackyefricruzmamani7431 2 года назад

Gracias por el video, queria comentar que me confunde la semántica del GET que usas, pues por un lado ontienes data de la API (GET), sin embargo realizas un SET para establecer los users del context. Pero, creo que GET se refiere a obtener los datos de la API.

@juangajardonavarrete3516 3 года назад

Que buen video. En mis proyectos aplico esta forma de trabajar con Context y lo persisto con Localstorage, una consulta: ¿Cómo podría hacer test del Context?

@andresbustamante972 2 года назад

Gracias Fazt, justo lo que queria saber es como ingresar el useContext de forma estructurada a un proyecto

@FaztCode 2 года назад

Creo que falta un ejemplo con un backend. Esta semana voy a publicar uno

@andresbustamante972 2 года назад

@@FaztCode suena bien

@davidhch9833 3 года назад

Gracias Fazt, cual recomiendas más: usar useReducer+useContext o Redux?

@timmioro 3 года назад

Redux es algo mas usado y mas estandarizado, siempre redux cuando sea un proyecto grande

@rolando_d3v 3 года назад

hola Fazt, cual recomiendas más: usar useReducer+useContext o Redux? , asimismo vendria una ejemplo de usereducer combiando usecontext

@italobarzola631 3 года назад

En lo poco que he investigado, Redux es usado cuando la aplicación requiere de un grado de complejidad aceptable, pero UseContext es usado para realizar tareas menos complejas de la aplicación, por ejemplo realizar el cambio de estado del tema del sitio.

2 года назад

Excelente video; lo seguí paso a paso con mi editor y me ha quedado super claro el useContext!! Pregunta: Aunque lo comprendí para mantenerlo más simple al principio ¿qué alternativa hay al useReducer?

@FaztCode 2 года назад

Hola Hector, las alternativas serian bibliotecas de manejo de estado como las siguientes: * Redux * MobX * Recoil * HookState * Akita

@martincarp4671 3 года назад

Conoces algo de recoil en react? creo que viene a reemplazar a esto o algo asi tengo entendido

@johansebastianpuentespulid1401 3 года назад

Una pregunta fazt, que piensas de la encuesta de State of Javascript y de como Angular en caída y tecnologias como redux o React y Graphql siguen teniendo más uso?

@dddeiv 3 года назад

Holaaa Fazt, cómo haces para que los import (autocompletado) se coloquen automáticamente con ' en vez de "? Gracias.

@alvaronieto1779 2 года назад

en visual studio code hay una extension de react que the permite usar muchos autocompletados se llama : ES7+ React/Redux/React-Native snippets.

@christopherb.223 2 года назад

Una pregunta. ¿Cada vez que refresque la página los datos se van a borrar del context?

@NovatoWTF 3 года назад

Carrito de compras, mern stack please :)

@JoseCastro-zx9yq 3 года назад

Oye fazt por que no usas WSL?

@khlopok 3 года назад

wtf fazt, te juro que abri una nueva pestaña de youtube y estaba a punto de typear en el buscardor "useContext" y al abrir la nueva españa ahi estaba este video, como lo haces xD?

@iannoir3496 3 года назад

que se necesita para hacer un foro?

@ignacioarriagadairiarte4338 3 года назад

Como seria el caso para actualizar y eliminar usando con usecontext?

@gASP987 2 года назад

como puedo usar el getUsers desde una lista de objetos?

@hernangarcia77 Год назад

como es que no se te renderiza la pagina con los anchors?? y por consiguiente llama axios a cada click...

@alienpr 3 года назад

Muy bueno el video, pero ahora me surgen varias preguntas. 1- Esta forma en que organizas el codigo para implementar context responde a algun patron de diseño. 2- Con este tipo de approach imagino que si utilizara esta forma ya no tendria logica usar un patron como Container-View. Ya que la logica queda practicamente en el state. 3- Como se podria evitar el Wraping Hell que provoca el context api en caso de que halla necesidad de compartir varios de estos estados en el component tree.

@codearock 2 года назад

3- tenes que usar el hook useCallback

@danielgurisatti7181 2 года назад

Cuando le plaico map a users me sale este error Uncaught TypeError: Cannot read property 'map' of undefined... ¿ Por qué toma users como undefined?

@rodrigodavid3957 3 года назад

Cómo llegan state y action a la función anónima?

@gadlford100 8 месяцев назад

Ayuda, cuando lo ejecutó me salen 2 listados es como que se ejecutara 2 veces

@jonnatanmonttvillar 3 года назад

el enlace a slack dice que ya no esta activo :(

@jorgedelamora5905 2 года назад

como lo podre hacer con un .json local?

@tiagomenon6386 Год назад

21:12 40:00

@miguelherrera8679 2 года назад

Hola, un pequeño warning, alguien sabe porque esta alerta, Line 7:36: React Hook useEffect has a missing dependency: 'getUsers'. Either include it or remove the dependency array react-hooks/exhaustive-deps, esta igual al proyecto pero me sale esta alerta.

@tobiaspossetto10 3 года назад

Usando Redux con la metodologia Ducks no es mas o menos lo mismo? o sigue siendo mas facil usar context

@FaztCode 3 года назад

Sí, es bastante parecido. solo que este está provisto por la propia biblioteca, y te evita instalar dependencias externas. es un camino más facil para los que empiezan en react, pero Redux sigue ofreciendo muchas más caracteristicas. voy a realizar unca comparacion punto por punto mejor :)

@tobiaspossetto10 3 года назад

@@FaztCode estaría genial!! Tenes una forma de explicar sorprendente te felicito

@gmayas 3 года назад

Prácticamente es una arquitectura Context, asi lo llamaría yo.

@marcosarjona6022 3 года назад

Gran tutorial! Pero lamentablemente no me esta gustando useContext. Creo que prefiero seguir usando Redux.

@edwinrafaelhenriquezh2085 3 года назад

Amigo, una consulta: ¿Debería funcionar igual en Next.js?, hice los mismo y no me reconoce el userContext.getUsers();, marca un error :TypeError: Cannot read property 'getUsers' of undefined. Pensé que era un error mio y copié exactamente el código al bajarlo de github. la única diferencia es que los archivos UserList y Profile los encapsulé en una subcarpeta de components llamada User que, pienso, no debería producir ningún error . ¿Puedes ayudarme? Gracias. Por cierto, explicas muy bien.

@edwinrafaelhenriquezh2085 3 года назад

@Andrey34 si, de hecho cloné el ejemplo pero el contexto es diferente en Next.js