Curso React: 12. Comunicación entre Componentes - jonmircha
HTML-код
- Опубликовано: 16 сен 2024
- En este video te explico las diferentes formas de comunicación entre componentes en React.
⚛️ Curso React - • Curso React.js
💛 Aprende JavaScript - aprendejavascr...
🔵 Curso Webpack - • Curso de Webpack - jon...
📖 Mis notas sobre React jonmircha.com/...
📦 Códigos: github.com/jon...
🎥 VIDEOS RECOMENDADOS
🟣 Instalando Git - • 🤯😱 Usa la terminal de ...
🟣 Instalando Node - • Instalación de Node.js...
🟣 Instalando NVM - • Múltiples versiones de...
🔔 Suscríbete al canal ruclips.net/user/jo... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame con una Donación jonmircha.com/...
📫 Suscríbete a mi lista de correo tinyletter.com...
#React #Reactjs #JavaScript
Tengo 32 años y estoy aprendiendo react y estas clases son tan detalladas que uno aprende súper bien Gracias @jonmircha
😉👌🏻
Lo encontre!!!!!!!
En el video anterior te pregunte como hacer que parpadee la pantalla al renderizarse el virtual DOM.
Aqui te lo preguntaron de nuevo.
Con las React Dev Tools instaladas, ir a la pestaña Profiles, settings, y habilitar el checkbox de
Highlight updates when components render.
😉👍🏻
que parpadee la pantalla? what? xd
@@martingalendafíjate q cuando hay algún cambio en un componente, se marca un recuadro alrededor suyo, eso no sabía cómo lograrlo
@@carloscontreras6051 ahh perfecto, ahí entendí. Genial que lo lograste. Saludos!
De lejos el mejor curso sobre react que he visto. Gracias por tanto, saludos.
👋🏻😃
Excelente video, que intesante la comunicación de componentes, lo bueno que la comunicación de componentes padre-hijo e hijo-padre, ya enseñaste con las props y los eventos personalizados, todo calza :)
😉👍🏻
Quede así 🤯🤯 en esta clase, muy buena, ojala después de los cursitos de nodejs, pueda hacer un taller de maquetación con bootstrap, React y nodejs para poder profundizar de manera practica en estos conceptos, sin más que decir, gracias por semejantes cursos
👋🏻😉
Excelente curso! Jon! muchas gracias!!!
Muchas gracias!
Curso genial y entendible el mejor en español que se pueda encontrar en internet !!!
😉👍🏻
Aqui estamos, dia #2. Ayer me acoste a las 11PM y llegué hasta aqui. Hoy me levante a las 7, espero poder mirar 5 o 6 antes del mediodia. Se me esta haciendo bastante intuitivo comprender la idea de React y ya estoy empezando a imaginarme como hacer mis propias soluciones. Gracias por semejante trabajo hermano
😉🔥😉👍🏻
debo decir que tu forma de explicar es brutal , y lo que mas me gusto fue que justo andaba pensado en aprender los hooks de react y me leíste la mente
😉👋🏻
'Que buen curso, muchísimo mejor que los de pago en Udemy. Master of the masters 🛡
Muchas gracias!
Este curso está increíble.
😉👍🏻
Que curso tan genial. No mientes al decir que tienes el don de la enseñanza! Mil gracias profesor.
😉👍🏻
muy conciso y claro, gracias por mostrar las opciones disponibles para comunicación de componentes
😉👍🏻
muchas gracias por compartir tus conocimientos con nosotros! Muy clara la clase
Con mucho gusto👋🏻😉
Muy buena clase! gracias
Con mucho gusto
El mejor, lejos!
👋🏻😉
La forma que tiene de explicar las cosas es genial. Felicitaciones y muchas gracias por compartir tu conocimiento!!
Hola, muchas gracias
Mejor explicado imposible. Que bueno que hayas facilitado el articulo guia. Muchas gracias por compartir tu trabajo.
;)
aprendiendo todo, gracias.
😉👋🏻
Excelente, gracias por tu deciaci'on
Gracias, saludos
Muchas gracias 🧙♂
😉👋🏻
jon muchas gracias por este recurso Dios te bendiga, de verdad que es un alivio aprender de esta manera. viniendo de un bootcamp donde te enseñan todo muy generalizado y con demasiada prisa. Saludos desde Colombia
👋🏻😉
en todo este tiempo no me había planteado la pregunta de como pasar o mandar una propiedad entre componente que no se relacionan, gracias .
😉👋🏻
Me encanto la explicación !!! Entendi mucho sobre las comunicaciones, ya espero verlo en las prácticas :D
🤓👍🏻
Genial, todo un reto esto. Imagino que en la medida que un aprendiz como yo siga escuchando y luego practicando, se sentirá más en armonía con el contenido. e ve fuerte, pero si otros pueden, creo que yo también. Gracias Jonmircha, excelente todo.
Exacto, la práctica es fundamental, lo que no se practica se olvida
Excelente curso, muy completo, 10/10
🙌🏻
eres el mejor jon
😉👋🏻
Master! Excelente explicación, muchas gracias.
Con mucho gusto
Excelente contenido, muchas bendiciones @jonmircha 👍
🙌🏻🥰
gracias por el curso
😎👍🏻
Excelente Jon like alwaysss!!!
👋🏻😉
el mejor profesor
😉👋🏻
Muy buenos estos videos, gracias por la info.
A la orden🤓👌🏻
mágico!!!
👍🏻
A este punto logre crear todo antes que tu lo hicieras la verdad mil gracias, lo unico que tube un error al crear el metodo para cambiar el estado no se porque use un igual despues de this.setState la verdad igual no estaba seguro porque no lo lleva asi que vi un poco mas de esto y me dicuenta que el ya es una funcion que espera un callback o algo asi.
🤓👍🏻
gracias
😉👍🏻
eres mi jedi favorito jon... gracias por todo lo que haces 😎👍
😉👍🏻
Creía que únicamente se podía comunicar el hijo con el padre con redux , gracias por estos vídeos
😉👌🏻
No si por defecto no les parpadea los componentes al renderizarse, para activar esa función deben ir al extensión de react developer tools e irse a la tuerca(view setings, no confundirse con la de la consola del navegador) y activan highlight updates when components render.
👍🏻
Video Completado!
😉👍
Hola Jon!, buenos días!. Gracias por compartir todo este contenido. Te hago una consulta. Cual es la diferencia entre poner export y export default
export no puedes cambiar el nombre de lo que exportas en el archivo donde importas, con default sólo puedes exportar una cosa y donde lo importas puedes darle un alías pero puedes ver este video también ruclips.net/video/0GEUyQXe3NI/видео.html
@@jonmircha buenísimo muchas gracias!
Quien putas puede llegar a darle un dislike a un video de Jonmircha?
🤭
Buenas técnicas para pasar datos entre componentes que se encuentran en una jerarquía!
😉👍🏻
Excelente!
😉👍🏻
Seguimos avanzando.
Jon quería preguntar algo respecto a React ya en el ámbito profesional.
Cuando has trabajado con React han tenido que usar Framework como NextJs o Gatsby, tengo esa duda porque entonces después de aprender todas las bases de React ¿Sería recomendable ir por algunos de estos Framework?
Saludos, te mando un fuerte abrazo.
Son complemento pero no indispensables, depende de cada proyecto
jon mircha en la parte de tu bloq que muestras en este video en el minuto 24:10 la pestaña emergente para las donaciones la palabra (clave) esta mal escrita....sigo diciendolo muy buen curso enserio me has ayudado demasiado .
👋🏻
Genial!
😉👋🏻
1. Comunicacion entre componentes padre hijo(s).
2. Comunicacion por medio de una store como redux.
3. Comunicacion por medio de event listeners para componenentes que no se relacionan entre si.
4. Comunicación por medio del signalr.
;)
Hola gracias por los conocimientos, incluirás dentro del curso conexión a base de datos y/o a una api?.
Saludos
APIs
Buen video Jon, aunque me hubiera gustado un pequeño ejemplo de comunicación entre componentes no relacionados usando Redux
👍🏻
Muy buen video!!!
Gracias!
Hola Jhonatan, que usas para hacer el highlight mientras explicas. Osea que se pone una opacidad de color negra encima de todo y solo se destaca la parte que sombreas.
EL atajo de windows para tomar una captura de pantalla win+shift+s
@@jonmircha gracias
Muy buenos tus videos , Yo estoy usando componentes de clases , y tengo dos seccion , separado en modulos , lo que quiero es guardar en un estado y pasar al otro componente que esta en otro modulo, se puede? , queria hacer en redux , para guardar de manera global pero creo que con componentes de clases no se puede, que recomiendas hacer?
REDUX o CONTEXT API más adeante lo explico
Buenisimo!!
Gracias!!
Me tomé dos días pero acá sigo y no me acuerdo nada! jajaja. Ya me voy a empapar. Gracias jon!
🤭👍🏻
@Jonmircha 13:06 Pregunta: aqui se renderiza en ambos el boton +, pero hay alguna manera para que en el hijo 1 no se renderice????
Si el padre se renderiza todos sus hijos lo hacen
buenas sensey una pregunta porque los nuevos fragmentos me marcan error yo uso React.Fragment ?
Revisa que tengas la versión React 16.8 o superior
Es mucho info... pero excelente explicación.
🤓👍🏻
amoooooooo
🙈🥰
Que lindo, fuí el like nro 2000 :3
😉👋🏻
Profe, la verdad react parece muy intimidante jaja, me siento como una hormiga intentando aprender cálculo integral 🤯😥
ánimo ;D
Vamos amigo, sigue insistiendo, te prometo que te soluciona la organización de una app o pagina, es muy práctico si ya sabes lo basco (al menos) de Javascript y HTML
@@leandrolobo muchas gracias Leandro, no me rendiré :)
Es que a lo mejor no tienes buenos fundamentos de Javascript. Es necesario saber cómo funciona la orientación a objetos, que son los métodos, como usarlos o declararlos, la sintaxis y sus funciones. Sin eso por más que hagas 10 proyectos con React aprendidos de otro desarrollador, creo que nunca vas a estar entendiendo que es lo que realmente estás haciendo.
Profesor Jon, cómo hacer para que en el navegador parpadeen los componentes que se renderizan, como en el video? Ya tengo instalado el React tools
Sólo selecciona algún nodo en el inspector de elementos
@@jonmircha Gracias!! ⭐
Genial saludos
Gracias! 😊
Tienes algun video donde expliques con ejemplos como funciona Redux mas o menos ?
En octubre retomo el curso de React y es el siguiente tema, pero mientras puedes ver las clases de los Reducers, que es exactamente lo mismo que Redux pero nativo de React
muy bueno che, si lo de los portales lo veo medio raro,
los portales más adelante lo explico ;)
Profe va a hacer algún curso o alguna sección de este curso enfocada a Redux?
Talvez ;)
En este curso se verá Redux y sus middlewares?
más adelante...
Se explicara Context y Redux en el curso?
😉
Profe tengo este error: Porfa Ayuda
src\components\ComunicacionComponentes.js
Line 4:5: 'state' is not defined no-undef
Line 8:5: 'incremetarContador' is not defined no-undef
Search for the keywords to learn more about each error.
Seguro tienes errores de dedo en los nombres de las variables
13:48 funciono todo perfecto pero no me aparece como de usted que se resalta con rectangulos los componentes que se vuelven a renderizar, ya probe con Chrome y Firefox y tengo instalado la extención de react para el navegador en ambos caso o es algo que me falta tener =(
¯\_(ツ)_/¯
Hola, amigo. No se si aún estés necesitando solución a esto, pero si es el caso, hay una opción en la config de la extensión que necesitas tildar. Se llama Highlight updates when components render.
Saludos!
@@luckwynd8996 muchas gracias amigo lo revisare
Jon por lo que veo no se modifican las props ya que los metodos que se pasa a los hijos como props son los mismos, hablando de sus referencias como métodos. Por lo cual no deberían rendrizarse nuevamente los hijos ya que no modifican sus props. En resumen, es el mismo mensaje y los mismos métodos que se pasan como props. Porque tintinean en blanco los margenes a cada click?
y si quisiera comunicar información del hijo al padre y no ejecutar una función en el padre, como podría hacerse?
Manejo del estado global
Bárbaro, me quedé con el ojo cuadrado!!!
🤭😉👋🏻
a mí no me aparece ese cuadrado indicador que te aparece a ti cuando renderizas :'(
Eso es por que tengo activa la flechita de las devtools de chrome
@@jonmircha no era por la flechita, descubrí que en el botón de configuración de las React Dev Tools hay una opción con un check box que dice: Highlight updates when components render.... solo fue marcarla y listo :D
:D
por la clases 12
👋🏻😉
3-4-2023 12:29
Saitama!
🫖🫖🫖🫖🫖🫖🫖
😉👋🏻
Estos capítulos Aun están validos,no?
Sí
Yo pienso en los portales de Rick y Morty jajaja
jajaja
otros 26 minutos de conocimiento, basta de escribir, a prestar atención.
👋🏻😉
gracias excelente video
Gracias por comentar