React.js Hooks en menos de 20 minutos

[@appdelante]

¿Quieres dominar React.js? Aprende cómo crear un Instagram desde cero: appdelante.com/cursos/descripcion/crea-un-clon-de-instagram-con-react-js

Después de un tiempo intentando entender los Hooks, este ha sido el enfoque más didáctico, conciso y claro. ¡Gracias!

[@appdelante]

Gracias por el comentario Juan! Me hiciste el día. -Ricardo.

[@signolivideos]

tiene varios años pero explicaste muy basicamente con ejemplos contundentes el funcionamiento de lo hooks. Con dos videos quede en claro. Muchas gracias bro. Saludos y tome ese buen like y subs

[@sebastianmedina5106]

media clase!! te las mandaste! super bien, tienes mucho talento para explicar! muuuuchas gracias!

[@appdelante]

Gracias Sebastián!

[@holymess]

No solo me encanto lo facil que explicas las cosas sino la excelente pronunciacion del ingles que tienes... felicidades amigo ...seguire revisando tu canal por mas información y tengo la leve sospecha de que sos un paisano venezolano xd

[@locorecopado]

Muchas gracias por este video. Estuve leyendo la documentación. Lo entendí más o menos bien pero en este video lo explicas de una manera muy didactica. Saludos

[@oinak_]

Estuve esta misma semana en una charla de una conferencia donde intentaban explicar esto mismo y me quede patidifuso. Encontré tu video buscando aclarar conceptos y a los 10 minutos me pude convertir mi app de ejemplo de clases a hooks! Muy buena explicación, muchas gracias!

[@cesarpena9229]

Me volvi experto en programar clases y manejar el this, pero ahora por el uso del router necesitaba usar los hooks y he revisado varios videos, pero no se entendía, hasta que llegue aquí y se ve claro como el agua, gracias Ricardo, especialmente en el uso entre componentes que ya me estaba molestando un poco, ahora voy a comenzar a usar los hooks con mas confianza. Exelente explicación.

[@appdelante]

Muchas gracias César. Todo el éxito en tu proceso de aprendizaje!

[@jarif78]

Excelente explicación!! Me estaba quemando la cabeza para entender bien el concepto de los Hooks. Saludos desde AR.

[@julianlopera3028]

Parce que bien explicaste, necesitaba entender rápidamente esto para inciar un proyecto, y me ha resultado muy útil. Gracias!

[@ricardinhofreestile]

Solo llevo 6 min de video y sencillamente la mejor explicacion de Hooks que he visto , Pulgar arriba sin duda y subscrito !!!

[@haguerrerob]

Guaooo Ricardo, llevo meses tratando de entender este tema de hooks, mas allá de tener que transformar un paradigma de programación funcional a un paradigma de transpilación como lo es el de JS y react. La mejor explicación que he visto sobre el tema. "Pa' mas ñapa" de un paisano venezolano..... tienes un suscriptor mi panita y que sigan los exitos

[@abrahamflores240]

Aprender hooks fue más fácil de lo que pensaba, buena explicación enserio se agradece

[@juliomendez4862]

Son de esos videos que te hacen presionar suscribir al instante. Muchas gracias!

[@appdelante]

Gracias por el comentario Julio!

[@bryanmora4996]

Así nomas, tanto que quería entender los hooks y con este video me entró a la primera, muchísimas gracias

[@oscarmartin8662]

Magnífico. Súper bien explicado. Enhorabuena por tu contenido, ayuda mucho.

[@ezequielgalvan6573]

Idolo!!! ricardo porque nos metes en este paqueton! me estalle, muy bien explicado, gracias

[@chobechuca7986]

Con esta explicacion me dio mas ganas de aprender. Gracias!

[@a.david.s]

Que buen video, llevo una semana aprendiendo React y me ha gustado mucho, pero comencé a ver el uso de los hooks en los tutoriales y no me quedaba claro el por qué tendría que usarlos, con este video me queda claro, muchas gracias.

[@Ricardo01749]

