useRef explicado al detalle - Con 6 mini Apps - React - Scroll Animation Focus, Copy Paste y Más

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

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

50% 1

El useRef Hook nos permitirá interactuar directamente con del DOM y disponer de referencias mutables 🔥 Aprenderemos:
- Como usarlo para Interacción con el DOM
✅ Ejemplo 1 - Focus al presionar un botón
✅ Ejemplo 2 - Copiar texto al portapapeles presionando un botón
✅ Ejemplo 3 - Reproductior de video (Manipular controles)
✅ Ejemplo 4 - Animación al hacer scroll sobre un elemento
- Como usar una referencia mutable
✅ Ejemplo 5 - Contador de renderizaciones
✅ Ejemplo 6 - Cargando condicionalmente un Card que llama a una api,
solución del problema de actualizar un estado de un componente desmontado
Recursos
⭐⭐ (Importante) API utilizada
jsonplaceholde...
⭐ (Opcional) Video utilizado descarga
pixabay.com/es...
⭐ Repositorio de GitHub del proyecto
github.com/lui...
⭐ Extensiones VSCode utilizadas
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier (Formatear código)
Aprende y practica más con
🚀 useEffect explicado al detalle - Con 3 mini Apps - React
• useEffect explicado al...
🚀 useState explicado al detalle - Con 5 mini Apps - React
• useState explicado al ...
🚀 APP Perritos API y Manejo de errores
• React App ✅ DOG API - ...
🚀 APP con Bracking Bad API
• React App ✅ Breaking B...
🚀 Primera APP con React
- Lista de tareas con LocalStorage y despligue a Netlify
• ReactJS con Hooks ✅ ...

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

1 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Yo aquí 21-11-2021, esperando que regresé con su contenido de calidad. Díganme que no soy el único?

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

nadie lo conoce? para que nos diga. porque se fue 😭😭

@s1art7 Год назад

se lo llevó el covi uu

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

Es el primer video que veo de tí y me gustó mucho la calidad del vídeo. Deberías subir un curso a Udemy de react intermedio-avanzado.

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

¡Gracias Luis! Excelentes videos.

@martingalenda Год назад

Para el primer ejemplo, no le encuentro mucho el sentido. Es mucho más simple ponerle al input el atributo autoFocus, y ya

@dariopizzi8881 Год назад

acabo de dar con tu canal y te puedo decir con seguridad que es de los mejores materiales que he visto, super didactico, sin vueltas y muy practico, estuve revisando un poco mas tu canal y me di cuenta que no subes nuevos videos hace un año lo cual me pone un poco tristre ya que es muy dificil encontrar a alguien que explique tan bien como vos. Te felicito y agradezco por el gran trabajo que hiciste 😁 Ojala algun dia vuelvas a subir videos, aca voy a estar atento ya que te ganaste un fiel seguidor

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

Realmente creo que es el mejor video que vi acerca de React. Súper claro todo, y con ejemplos bastante reales. Muchas gracias

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

opino lo mismo

@theincredibleillmo9385 4 года назад

Eres el mejor, no pares de hacer estos videos. Espero subas algun dia un curso a Udemy de React.

@LuisCabrera 4 года назад

Muchas gracias :) se hace lo que se puede ya pronto terminarán los videos básicos y vendran proyectos más grandes

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

Excelentes explicaciones amigo..!!! muchas gracias.

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

Mundial! Muchas gracias. Completado

@ebesquin Год назад

Estupendo curso document.execCommand('copy') is deprecated

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

Excelente clase 👍, me quedó mucho más claro con los ejemplos, súper entendido

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

muy muy buena explicación, me encantó el video gracias

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

Me sorprendo cada vez más viendo tus tutoriales porque, no solo aprendo cosas nuevas sino que entiendo cómo y por qué suceden. Así da gusto estudiar algo. Mi enhorabuena. Un saludo.

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

Excelente video muchas gracias!

@lucascserrate Год назад

Muy buen video, muchas gracias!!!

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

Excelente contenido y explicación, mil gracias por compartir!!

@maclaren33 Год назад

Admiro tu forma simple de explicar las cosas. Tienes canal de udemy?

@ManuelNyC77 4 года назад

Bro tus videos son los mejores explicando hooks! Sigue haciendo mas! Saludos.

@agusgiudice7844 Год назад

Alguien sabe para que es la coma que borra al principio, la que esta despues del StrictMode. gracias

@lopuma1990 Год назад

Excelente video yo justo estaba buscando algo parecido como en el ejemplo del scroll gracias

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

Likes a todos, eres un crack. GRACIAS!! ;)

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

