⚛️ Curso Patrones Avanzados en React JS en TH-cam y Código en Github... ● Suscríbete al canal si no quieres perderte vídeos como este: th-cam.com/users/developero ● Link del curso en TH-cam: th-cam.com/play/PLkr7dGY4D2sOyjBKXyNhtkIwO3suaqotD.html ● Link del repositorio con los ejemplos del código fuente: github.com/Developero-oficial/advanced-react-patterns ● Link de la app mostrada en el curso: developero-oficial.github.io/advanced-react-patterns/#/
Hermano súper buena tu explicación, me ayudaste a entender muchas cosas, justo estaba pasando la mal con una lista de tareas y quería comprender el código en lugar de solo copiar y pegar de otro lado. Y nuevo sub! Genio gracias!
Muchas gracias por compartir tus conocimientos, actualmente trabajo como front-end en reactjs y tenia dudas respecto a useState y los array, pero con tu video me quedó bastante claro, y si, debo admitir que actualizaba algunos array con useState a traves del .push( ) 😅. Te ganaste un suscriptor más, Saludos y espero sigas subiendo contenido actualizado 🏅
Información de valor y muy bien explicada muchas gracias!! Pregunta/Duda... Como sería la sintaxis si necesito actualizar más de un propiedad del objeto?
Gracias! Para más de una propiedad sólo la agregas igual que la primera: setState({ ...state, prop1: 'updated1', prop2: 'updated2', propN: 'updatedN' })
Hola! retomando este video siempre que estudio ! 😁 tengo una duda. en el minuto 6:37 al hacerle click al elemento ejecuta handleRemoveUser con (user.uid) como parametro ... lo que no entiendo, en qué momento le está pasando el user.uid como parametro a la funcion handleRemoveUser con solo hacerle click? es porque el elemento tiene como key el user.uid ? sino no entiendo . Este tema siempre me traba a la hora de entender las entrevistas tecnicas! agradezco tu ayuda!!
Hola! Tenemos lo siguiente: handleRemoveUser(user.uid)} ... //rest of the code... Esta parte es la importante: onClick={() => handleRemoveUser(user.uid)} Cuando hago esto, le paso por parámetro un callback, que es una función, y dentro del callback ejecuto handleRemoveUser pasándole por parámetro el user.uid. Te comparto una explicación más a detalle a nivel JavaScript y HTML (React al final sigue siendo JavaScript). "El evento click se genera cuando el usuario hace clic en un elemento. El evento clic ocurrirá después de los eventos mousedown y mouseup." developer.mozilla.org/es/docs/Web/API/GlobalEventHandlers/onclick#notes
@@agustinlevental7488 un ejemplo: Digamos que tenemos una función "handle": const handle = (number) => console.log(number) Y lo asigno como sigue: handle('uno')}>uno Aquí estoy pasando el parámetro 'uno' dentro del callback, pero esta función se ejecutará hasta que se ejecute el "onClick". Queda en memoria mi callback que ejecuta handleClick("uno"), aquí es donde lo asigno. Si yo hago: handle('uno')}>uno handle('dos')}>dos handle('tres')}>tres Aplica lo mismo, cada elemento li tiene su callback asignado en memoria que ejecuta handle con su respectivo parámetro. Si ahora tengo ["uno", "dos", "tres"].map(number => ( handle(number)}>number )) es exactamente lo mismo, el output final de este map sería: handle('uno')}>uno handle('dos')}>dos handle('tres')}>tres Sólo que estoy haciéndolo en el .map, que es un ciclo y asigna a "number" el valor correspondiente en cada iteración.
De 10, estaba haciendo un 'Listado de tareas' y ya venian en estado 'false' y al momento de que seleccionar el checkbox de cada elemento tenian que cambiar el 'estado: false' de la tarea y asi cambiar la condicion del estilo, si bien lo solucione agregando un let=boolean y que este contenga el estado (el verdadero) + useState, la tarea principal seguia sin modificacion. Pero creo que con tu ejemplo ya podre hacerlo de raiz jaja. Saludos. Pd:New Sub
Muy buen video y bien explicado!!! Gracias por el libro, justo andaba buscando algo de react-context espero que hagas un video también sobre eso. Gracias por compartir!!
Me da gusto que te sirva! También puedes ver sobre context en este post de medium medium.com/@juan.correa.herrera/react-hooks-usecontext-98a1696c18c4 Cualquier duda ten la confianza de comentarlo por aquí :D
Súper claro! Gracias! Sólo que cuando quiero modificar un toque el código y pintar con {item.name} y salir del se me recomplica! No es tan fácil ser pro con React.
este video es tremendamente util! te felicito! muy bien explicado. Tengo una duda nomas, ?por que con la actualizacion de Hooks los onClicks que le damos a un button van con una arrow function? esa actualizacion se puede leer en algun lado?
Hola! gracias por tu comentario :D Usar arrow functions es lo más común porque es una sintaxis más limpia que las funciones normales, incluso desde antes de los hooks.
con las arrow functions ej { () => funcion/metodo } , evitas que la funcion o metodo que esta después de la flecha () => /// se auto ejecute al cargar o renderizar el sitio por primera vez.
Muy bueno! Y si en vez de que se me genere un nombre random lo tengo que hacer mediante un input de tipo texto, como obtengo el valor de ese input para enviarlo?
Necesitas identificar cuál va a ser el evento o trigger que va a desencadenar el cambio de estado. Un evento change del input, un submit, un keydown, etc. Luego, la asignas su correspondiente función al evento, obtienes el valor del input y ya haces lo que quieras con él. const handleChange = (e) => { const {target: {value}} = e // haces con value lo que quieras } // en el render
Hola, me surge una duda en caso de consumir una api de un tercero y quiera agregar elementos de dos en dos, seria con este mismo metodo? gracias de antemano
Así es, actualizar las variables de estado aplica igual independiente de la fuente de datos. Digamos que tienes un endpoint que con un endpoint GET te retorna un response con la propiedad "list" que es un array con datos. Para aplicarlo al montarse el componente sería por ejemplo: const Component = () => { const [list, setList = useState([]) useEffect(() => { axios .get('algun-endpoint') .then((response) => { const {list} = response.data setList([...list]) }) }, []) }
hola developero, tengo una duda, como haria para agregar de manera automatica sin el uso de un boton, te cuento mejor como quiero hacer: tengo un servicio que me devuelve un superheroe de una api y a eso le quiero agregar a un array de useState ( [heros, useHeros] ), todo esto dentro de un useEffect, es decir quiero que mi useHeros posea un array de 6 superheroes, eh probado con un for y usando el spread pero no me traen a los heroes. p/d: esto haciendo solo con un heroe sin el for si me sale y me lo lee perfecto pero al querer implementar con un for ya que recorro un array con los ids de los superheroes, no me guarda nada.
ya lo resolvi, he buscado y buscado hasta llegar a tu video, me estaba por rendir e ir a dormir hasta que busque una ultima vez y lo encontre jajjajja utilice esta linea de codigo setHeros(currentHero => currentHero.concat(hero) esto me sirvio, ya que no me servia ni concat ni spread y ademas me tiraba errores de dependencia el useEffect
Me da gusto que lo resolvieras! eso es debido justo a que para actualizar el valor de un array siendo una variable de estado, tienes que regresar un nuevo array en vez de mutar el existente, básicamente como muestro en este vídeo, saludos! :D
SOS UN GENIO AMIGO! Ahora tengo un problema xD, tengo un array de objetos, en un console log me muestra que el array se llena, pero el elemento se muestra en pantalla una vez que le doy click al boton de nuevo, tienes idea porque sucede ? De nuevo te agradezco y me suscribo.
Mmmm pueden ser diferentes causas, en estos casos te recomiendo que verifiques que todo funciona como esperas paso a paso, en el peor de los casos, borra esa parte del código y hazlo de nuevo, eso sirve mucho para ser consciente del flujo del código y detectar bugs
Ayuda por favor!!! Obtengo información de una API y la coloco en un array de 4 objetos pero cuando pongo este array en un state ya no puedo acceder a sus valores que se encuentran dentro de estos objetos, solamente puedo acceder cuando aun no están dentro del state. Ya comprobé que la información sí se encuentra dentro del State pero solo me deja acceder al indice [0] pero a los objetos dentro este indice no. Qué puede estar pasando?. Gracias de antemano !!!
Revisa que realmente se esté guardando en la variable de estado como lo esperas. Lo que puedes hacer es tener un useEffect en tu variable de estado para que veas su valor siempre que se actualice: useEffect(() => console.log(myState), [myState]) Y haz las pruebas, así puedes obtener más pistas de por dónde van los tiros :)
Hola! ya está disponible de nuevo la opción para descargar gratis, lo que pasa es que migré el blog a Next JS. Aquí lo encuentras: localhost:3000/ebooks
![✅ Aprende Cómo Usar useEffect Asíncrono Rápido [En MENOS de un Minuto] | React Hooks Tutorial](http://i.ytimg.com/vi/uofcEr3wzs4/mqdefault.jpg)
![✅ Aprende Cómo Usar useEffect Asíncrono Rápido [En MENOS de un Minuto] | React Hooks Tutorial](/img/tr.png)
⚛️ Curso Patrones Avanzados en React JS en TH-cam y Código en Github...
● Suscríbete al canal si no quieres perderte vídeos como este: th-cam.com/users/developero
● Link del curso en TH-cam: th-cam.com/play/PLkr7dGY4D2sOyjBKXyNhtkIwO3suaqotD.html
● Link del repositorio con los ejemplos del código fuente: github.com/Developero-oficial/advanced-react-patterns
● Link de la app mostrada en el curso: developero-oficial.github.io/advanced-react-patterns/#/
No soy de esas personas que comentan en videos pero este se lo merece.❤
Uff gracias! ❤️
Te amo amigo, aquí a las 5am tratando de resolver una pavada y venís con semejante solución
son videos cortos, pero bien explicados, te hces entender muy bien, te felicito
los videos van directo a lo que se quiere hacer.
Muchas gracias por tus palabras, me da gusto que te haya servido el video!
Hermano súper buena tu explicación, me ayudaste a entender muchas cosas, justo estaba pasando la mal con una lista de tareas y quería comprender el código en lugar de solo copiar y pegar de otro lado. Y nuevo sub!
Genio gracias!
Me alegra haber ayudado! :)
La explicación mas clara que jamás haya visto, muy buena clase, muchísimas gracias!!
Con mucho gusto
¡Super buena explicación! Me ayudaste a resolver en 10 minutos lo que tenía 2 días sin poder encontrar solución.
Hey Andy, me da gusto que te ayudara
X2
Muchas gracias mi hermano, puse el spread operator mal sin percatarme de los otros datos anteriores jaja. Gran video bro :D
Me da gusto que lo resolvieras :)
MUCHAS GRACIAS estoy trabajando con productos y tengo que agregar y eliminar y no esperarba tener la repuesta tan clara y bien explicada!
Qué bueno que te sirvió :D
Publico nuevos vídeos sobre React y su ecosistema, pienso que te pueden servir futuros vídeos también
Un genio, justamente andaba pasándola mal con el tema de "pushear" en el array del useState así que esto me salvo, muchas gracias.
Un gusto :D
no te puedo explicar lo que ayudaste, mil graciasss!!
Con mucho gusto :D
Gracias amigoooo... gracias a esto pude hacer mi carrito de compras
Excelente!
Muchas gracias por compartir tus conocimientos, actualmente trabajo como front-end en reactjs y tenia dudas respecto a useState y los array, pero con tu video me quedó bastante claro, y si, debo admitir que actualizaba algunos array con useState a traves del .push( ) 😅. Te ganaste un suscriptor más, Saludos y espero sigas subiendo contenido actualizado 🏅
Muchas gracias por tu comentario :D me da gusto aportar valor, y sí, sigo creando nuevos contenidos incluyendo de React \m/
Información de valor y muy bien explicada muchas gracias!!
Pregunta/Duda... Como sería la sintaxis si necesito actualizar más de un propiedad del objeto?
Gracias!
Para más de una propiedad sólo la agregas igual que la primera:
setState({
...state,
prop1: 'updated1',
prop2: 'updated2',
propN: 'updatedN'
})
Me has solucionado la vida, eres el mejor
Qué bueno que te sirvió! like y subscribe? :v
Estpy Aprendiendo React y llevaba varios dias intentando agregar datos a un Array y hasta que porfin lo logre. Muchaaaaaaaaas Gracias!!!!1
Con mucho gusto! :D en este canal hay más contenido de React, te invito a darle un ojo a los vídeos :D
Gran explicación!!, llevaba mucho sin entender esto y lo hiciste ver muy facil
Qué bien que te sirvió :D
Gran explicación, saludos desde Brasil.
Obrigada! Saludos :D
Excelente explicación !!! MUCHAS GRACIAS DEV!!
Que bueno que te ayudó!
Gracias, muy bien explicado, saludos desde Chile. : )
Hola, muchas gracias! Saludos desde Mex!
Este Men explica excelente
Gracias 😌
Muchas gracias, estaba atascado con lo de agregar valores , jejej
Que bueno que te sirvió!
Hola! retomando este video siempre que estudio ! 😁 tengo una duda. en el minuto 6:37 al hacerle click al elemento ejecuta handleRemoveUser con (user.uid) como parametro ... lo que no entiendo, en qué momento le está pasando el user.uid como parametro a la funcion handleRemoveUser con solo hacerle click? es porque el elemento tiene como key el user.uid ? sino no entiendo . Este tema siempre me traba a la hora de entender las entrevistas tecnicas! agradezco tu ayuda!!
Hola!
Tenemos lo siguiente:
handleRemoveUser(user.uid)} ... //rest of the code...
Esta parte es la importante:
onClick={() => handleRemoveUser(user.uid)}
Cuando hago esto, le paso por parámetro un callback, que es una función, y dentro del callback ejecuto handleRemoveUser pasándole por parámetro el user.uid.
Te comparto una explicación más a detalle a nivel JavaScript y HTML (React al final sigue siendo JavaScript).
"El evento click se genera cuando el usuario hace clic en un elemento. El evento clic ocurrirá después de los eventos mousedown y mouseup."
developer.mozilla.org/es/docs/Web/API/GlobalEventHandlers/onclick#notes
@@Developero si, eso lo sé, pero cuando le pasa el uid como parámetro no solo hacerle click?
@@agustinlevental7488 un ejemplo:
Digamos que tenemos una función "handle":
const handle = (number) => console.log(number)
Y lo asigno como sigue:
handle('uno')}>uno
Aquí estoy pasando el parámetro 'uno' dentro del callback, pero esta función se ejecutará hasta que se ejecute el "onClick".
Queda en memoria mi callback que ejecuta handleClick("uno"), aquí es donde lo asigno.
Si yo hago:
handle('uno')}>uno
handle('dos')}>dos
handle('tres')}>tres
Aplica lo mismo, cada elemento li tiene su callback asignado en memoria que ejecuta handle con su respectivo parámetro.
Si ahora tengo
["uno", "dos", "tres"].map(number => (
handle(number)}>number
))
es exactamente lo mismo, el output final de este map sería:
handle('uno')}>uno
handle('dos')}>dos
handle('tres')}>tres
Sólo que estoy haciéndolo en el .map, que es un ciclo y asigna a "number" el valor correspondiente en cada iteración.
Muy buen video, me ayudaste a entender los hooks con esto, amigo.
Me da gusto! :D
Hay más videos sobre react y hooks en este canal donde se ven más temas, probablemente te pueda interesar :)
Gracias amigo, muy util y claro en el ejemplo.
Que bien que te sirvió!
Muchas gracias por el Ebook man
Cuál tienes? :D
estoy dando una guía de hooks en el link de developero.io/ebooks
Muchas gracias, buen video, me ayudó muchísimo
Con mucho gusto :)
Justo lo que buscaba! muchas gracias
Un gusto ayudar :)
De 10, estaba haciendo un 'Listado de tareas' y ya venian en estado 'false' y al momento de que seleccionar el checkbox de cada elemento tenian que cambiar el 'estado: false' de la tarea y asi cambiar la condicion del estilo, si bien lo solucione agregando un let=boolean y que este contenga el estado (el verdadero) + useState, la tarea principal seguia sin modificacion. Pero creo que con tu ejemplo ya podre hacerlo de raiz jaja. Saludos. Pd:New Sub
Me da gusto que te sirva, gracias por la suscripción
Muy buen video y bien explicado!!! Gracias por el libro, justo andaba buscando algo de react-context espero que hagas un video también sobre eso. Gracias por compartir!!
Me da gusto que te sirva!
También puedes ver sobre context en este post de medium
medium.com/@juan.correa.herrera/react-hooks-usecontext-98a1696c18c4
Cualquier duda ten la confianza de comentarlo por aquí :D
@@Developero ok lo voy a revisar gracias
Excelente, muy práctico y sin perder tiempo
Así es! y en este canal hay varios vídeos más sobre React que te pueden interesar :D
Excelente explicación saludos ...!
Un saludo
Súper claro! Gracias! Sólo que cuando quiero modificar un toque el código y pintar con {item.name} y salir del se me recomplica! No es tan fácil ser pro con React.
Hola! la clave es la perseverancia y dejarnos guiar por los errores :)
gracias, llevaba un rato buscando una explicación así
Qué bueno que los caminos de TH-cam te trajeron aquí
Una explicación muy clara, gracias por compartir ;))
:D
Gracias, buscaba un método de actualizar un elemento del array
Todos pasamos por eso, gracias por comentar :D
Excelente explicación, 10/10 !!!
Muchas gracias!
muchas Gracias! Me ayudaste mucho.
Con mucho gusto :)
Que interesante tu video, gracias me suscribo.
Gracias. Saludos :D
Que buena explicación, felicidades bro
Hey Maximiliamo! Muchas gracias :D
una genialidad amigo, muchas gracias 🐱💻🐱💻
Gracias!
gracias Loco me facilitaste la vida
Excelente!
Explicas super bien, gracias.
Muchas gracias por tu comentario! :D
Excelente. Me sirvió mucho!
A la orden
este video es tremendamente util! te felicito! muy bien explicado. Tengo una duda nomas, ?por que con la actualizacion de Hooks los onClicks que le damos a un button van con una arrow function? esa actualizacion se puede leer en algun lado?
Hola! gracias por tu comentario :D
Usar arrow functions es lo más común porque es una sintaxis más limpia que las funciones normales, incluso desde antes de los hooks.
con las arrow functions ej { () => funcion/metodo } , evitas que la funcion o metodo que esta después de la flecha () => /// se auto ejecute al cargar o renderizar el sitio por primera vez.
Rifado!! Justo lo que necesito
😎
buenisimo, me quedó clarisimo
Me alegra que te sirva
Gracias por la explicacion
Con gusto
Graciassssssss Marivillosa explicación ...
Con mucho gusto
excelente vídeo, gracias.
Gracias por comentar
gracias por los tips master
Un gusto :D
Que agradable sujeto
😌
Muy buena explicación 👏
Hey Jorge, gracias!
Muy bueno! Y si en vez de que se me genere un nombre random lo tengo que hacer mediante un input de tipo texto, como obtengo el valor de ese input para enviarlo?
Necesitas identificar cuál va a ser el evento o trigger que va a desencadenar el cambio de estado. Un evento change del input, un submit, un keydown, etc.
Luego, la asignas su correspondiente función al evento, obtienes el valor del input y ya haces lo que quieras con él.
const handleChange = (e) => {
const {target: {value}} = e
// haces con value lo que quieras
}
// en el render
@@Developero muchas gracias por tomarte la molestia de responder, un saudo y lo probare
Hola, me surge una duda en caso de consumir una api de un tercero y quiera agregar elementos de dos en dos, seria con este mismo metodo? gracias de antemano
Así es, actualizar las variables de estado aplica igual independiente de la fuente de datos.
Digamos que tienes un endpoint que con un endpoint GET te retorna un response con la propiedad "list" que es un array con datos.
Para aplicarlo al montarse el componente sería por ejemplo:
const Component = () => {
const [list, setList = useState([])
useEffect(() => {
axios
.get('algun-endpoint')
.then((response) => {
const {list} = response.data
setList([...list])
})
}, [])
}
hola developero, tengo una duda, como haria para agregar de manera automatica sin el uso de un boton, te cuento mejor como quiero hacer:
tengo un servicio que me devuelve un superheroe de una api y a eso le quiero agregar a un array de useState ( [heros, useHeros] ), todo esto dentro de un useEffect, es decir quiero que mi useHeros posea un array de 6 superheroes, eh probado con un for y usando el spread pero no me traen a los heroes.
p/d: esto haciendo solo con un heroe sin el for si me sale y me lo lee perfecto pero al querer implementar con un for ya que recorro un array con los ids de los superheroes, no me guarda nada.
ya lo resolvi, he buscado y buscado hasta llegar a tu video, me estaba por rendir e ir a dormir hasta que busque una ultima vez y lo encontre jajjajja
utilice esta linea de codigo
setHeros(currentHero => currentHero.concat(hero)
esto me sirvio, ya que no me servia ni concat ni spread y ademas me tiraba errores de dependencia el useEffect
Me da gusto que lo resolvieras! eso es debido justo a que para actualizar el valor de un array siendo una variable de estado, tienes que regresar un nuevo array en vez de mutar el existente, básicamente como muestro en este vídeo, saludos! :D
SOS UN GENIO AMIGO! Ahora tengo un problema xD, tengo un array de objetos, en un console log me muestra que el array se llena, pero el elemento se muestra en pantalla una vez que le doy click al boton de nuevo, tienes idea porque sucede ?
De nuevo te agradezco y me suscribo.
Mmmm pueden ser diferentes causas, en estos casos te recomiendo que verifiques que todo funciona como esperas paso a paso, en el peor de los casos, borra esa parte del código y hazlo de nuevo, eso sirve mucho para ser consciente del flujo del código y detectar bugs
tengo un ejemplo de createContext y quería que se modifique la info pero no sé cómo pasarle el array, ni donde...
Bien explicado!
Gracias!
Ayuda por favor!!! Obtengo información de una API y la coloco en un array de 4 objetos pero cuando pongo este array en un state ya no puedo acceder a sus valores que se encuentran dentro de estos objetos, solamente puedo acceder cuando aun no están dentro del state. Ya comprobé que la información sí se encuentra dentro del State pero solo me deja acceder al indice [0] pero a los objetos dentro este indice no. Qué puede estar pasando?. Gracias de antemano !!!
Revisa que realmente se esté guardando en la variable de estado como lo esperas.
Lo que puedes hacer es tener un useEffect en tu variable de estado para que veas su valor siempre que se actualice:
useEffect(() => console.log(myState), [myState])
Y haz las pruebas, así puedes obtener más pistas de por dónde van los tiros :)
@@Developero lo revisaré, muchas gracias por la respuesta :)
PEDAZO DE CRACK
🤙
Dónde se descarga el libro gratis? Apunta a Amazon... Saludos
Hola! ya está disponible de nuevo la opción para descargar gratis, lo que pasa es que migré el blog a Next JS. Aquí lo encuentras: localhost:3000/ebooks
gracias men
Con gusto :D
Moltes gràcies
Me da gusto que te sirviera :D
Excelente.
Exáctamente, solo llevo una semana en react, todavía no comprendo por qué useState si es un arreglo no soporta push ni pop, exacto amigo. Gracias.
Me da gusto que te sirviera uwu
Excelente
Gracias! 😊
te amo pa
super
💪
Gracias, gaste tiempo sin poder eliminar usando hooks :'v
Eliminar = filtrar
rip
:o