Que explicación más buena, de verdad muchas gracias, excelente video

[@JuanHernandez-fi8sh]

Qué brutal explicas mi pana!! vale oro tu contenido.

[@orlandog1979]

Sos un mago amigo explicaste super no cualquiera explica así de bien por mas que sepa escribir código, te felicito.

[@appdelante]

Gracias Orlando! -Ricardo.

[@CrlLivess]

muchas gracias, ando intentando aprender los hooks, y esta fue la mejor explicacion :)

[@gabrielaperez42]

Muy bueno!!! Gracias me encantan sus videos. Siempre vengo a aclarar dudas a este canal :)

[@JuanCarlosGarfiasTovar]

Me encantó super bien explicado y directo. Muchas gracias!

[@JLCaicedo]

sos grande! explicas genial, gracias por el tiempo dedicado hacer buenos videos no es fácil

[@mayramunoz693]

esto era lo que necesitaba!!muchas gracias!! excelente explicación, me quedó clarísimo!! lo único si puedieras hablar mas lento, a mi parecer creo que vas muy rápido y no termino de entender, o tal vez soy yo, y es porque soy nueva en el mundo de la programación!! una vez mas muchas gracias!!

[@jackd9688]

la mejor explicación de la historia! 10/10

[@appdelante]

Muchas gracias Jack 🙌

[@RockalaCarta]

Muy buena la explicaciòn... eso de "mira señor" me hizo el dia... jeje ... muy concreto desde el minuto 5:50 gracias!

[@miguelangelochoa9398]

Brillante!!! Sigue así y serás una Estrella en los tutoriales..

[@appdelante]

Gracias Miguel! Seguiremos creado más 🙌

[@ShaditoKun]

La mejor explicación que encontre

[@johnnygutierrez2824]

Qué buena explicación! Gracias 👍🏻

[@WilliamTorres1100]

¡Brutal! Gracias por la explicación

[@giovannialexander1956]

A webo, te ganaste tu like y un nuevo suscriptor

[@appdelante]

Gracias Giovanni! Que bueno que te ayudó.

[@simongonzalezacevedo7023]

Tremenda explicación hermano! Gracias totales!

[@agustin_di8405]

Tremendo como explicas, muchisimas gracias!!!!, nuevo sub

[@marcelobenitezabc]

QUE BUEN VIDEO!! que claridad de conceptos! FELICITACIONES Y GRACIAS!!

[@appdelante]

Muchas gracias por el comentario Marcelo.

[@purpledoll01]

Muchísimas gracias, es la mejor explicación de Hooks que he visto

[@appdelante]

Gracias por el comentario! Excelente que te gustó!

[@erickesaa4151]

TE AMEEEEEEEEEE!!!! gracias excelente explicación comienzo a introducirme en el mundo react, y lo que explicas y como lo explicas para mi 20 puntos

[@aebmyasz]

Explicación excelente mi pana... mejor imposible! Por fin pude entender esa broma jejeje

[@appdelante]

Excelente Ali!

[@Yerson_Massar]

Excelente video!!! se agradece el tiempo y la claridad en la explicación!! ojala poder ver más videos explicados de esta manera.

[@norbertohdezz]

Gran video. Lo haz hecho bastante fácil de digerir. ¡Muchas gracias!

[@frangercenteno]

Berrooooo loco!!! Rolo e explicación, fuí hasta un meet to para entender esto pero tú la sacaste de home run

[@appdelante]

Muchas gracias Franger!!

[@bernaem7703]

Buen día, te agradezco la explicación, muy buena y comprensible.

[@TonyInumaDahua]

El video mas claro y bien explicado de los hooks

[@LegionDeMancos]

Pana, Ante todo buen video buena explicacion... Segundo es importante destacar las diferentes formas de usar el efecto, es decir, con un array con data, con un array vacio, y sin array (que fue el caso que el metodo que te servia) de resto ninguna otra observacion! Thank u

[@HewlettPackardSteam]

Maestro!! muy buena explicacion! Muchas gracias!

[@manuelgallego4270]