En la version 18 de react ya no sucede este error del actualizar algo desmontado. porque? es el navegador o la version de react soluciono este problema nativamente?. porque ya no me sale el error cuando se intenta actualizar algo desmontado.

@DavidTG7 Год назад

Buenísimo! He visto muchos videos sobre React, y este es de los mejores. Gracias!

@leandronicolasolmosgomez9353 Год назад

Buenisimo el video, la primera vez que le presto tanta atención a este hook y me doy cuenta de lo importante que es. Nuevo suscriptor!! 🙌

@enriquesoteldo743 5 месяцев назад

cuando regresas? excelente contenido con un solo video tuyo aprendo lo que no en 100 de otros

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

obras maestras tus tutoriales, felicidades

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

Me gustaría darle un nuevo like, te extra;amos luis!

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

buen video bro... Excelente!

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

Sos crack! seguí así.

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

Gracias, me sirvió!

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

Este canal vale oro.

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

Hola Luis, muy buenos tus videos, me estan ayudando mucho, queria consultarte si tienes idea de como hacer lo que hacen en este video (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-q4fW3h9Mb7M.html&lc=Ugxu8u4b4zobz-DcnP54AaABAg.9IBanKvcdEf9ImOOhSQSam) en el minuto 27.40. Ellos usan ref en componentes de clase, yo estoy haciendolo con componentes funcionales. Me estoy volviendo loco para que me funcione pero no logro hacerlo. Si tienes tiempo de verlo genial, sino no pasa nada, se que ponerte a ver el otro video y todo es un rollo largoo.. Muchas gracias nuevamente.

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

este es el archivo con mi codigo github.com/leoamato10/ClimbingApp/blob/master/src/components/map.js

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

Hola!! Antes que nada queria felicitarte y agradecerte por tan buen contenido!! Me gustaria que sigas con explicaciones de React como ejemplos como lo haces en este video. Serias unico!!

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

23:57

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

Gracias Luis. Ya me pongo a verlo! 🥳

@edgardsierra9261 4 года назад

Que bueno y bien explicado! Crack!!

@RVKAWAAA 4 года назад

Muy bien profeee gracias por su. Ayuda.

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

O sea, use ref es un equivalente de document.getElementById, document.querySelector.... y todos los otros 🤔

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

En parte si, uno de sus principales usos es ser ese equivalente, para que existe? Si ya existen los otros? Debido a que si seleccionas por id, por ejemplo necesitarías varios id diferentes si usas el componente varias veces, y eso puede ser difícil de controlar. Las ref solucionan eso. Aunque también tienen otros usos.

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

@@LuisCabrera wow!!! Que velocidad de respuesta!! Muchas gracias Luis!!

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

super!

@andresbetancourt9032 4 года назад

buen video hermano!

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

execCommand , ya esta Obsolote

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

¿Conoces alguna alternativa vigente y sencilla?, de todos modos solo fue con fines didácticos

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

Está bien aportar, pero solo cuando se da una solución, no cuando solo se da el problema.

@marcosMartinez-wm7bd 2 года назад

EXCEKEBTE CUDEI!

@facled3083 Год назад

Excelente material!! Bien explicado, buenos ejemplos. La calidad de la imagen y sonido también, etc. Muchas Gracias!!

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

La explicación es muy buena y los ejemplos muy ilustrativos. Tus videos son de gran calidad, muchas felicidades.

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

sigo con tus videos...100 puntos gracias por todo, una pregunta , cual es la mejor ruta para convertirme en programador junior, que cursos debo tomar y que debo aprender ??? gracias si pudieras responderme esa interrogante

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

Ve poco a poco, el camino es largo, lo mas importante es la constancia, por cada cosa que aprendas dedíacale 4 veces ese tiempo a practicar, para ello tienes Frontend Mentor, Hacer Rank para ejercicios, o puedes hacer cualquier cosa que se te ocurra, como un clon de algun sitio web sin ver tutoriales (Aunque igual uno los busca en medio jaja pero es diferente).... Y bueno si ya estás con react, seguramente ya has aprendido buena parte de front, seguir reforzandola, algún curso de udemy, y para back puedes aprender primero node, por tener familiaridad con javascript y luego algún backend más tradicional como laravel, django, spring, .net o similar, alguno de estos últimos, esto acompañado de alguna base de datos sql te dará un plus a la hora de buscar empleo

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

Y nada, guíate por las reviews de udemy y los primeros videos, allí encontraras el profe que mejor se adapte a ti

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

Gracias Luis...seguiré viendo tus videos y aprendiendo...la verdad soy muy nuevo aún y me estoy guiando en el 80% de lo q veo...pero se que mejórare...seguiremos en contacto saludos y gracias

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

Yo he sufrido haciendo un custom dropdown pero creo que el useRef me podría ayudar. Gracias!!.

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

