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

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ม.ค. 2025

ความคิดเห็น • 91

  • @francm_1
    @francm_1 3 ปีที่แล้ว +21

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

    • @AR7editing
      @AR7editing 2 ปีที่แล้ว +1

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

    • @s1art7
      @s1art7 2 ปีที่แล้ว

      se lo llevó el covi uu

  • @dariopizzi8881
    @dariopizzi8881 ปีที่แล้ว +4

    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

  • @williamm5947
    @williamm5947 4 ปีที่แล้ว +19

    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.

  • @facled3083
    @facled3083 ปีที่แล้ว

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

  • @FullRGB
    @FullRGB 3 ปีที่แล้ว +9

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

    • @imadev2020
      @imadev2020 3 ปีที่แล้ว

      opino lo mismo

  • @leandronicolasolmosgomez9353
    @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!! 🙌

  • @DavidTG7
    @DavidTG7 ปีที่แล้ว

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

  • @nihil_um
    @nihil_um 4 ปีที่แล้ว +4

    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.

  • @theincredibleillmo9385
    @theincredibleillmo9385 4 ปีที่แล้ว +5

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

    • @LuisCabrera
      @LuisCabrera  4 ปีที่แล้ว +1

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

  • @bymarkokiller9640
    @bymarkokiller9640 11 หลายเดือนก่อน

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

  • @ivandelvalle1854
    @ivandelvalle1854 3 ปีที่แล้ว

    Este canal vale oro.

  • @KIMBUCA123
    @KIMBUCA123 3 ปีที่แล้ว

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

  • @esthermanrique4721
    @esthermanrique4721 3 ปีที่แล้ว +2

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

  • @typecode6269
    @typecode6269 3 ปีที่แล้ว

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

  • @k.santiagodiaz3744
    @k.santiagodiaz3744 2 ปีที่แล้ว

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

  • @ManuelNyC77
    @ManuelNyC77 4 ปีที่แล้ว +2

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

  • @justinlu5730
    @justinlu5730 3 ปีที่แล้ว

    obras maestras tus tutoriales, felicidades

  • @EmanuelPontoni
    @EmanuelPontoni 3 ปีที่แล้ว +1

    ¡Gracias Luis!
    Excelentes videos.

  • @Luisito_Silva
    @Luisito_Silva 3 ปีที่แล้ว

    Excelentes explicaciones amigo..!!! muchas gracias.

  • @imadev2020
    @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

  • @luciannistorvski1528
    @luciannistorvski1528 3 ปีที่แล้ว

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

  • @cristianstafe
    @cristianstafe 3 ปีที่แล้ว

    Mundial! Muchas gracias. Completado

  • @tomytool
    @tomytool 3 ปีที่แล้ว

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

  • @brandonloera2325
    @brandonloera2325 2 ปีที่แล้ว

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

  • @k_litardo
    @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
      @LuisCabrera  3 ปีที่แล้ว +1

      Gracias Ricardo por tu comentario :)

  • @enriquesoteldo743
    @enriquesoteldo743 8 หลายเดือนก่อน

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

  • @TElaf1997
    @TElaf1997 3 ปีที่แล้ว +1

    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!!

  • @lopuma1990
    @lopuma1990 ปีที่แล้ว

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

  • @huertoeco
    @huertoeco 3 ปีที่แล้ว

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

  • @Panchus07
    @Panchus07 3 ปีที่แล้ว

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

  • @rapustin
    @rapustin 4 ปีที่แล้ว +1

    Gracias Luis. Ya me pongo a verlo! 🥳

  • @edgardsierra9261
    @edgardsierra9261 4 ปีที่แล้ว +1

    Que bueno y bien explicado! Crack!!

  • @jamavocorp
    @jamavocorp 3 ปีที่แล้ว

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

  • @marianodiez5274
    @marianodiez5274 3 ปีที่แล้ว

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

    • @LuisCabrera
      @LuisCabrera  3 ปีที่แล้ว

      Gracias por comentar :)

  • @sebastianmedina5106
    @sebastianmedina5106 2 ปีที่แล้ว

    Excelente video muchas gracias!

  • @johnherrera5913
    @johnherrera5913 3 ปีที่แล้ว

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

  • @joze.rios44
    @joze.rios44 4 ปีที่แล้ว +1

    Muy bien profeee gracias por su. Ayuda.

  • @lucascserrate
    @lucascserrate ปีที่แล้ว

    Muy buen video, muchas gracias!!!

  • @entidadestelar
    @entidadestelar 3 ปีที่แล้ว

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

  • @sabina8567
    @sabina8567 4 ปีที่แล้ว

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

  • @ottogutierrez6640
    @ottogutierrez6640 3 ปีที่แล้ว

    Justo lo que buscaba, me suscribo 👌🏻

  • @arielchura8852
    @arielchura8852 4 ปีที่แล้ว

    Muy buen video, Muchas gracias por compartir tu conocimiento.

  • @AlexRodriguez-go5pf
    @AlexRodriguez-go5pf 3 ปีที่แล้ว

    Excelente video muy bien explicado

  • @santiagopabloortiz6322
    @santiagopabloortiz6322 3 ปีที่แล้ว

    Sos crack! seguí así.

  • @Shechovalencia
    @Shechovalencia 3 ปีที่แล้ว

    Muy bien explicado gracias!!!

  • @andresbetancourt9032
    @andresbetancourt9032 4 ปีที่แล้ว +1

    buen video hermano!

  • @maclaren33
    @maclaren33 ปีที่แล้ว

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

  • @carlosvkmonitor3608
    @carlosvkmonitor3608 3 ปีที่แล้ว

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

  • @germanpinto883
    @germanpinto883 2 ปีที่แล้ว

    buen video bro... Excelente!

  • @rapustin
    @rapustin 3 ปีที่แล้ว

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

  • @valentino4407
    @valentino4407 2 ปีที่แล้ว

    Gracias, me sirvió!

  • @lisvasquez7447
    @lisvasquez7447 3 ปีที่แล้ว

    buenisiiimo :D graciaaaas!!!

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 2 ปีที่แล้ว

    super!

  • @carlosterrazas8913
    @carlosterrazas8913 ปีที่แล้ว

    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.

  • @agusgiudice7844
    @agusgiudice7844 ปีที่แล้ว

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

  • @alejandrodlrocha
    @alejandrodlrocha 3 ปีที่แล้ว

    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?

  • @sergiomallmachavez5534
    @sergiomallmachavez5534 3 ปีที่แล้ว

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

  • @aahl_work
    @aahl_work 2 ปีที่แล้ว

    23:57

  • @TuGorditoCacheton
    @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
      @LuisCabrera  2 ปีที่แล้ว +1

      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
      @LuisCabrera  2 ปีที่แล้ว +1

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

    • @TuGorditoCacheton
      @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

  • @martinfernandez9644
    @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
      @LuisCabrera  3 ปีที่แล้ว +1

      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
      @martinfernandez9644 3 ปีที่แล้ว

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

    • @LuisCabrera
      @LuisCabrera  3 ปีที่แล้ว

      Jajaja que loco yo vi Luis que pena Martin, saludos

  • @nicolasf.9139
    @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
      @LuisCabrera  3 ปีที่แล้ว +1

      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

  • @agusgiudice7844
    @agusgiudice7844 ปีที่แล้ว

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

    • @LuisCabrera
      @LuisCabrera  ปีที่แล้ว

      Hola! Puedes indicarme en que minuto exactamente?

    • @agusgiudice7844
      @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
      @LuisCabrera  ปีที่แล้ว +1

      @@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
      @agusgiudice7844 ปีที่แล้ว

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

  • @martingalenda
    @martingalenda ปีที่แล้ว +1

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

  • @marcosMartinez-wm7bd
    @marcosMartinez-wm7bd 2 ปีที่แล้ว

    EXCEKEBTE CUDEI!

  • @ebesquin
    @ebesquin ปีที่แล้ว

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

  • @cristianroldan337
    @cristianroldan337 2 ปีที่แล้ว

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

    • @LuisCabrera
      @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
      @cristianroldan337 2 ปีที่แล้ว

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

  • @leoamato6113
    @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 (th-cam.com/video/q4fW3h9Mb7M/w-d-xo.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
      @leoamato6113 3 ปีที่แล้ว +1

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

  • @abrahamjaimes7643
    @abrahamjaimes7643 4 ปีที่แล้ว +1

    execCommand , ya esta Obsolote

    • @LuisCabrera
      @LuisCabrera  4 ปีที่แล้ว +2

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

    • @noahnymous9919
      @noahnymous9919 3 ปีที่แล้ว

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