Ricardo eres un grande!! explicas muy bien!! he entendido muy bien los conceptos de hooks gracias a ti. un saludo!!!

[@HEAVYMETAL80tas]

Super bien explicado! después de tanto enredo lo entendí con este video. Te agradezco (Y)

[@appdelante]

Gracias por el comentario Diego!

[@aguiland06]

Chamo, mejor explicación imposible! Apdelante---> Dtb

[@segodimo]

Muy bien explicado, gracias ^^

[@walterrodriguez2696]

Ricardo, muy bueno el vídeo , gracias!

[@appdelante]

Muchas Walter Franger 🙌

[@TavooQiqee]

Excelente vídeo. Estaría muy bien que siguieras haciendo vídeos sobre hooks.

[@barrioking7820]

Muy clara la explicación.

[@ronaldnino1378]

Genial! Ricardo, espero que sigas hablandonos mas sobre hooks y reactjs.

[@anamr7816]

Muchas gracias contigo le entendi perfectamente eres un genio ❤🙌

[@appdelante]

Gracias Ana! Feliz que te ayudo.

[@armandopena3272]

Excelente. Felicidades!

[@themagoleo666]

Vaya , muy interesante y muy bien explicado, Gracias Ricardo ! :)

[@appdelante]

Gracias Leo!

[@petejewel]

Magnífica explicación. Muchas gracias

[@RhomennikD]

El mejor profe de todos !!

[@fagundezantony2358]

Que buena info, primer venezolano que encuentro enseñando programación. Muy bien explicado. Tienes un nuevo seguidor, saludos desde Argentina.

[@appdelante]

Muchísimas gracias Antony! Que bueno que te gusto.

[@luiguimarioastohuaman8021]

Hola Ricardo. Eres muy bueno explicando las cosas, espero nos puedas compartir mas contenido relacionado con React. Salu2!

[@appdelante]

Claro que sí Luigui! Continuaré explicando tópicos de React.

[@rafaeljacome1730]

Excelente explicación, muchas gracias

[@appdelante]

Gracias por el comentario Rafa!

[@giancarloaparicio5841]

sin palabras, sos un crack :)

[@appdelante]

Gracias Giancarlo 🙌 a tu orden. Saludos, -Ricardo.

[@MrDouglasca]

Buenisimo! te agradezco por el video!

[@therac4960]

Excelente clase, se entiende perfecto y te explicas genial.

[@appdelante]

Muchas gracias!

[@eddsonblack]

Brutal hermano ... gracias

[@appdelante]

Por nada Eddson! 🙌

[@pavelcardenas5745]

bien explicado gracias , y tienesmas info sobre react en su nueva version

[@cristiandelrio2645]

Gracias Ricardo !

[@RogelioIturra]

Te comento: estaba haciendo un tutorial de Reactjs en español. La versión del tutor era la 9 de reactjs. La mía es la 16. Los constructor desde la versión nueva es cambiada por los hooks. El punto es que entre al canal de discord para solucionar mi problema (canal de reactjs). Me explicaron lo que te acabo de comentar. El punto es que no entendía la sintaxis de la programación. Vi tu video y me ayudo. Abrazos y suscrito.

[@johntorres6003]

Lo primero que dije al poner el video fue "Berro, casi no es venezolano este pana". Buen video, bro!

[@Jefferson4026]

Por favor trae más tutoriales de React y React Native. Me parecen tecnoligias fascinantes. Y no hay casi contenido en español que expliquen bien

[@appdelante]

Listo, vienen más Jefferson! Muchas gracias!

[@VicioalexC]

Muy bien explicado, con ejemplo y todo

[@Mr.Saturno777]

amigo muchas gracias me sirvio mucho un abrazo grande :)

[@appdelante]

Excelente! un abrazo!

[@rafaelgonzalez1647]

Excelente, si no me equivoco eres venezolano. Me gusto mucho tu explicación... La verdad excelente

[@appdelante]

Hola Rafa, si soy de Caracas. Muchas gracias por el comentario!

