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

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 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 Рік тому

      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

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

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

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

  • @DavidTG7
    @DavidTG7 Рік тому

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

  • @bymarkokiller9640
    @bymarkokiller9640 10 місяців тому

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

  • @typecode6269
    @typecode6269 3 роки тому

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

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

  • @cristianstafe
    @cristianstafe 3 роки тому

    Mundial! Muchas gracias. Completado

  • @k.santiagodiaz3744
    @k.santiagodiaz3744 2 роки тому

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

  • @EmanuelPontoni
    @EmanuelPontoni 3 роки тому +1

    ¡Gracias Luis!
    Excelentes videos.

  • @ManuelNyC77
    @ManuelNyC77 4 роки тому +2

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

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

  • @ivandelvalle1854
    @ivandelvalle1854 3 роки тому

    Este canal vale oro.

  • @enriquesoteldo743
    @enriquesoteldo743 8 місяців тому

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

  • @Luisito_Silva
    @Luisito_Silva 3 роки тому

    Excelentes explicaciones amigo..!!! muchas gracias.

  • @justinlu5730
    @justinlu5730 3 роки тому

    obras maestras tus tutoriales, felicidades

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

  • @luciannistorvski1528
    @luciannistorvski1528 3 роки тому

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

  • @brandonloera2325
    @brandonloera2325 2 роки тому

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

  • @tomytool
    @tomytool 2 роки тому

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

  • @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 :)

  • @lopuma1990
    @lopuma1990 Рік тому

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

  • @marianodiez5274
    @marianodiez5274 3 роки тому

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

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

  • @sebastianmedina5106
    @sebastianmedina5106 2 роки тому

    Excelente video muchas gracias!

  • @johnherrera5913
    @johnherrera5913 3 роки тому

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

  • @lucascserrate
    @lucascserrate Рік тому

    Muy buen video, muchas gracias!!!

  • @joze.rios44
    @joze.rios44 4 роки тому +1

    Muy bien profeee gracias por su. Ayuda.

  • @jamavocorp
    @jamavocorp 3 роки тому

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

  • @maclaren33
    @maclaren33 Рік тому

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

  • @rapustin
    @rapustin 4 роки тому +1

    Gracias Luis. Ya me pongo a verlo! 🥳

  • @sabina8567
    @sabina8567 3 роки тому

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

  • @arielchura8852
    @arielchura8852 4 роки тому

    Muy buen video, Muchas gracias por compartir tu conocimiento.

  • @entidadestelar
    @entidadestelar 2 роки тому

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

  • @edgardsierra9261
    @edgardsierra9261 4 роки тому +1

    Que bueno y bien explicado! Crack!!

  • @carlosvkmonitor3608
    @carlosvkmonitor3608 3 роки тому

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

  • @AlexRodriguez-go5pf
    @AlexRodriguez-go5pf 3 роки тому

    Excelente video muy bien explicado

  • @Shechovalencia
    @Shechovalencia 3 роки тому

    Muy bien explicado gracias!!!

  • @rapustin
    @rapustin 3 роки тому

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

  • @santiagopabloortiz6322
    @santiagopabloortiz6322 2 роки тому

    Sos crack! seguí así.

  • @germanpinto883
    @germanpinto883 2 роки тому

    buen video bro... Excelente!

  • @ottogutierrez6640
    @ottogutierrez6640 3 роки тому

    Justo lo que buscaba, me suscribo 👌🏻

  • @andresbetancourt9032
    @andresbetancourt9032 4 роки тому +1

    buen video hermano!

  • @valentino4407
    @valentino4407 2 роки тому

    Gracias, me sirvió!

  • @agusgiudice7844
    @agusgiudice7844 Рік тому

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

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

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

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

  • @sergiomallmachavez5534
    @sergiomallmachavez5534 3 роки тому

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

  • @lisvasquez7447
    @lisvasquez7447 3 роки тому

    buenisiiimo :D graciaaaas!!!

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

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

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

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 2 роки тому

    super!

  • @aahl_work
    @aahl_work 2 роки тому

    23:57

  • @marcosMartinez-wm7bd
    @marcosMartinez-wm7bd 2 роки тому

    EXCEKEBTE CUDEI!

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

  • @ebesquin
    @ebesquin Рік тому

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

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

  • @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 (ua-cam.com/video/q4fW3h9Mb7M/v-deo.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.