Excelente video, me resultó muy útil y me gustó mucho como explicas.

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

Oro puro tu video. Me salvaste. Muy bien explicado y los ejemplos son super practicos. Muchas gracias ¡!

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

Muchas gracias por el tutorial, es excelente° Gran contenido en tus videos :D

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

La mejor explicación de useRef que he encontrado. Gracias por el aporte!

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

Hola Luis, entiendo que la mejor práctica es utilizar useRef para el flag de Loading, pero en este ejemplo cuál sería la diferencia con la utilización de una variable let?

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

Eres un crack, explicas de manera muy dinámica y fácil de entender

@agusgiudice7844 Год назад

en el segundo projecto... cual es la razon de usar el primer useState??? digo, lo copia perfectamnete si no lo usamos.

@LuisCabrera Год назад

Hola! Puedes indicarme en que minuto exactamente?

@agusgiudice7844 Год назад

@@LuisCabrera hola! no habia visto la respues. minuto 13:21 arrancas a crear el usestate q digo. si no lo creo me anda igual el copiar. de ahi mi pregunta

@LuisCabrera Год назад

@@agusgiudice7844 Ya comprendo, realmente el estado text se crea por la costumbre de tener el texto del input en un estado para poder leerlo luego de ser necesario, pero como indicas en este caso no se le da uso como tal

@agusgiudice7844 Год назад

@@LuisCabrera ahhhh perfecto entendido. Muchas gracias por responder!

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

Master! Muy bien explicado, Agradezco el esfuerzo en realizar estos videos. Sigue asi :D

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

Sigue subiendo videos, eres bueno explicando, y muy completo los videos.

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

Muy buen video, Muchas gracias por compartir tu conocimiento.

@k.santiagodiaz3744 2 года назад

Es increíble la pedagogía de este hombre. Muchas gracias, maestro!

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

Excelente , muchas gracias aclaraste algunos conceptos que me faltaban práctica .

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

Muy bien explicado gracias!!!

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

eres un genio explicando Luis, imposible no entender, para los nuevos dev que comienzan con react u otros frameworks, y no tienen mucha experiencia trabajando con vanilla está genial

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

Enhorabuena por el vídeo, no solo explicas de maravilla, sino que el contenido es una joya. Gracias!

@AlexRodriguez-go5pf 3 года назад

Excelente video muy bien explicado

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

Justo lo que buscaba, me suscribo 👌🏻

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

Excelente vídeo, con muy buenos ejemplos y demos, muchas gracias por tu dedicación!!!

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

Gracias por comentar :)

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

buenisiiimo :D graciaaaas!!!

@nicolasf.9139 3 года назад

Sos un genio explicando! Pero me quedo una duda, en el último ejemplo que creas un ref para cuando se desmonta o no. No es lo mismo usar un state en vez del ref? Tengo esa duda. Suscripto !

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

Hola! La cosa es que con los estados es más fácil que haya conflictos al intentar actualizar o acceder los mismos al desmontar un componente, en este caso precisamente se usa el ref para evitar realizar una actualización de estado en un componente que se está desmontando

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

Me recomendaron este video y sin duda alguna valió cada minuto, aunque ya tengo bastante conocimiento de React, esto sin duda fue muy útil, like y un nuevo sub, sigue así, eres grande.

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

Gracias Ricardo por tu comentario :)

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

Hola Luis, primero decirte que me parecen geniales tus videos, el contenido y las explicaciones, un 10. ! Por otro lado, me gustaría preguntarte, en el final de video para setear el estado dependiendo si esta montado usando useRef, se podría hacer lo mismo con un estado utilizando useState? una tercera opcion que se me cruza es la de utilizar abort controller para cancelar la petición fetch. Cual de esas 3 opciones te parece la mejor?

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

Hola tocayo Luis gracias por tus palabras, se puede intentar guardar el isMounted en un estado con el useState pero te encontrarás con un inconveniente y es que los valores de los estados sólo se verán reflejados hasta el próximo render, entonces cuando se desmonta el componente mandarías a actualizar setIsMounted(false) pero este valor nunca se reflejaría (al no haber nuevos render pues el componente se desmontó) Entonces por esto es que conviene utilizar las referencias, que al desmontarse el componente seguirás podiendo acceder a ellas y hasta actualizarlas (Como si se tratase de una variable global más allá del componente, pero no exactamente así pues sólo la tendrás disponible en tu componente) Lo del abort controller suena muy bien :) intenta aplicarlo y si te funciona será un éxito

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

@@LuisCabrera Clarisimo, excelente! Igual me llamo Martin, no Luis :p jeje

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

Jajaja que loco yo vi Luis que pena Martin, saludos