[@nicolasromera4795]

Excelente video!

[@UnexpectedTokenJs]

Excelente, gracias.

[@martinnacimiento]

Me encanta su canal, explican muy bien todos los temas! Estoy aprendiendo React en estos momentos y los Hooks, en este video aprendi sobre retornar en el hook useEffect para que sirve, y tengo la siguiente consulta, en el caso del hook useEffect como hace el ejemplo con respecto a componentDidMount y componentWillUnmount de los componentes de clases, enviar como segundo parametro un array vacio seria lo mas correcto segun entiendo, ya que sino tambien se ejecuta mediante cada actualizacion, porque funciona como componentDidUpdate tambien, es correcto esto o me perdi de algo? Desde ya muchas gracias!!

[@pavelmansilla1124]

Que genialll se agradece bro

[@appdelante]

Gracias Pavel!

[@MrCocoha]

Excelente video, muchas gracias

[@appdelante]

Gracias por el comentario Jorge!

[@portalabiertolatam]

Excelente explicacion

[@AntonioRodriguez-bg2mb]

Cuando vi el video sin saber react me quede con cara de no entiendo nada, despues de un mes de aprenderlo, vuelvo y lo entiendo perfectamente que raro XD.

[@felipeperdomo4506]

Muy bien explicado ... saludos desde silicon Valeey

[@appdelante]

Muchas gracias Luis!

[@dev.martin6156]

excelente vídeo compa, de los mas claros, muchas gracias... me quedo con una duda y es que en el ultimo ejercicio se creo un hook (useCordenadas), cuando se lo llama en la función (Cordenadas) esta claro hasta hay, pero que pasa si en el return existe un botón que al hacia click cambiar algún valor de ese hook (useCordenadas), como se lo asocia en ese caso o se realiza ? ... muchas gracias nuevamente

[@giancarloaparicio5841]

Nuevo sub :)

[@__diego432__]

Estoy aprendiendo react y este video me hizo entender los hooks perfectamente, gran explicación, solo que tengo una pequeña duda... Cuando usas el hook useState, se declara en una variable un arreglo con [coordenadas, setCoordenadas], mi pregunta es: coordenadas en ese areglo es una función o un objeto? Eso es lo único que no me quedo claro ya que en el ejemplo de cuenta menciona que cuenta es una función y en el ejemplo de las coordenadas se refiere a esa variable como objeto, eso es lo que no me quedo claro de la explicación, lo demás perfecto, gran trabajo de explicación

[@merqa]

Cuando haces un estado con hooks es asi: const [estado, cambiarEstado] = useState('cualquier valor'); en el arreglo que se hace el primero es el que retorna el valor del estado y el segundo sirve para cambiar el valor del estado haciendo cambiarEstado('colocas el nuevo valor'). Dentro del useState() puede haber lo mismo q en un estado de class tanto un objeto, un int, un string, un objeto, un array, una función.

[@__diego432__]

@@merqa si entendí eso, pero creo que formulé mal mi pregunta, en tu ejemplo el "estado" dentro de ese arreglo puede ser de cualquier tipo? O sea ahí donde retorna el estado puede tomar cualquier tipo? Ya sea un int, float, arreglo, etc?

[@merqa]

@@__diego432__ Si te refieres al valor que va dentro del useState(), ese puede ser de cualquier tipo. Ahora si te refieres a const[estado, cambiarEstado] esos tengo entendido que deben ser asi no pueden ser un número.

[@__diego432__]

@@merqa me refiero a la variable "estado" dentro del; cons [estado, cambiarEstado]=useState(), esa variable de que tipo es?

[@haguerrerob]

@@__diego432__ Diego, mas que una variable, estado representa el comportamiento actual del componente, por ejemplo puede ser un color que inicialmente es blanco ponle, luego por cualquier causa cambia de color ese componente, es este caso, estado cambia al nuevo color. Quien produce ese cambio? Lo produce cambiarEstado. Si tu duda va con respecto al tipo de variable, eso depende no de estado sino de lo que se va a guardar ahí. El estado es como una caja en donde se guardan objetos para ser utilizados luego...

[@luis.devgreen]

tu como que eres Venezolano mi pana, excelente instro

[@freddycordova8934]

excelente tutorial, muy bien explicado. Pero me quedó la duda de cómo con react hooks puedes compartir el estado a otro componente

[@elvisleon9695]

Se utiliza useContext, pero a mi no me convencio asi que cree mi propia libreria para manejo de estados globales

[@freddycordova8934]

@@elvisleon9695 Impresionante, comparteme el link de tu librería para echarle un vistazo.

[@exequielx]

muy bien explicado

[@appdelante]

Gracias Exequiel!

[@RoyCuenca]

Perfecto ahi la llene !

[@ReactCali]

React Devs: Veo funciones en todos lados :)

[@saraazpiroz3457]

Genio!

[@sosatizon]

Hola, muy buen tutorial, solo una cosa, el useState se usa uno por cada propiedad, no se usan objetos ya que no es como el state de componentes de clases que puedes cambiar un estado y los demás se mantienen. Con el hook useState usando un objeto cuando le cambias el valor a una propiedad le pasas por arriba al objeto y pierdes las demás propiedades. Por lo demás excelente.

[@robertobenedit]

magnifico!

[@NirutoUchiha]

soy super novato, pero lo entendi todo muy bien

[@darecup10]

Tengo una consulta, en caso de que se necesite almacenar un estado fijo.. puedo utilizar los hooks de la siguiente manera? const [ hola ] = useSate(primerHola) ? ya que necesito comprara la info del primer hola con el segundo hola, pero con solo el uso del usestate puedo prevalecer la info del primer hola hasta ahora

[@willydavid_]

AQUÍ MIS APUNTES SE LOS COMPARTO A TODOS (ES UNA FOTO PERO COMO EN LOS COMENTARIOS NO SE PUEDEN PONER FOTOS SOLO VA EL TEXTO 😁🦾) Para entender los hooks tenemos que diferenciar entre un componente clase y uno funcional, los funcionales no nos permiten tener estado, ni ciclo de vida de un componente. Creamos un contador que cada vez que hagan click en el botón incrementa la cuenta en 1 en un componente de tipo clase. INTRODUCIMOS ESTADO EN UN COMPONENTE FUNCIONAL, USANDO useState() const [cuenta, setCuenta] = useState(0) | Inicializa el valor en cero, useState me retorna un array, ese array lo destructuramos y sacamos el valor y una función para poder actualizar ese valor del estado Para leer el valor de ese estado se usa la const cuenta y para guardar el estado usamos setCuenta() y no le pasamos un objeto sino el nuevo valor de cuenta useEffect NOS SIRVE PARA USAR CICLOS DE VIDA DEL COMPONENTE EN COMPONENTES FUNCIONALES así que vamos a crear un Custom hook que utiliza el useState() y el useEffect() para obtener las coordenadas y guardarlas en el estado. Creamos un custom hook llamado useCoordenadas() Declaramos un estado con useState() que inicializa un objeto con valores de la latitud y longitud en null Y usamos un useEffect() recibe una función, cuando el componente se monte react llama a esta función que le pasamos a useEffect() modifica el estado con la latitude y longitud la única diferencia es que retornamos una función y esta función es la que react va a llamar cuando se desmonte el componente. Y por ultimo nuestro custom hook useCoordenadas() retorna las coordenadas que es lo que esta en el estado SI QUEREMOS UTILIZAR ESTE CUSTOM HOOK Declaramos una función llamada coordenadas Le de decimos usa ese hook que creamos | const coordenadas = useCoordenadas(); (retorna un objeto con dos atributos la latitud y la longitud y las guardamos en la variable)

[@tuhablasingles]

Muy importante, sera que pueden hacer un curso de como usar los sensores como giroscopio de un celular android o iphone en React.js?

[@TheSkatutorial]

Podrías explicar esto pero con typescript???

[@PieroRolando]

te amo.