QUÉ es un ESTADO en REACT 🤔 CÓMO usar USESTATE 😎 Curso de React desde cero #9
HTML-код
- Опубликовано: 29 мар 2022
- ¿Qué es un estado en React? ¿Para qué sirve? ¿Cómo usar el hook de useState?
Hoy lo explicamos por aquí!
Nuestra plataforma de elearning 👉 learnthisacademy.com
¿Quieres estar al día? 👌 Síguenos en nuestras redes sociales! 👌
-Twitch: / desarrolloutil
-Instagram: / desarrolloutil
-Discord: / discord
-Twitter: / desarrollo_util
Es la mejor y más completa explicación del useState de todo internet!!!
Excelente explicación y ahora terminé de comprender el useState. Muchas gracias.
En este video encontré una de las razones por las que nunca había terminado de comprender React y es que React es todo menos reactivo jajaja a pesar de que su nombre lo diga. Eso y que el virtual DOM ponga una capa de abstracción para tratar el DOM del navegador son conceptos esenciales que pocas veces se dicen por parecer evidentes para los desarrolladores más avanzados.
Es increíble lo bueno que es esta explicación. Tiempo sin ver tan buen material, de verdad que te felicito Pablo
Muchas gracias Héctor, me alegro de que te guste!
uuuuuuuffff que buena explicacion, no fuiste de una a explicar como usar useState (como en la mayoría de los tutos que he visto), sino que explicaste con el lapicero (esfero), el concepto de estado y el tema del renderizado, tuve que devolverme en varias ocasiones pero no por tu explicación sino por que son muchos conceptos base para continuar, muuuchas gracias
Gracias, finalmente me ha quedado claro el estado y su relacion con los compomentes de react
Lei sobre promesas en varios sitios y sin dudas la forma en que lo explicas fue la mas clara, gracias!!!!
Que increíble video, todo bien explicado y ejemplos muy claros
Hola! Llegué al canal pq tgo problemas con el useContext, y me estoy dando cuenta de había entendido los hooks muy por encima. No puedo creer todo lo que aprendí en unos pocos videos se me está aclarando mucho el panorama. Mil gracias excelente canal Dios los bendiga
Increible lo bien explicado que esta esto. Muchisimas gracias por tu trabajo!
Pedazo de video, es justo lo que buscaba porque me estaba frustrando un poco este tema y has dado en el clavo, ahora lo entiendo muchísimo mejor. Sin duda me veré más videos de este canal
Gracias!
La verdad es que está excelentemente explicado! 👏👏👏
Excelente video! Muy claro. Gracias!
gracias por este contenido no habia podido entender los hooks hasta que vi este material muy bueno, concentrado y directo gracias
Excelente explicación
De lujo muchachos. Vengo de ver muchos videos relacionados a este tema y hay que decir que hacen un muy buen resumen de todo lo que implica esto de los estados. Sigan así. Saludos
Y creo que todavía nos falta un vídeo de esto, que acaba de salir React 18. Muchas gracias!
Increíble explicación, gracias por la ayuda!
Más claro que el agua. Chapeau...y gracias!!
explicas tan claro que trabajo y veo tu video al mismo tiempo .Gracias
Tremenda explicacion chavon! muy buenooo!
Excelente explicación, me has ayudado mucho, aun me quedan dudas, pero me llevo más respuestas que las propias dudas. Gracias.
¡Excelente explicación!
Gracias por la explicación del state.
Todas las dudas aclaradas. Gracias
Sois una maravilla, agradezco mucho el haberos descubierto, seguid divulgando contenido de esta forma ❤
Seguiremos! Muchas gracias 🙂
Gracias por esta excelente explicación, saludos desde Argentina!
¡Espectacular, gracias!!
Excelente trabajo, un saludo desde Argentina!
Mas conciso y resumido no puede ser, excelente vídeo.... y conociendo lo detallado que eres para explicar las cosas, me imagino cómo te habrá costado editarlo... jajaja, saludos!!!
Y todavía se me han quedado cosas en el tintero... Hay tanto que explicar 🤒
Excelente!! 👌
Muchas gracias!!
Muchas gracias por tu contenido, estoy ahorrando para poder comprar tu curso de react, ya que explicas de una forma tan detallada que es muy fácil entender todo a la perfección
Y eso que todavía no has visto el curso de verdad! Muchas gracias y te esperamos dentro 🙂
Gracias, me ayudó mucho la explicación
Que crack!😮
sos un maldito crack pablito!
Gracias por el vídeo
muchas gracias por esta gran información, de los mejores videos que e visto 😄😄😄
Me alegro! Muchas gracias
Gracias por tanto.
excelente el trabajo que hacen. Los felicito!!!
Muchísimas gracias!
Excelente video chicos, muchas gracias!!!
Gracias a ti!
Excelente explicación mi amigo. Con gusto te compro el curso, ya lo vi en tu página. Saludos y que venga el contenido de calidad!!!
Muchísimas gracias Emilio!
Muchas gracias, excelente forma de explicar
Gracias a ti, Sebastián!
Mejor explicado es imposible. Felicitaciones
Muchísimas gracias Sonia!
Gracias. Muy bien explicado
Gracias a ti Juan David!
Impecable Pablo!!! Vos sabés que he visto a otras personas mutar el useReducer y les dicho que eso está mal y por no querer cambiar algo que supuestamente "anda" me ignoran lo que digo. Aparte hacer ese tipo de mutaciones crean bugs interesantes de encontrar.
La verdad el otro día seguí tu curso y voy por esta parte, la mayoría que contás ya lo sabía pero lo que me gusta de ustedes es que van a lo fino y lo profundo y ahí se van diluyendo conceptos que sin darme cuenta tenía errados.
Sé que cuando lo termine voy a escribir mejores componentes y sin fallas y espero mostrarte mejor código cada vez que lo mires.
Un saludo y siempre me dice un conocido que react no es complicado sino somos nosotros los que lo complicamos.
El mayor motivo que nos impulsó a hacer estos cursos, y lanzar nuestra academia es simple y llanamente, dar la visión de las cosas que nadie da.
Hoy en día, lo sencillo es hacer que funcione y ya está, un par de proyectos llamativos, un par de trucos rápidos y tienes un curso montado en dos semanas.
Cada hora de contenido de mi curso, aproximadamente, me lleva una semana de preparación. Quiero pensar que al final, cuando la gente descubra que hay otra forma de enseñar, que se centra más en obligarte a pensar, en que entiendas el por qué, esto funcionará. Y de momento creo que no me equivoco.
Muchísimas gracias por la confianza, y no te quepa duda de que cuando acabes el curso, React no será complicado. Eso te lo puedo asegurar.
Buen video
Exelente explicación Pablo!
Muchas gracias!
me aclaraste muchas dudas gracias
Excelente forma de explicar, deberías seguir con el siguiente hook de importancia el useEffect
Dentro de nada se viene. Muchas gracias!
Excelente Explicación, saludos
Me alegro!
Muchas gracias, maquina
A ti por comentar!
buenísimo estoy empezando a estudiar react y me ayudo mucho tu video te daría dos likes si pudiera 🤘🧠💯
Me gusta el tema que usas para la fuente de VSC. Cómo se llama? Gracias.
PabloGOD, buen video!
Muchas gracias! 😂
Buenas queria decirte que tus videos ayudan mucho. explicas muy bien. una consulta, tu tema de vs code cual es ? es hermoso me gusta un monton me lo podrias decir por favor desde ya muchas gracias!!!
Muchísimas gracias! Es Monokai Vibrant
Excelente trabajo, chicos! 👏
Llevo rato educándome con ustedes y la verdad es que estoy más que agradecido con sus aportes a la comunidad. El curso que han lanzado en la academia me llama mucho la atención. Solo quisiera saber si hay diferencia respecto al contenido que muestran cada semana aquí en este canal contra lo que se está ofreciendo en el curso de la academia?.
Gracias y saludos desde México! 🇲🇽
Nos alegramos mucho de que te ayude!
El curso que hemos lanzado en la academia, es una versión muchísimo más en profundidad que este. El nivel de detalle de cada concepto es mucho, mucho mayor, más organizado y desde luego, llegará mucho más lejos que este.
El objetivo de ese curso en la academia, es llegar al máximo nivel del que somos capaces, esperemos lograrlo!
@@DesarrolloUtil Excelente! Gracias por la respuesta y estoy seguro de que se logrará llegar al siguiente nivel. Tienen todo para lograrlo, es cuestión de tiempo.
Y pues bueno, a adquirir el curso y aprovechar la oferta de preventa. 🤟🏼
Muchísimas gracias, y bienvenido!
Recuerda que en la parte de "Mi cuenta" puedes unirte al servidor de Discord de la plataforma, para todo el tema del soporte.
Únete al servidor desde el botón y vincula tu cuenta de Discord, y lo tendrás!
WOOOW 😃 Su app web quedo increible 👌, al entrar cargo MUUY rapido, el diseño esta exelente, me gusto mucho, felicitaciones, Learn This Academy quedo muy exelente, tengo un par de preguntas xD.
-¿Usaron Vite para construir esa App Web?
-¿Para el Responsive Design comenzaron por crear el diseño para la version mobile o desktop?
-¿Para el Responsive Design utilizaron el metodo de crear componentes para version mobile y componentes para version desktop, o los mismos compoentes solo adaptaron el diseño en CSS, o cual fue su metodo?
-Para el Responsive Design note que de 480px para abajo el boton de "Registrase" desaparece, ¿esto es a proposito?, si si lo es ¿porque tomaron esa desicion?
-¿Utilizaron MongoDB para la DDBB?
-En donde alojaron la app, y porque ahi?
jajaj bastantes preguntas, disculpa, pero su proyecto quedo increible, y hasta yo estoy emocionado xD
Uff, mucho texto... Vamos allá!
- Usamos NextJS para el front
- Para el responsive, ya estamos acostumbrados a trabajar desde un enfoque "mobile first", casi nos sale automático.
- Siempre que sea posible, procuramos adaptar los componentes con CSS. Hay casos donde es inviable, y los sustituimos, pero sólo usamos esta técnica para excepciones.
- El botón desaparece, simple y llanamente porque no caben los dos a la vez. Hay que elegir uno, y ambos terminan permitiendo el acceso a la misma pantalla.
- Tenemos una infraestructura de microservicios donde usamos varias bases de datos. Cada micro tiene su propia BD en MongoDB y además otra BD en Redis para consultas rápidas.
- El front en Vercel, porque funciona muy bien y por pura comodidad, además de usar CloudFlare. El back está en DigitalOcean, porque funciona bien y el precio nos cuadra. El front estará siempre en Vercel porque aporta mucho, el back podríamos moverlo a otro proveedor sin problema, hay muchos que son válidos.
Creo que no me dejo ninguna!
@@DesarrolloUtil Exelente, muchas gracias por responder mis preguntas, saludos
exelente video pero creo que falto un poco mas acerca del useState sobre todo por hay casos en donde uno necesita el valor anterior y este solo se obtiene utilizando la función del setState. Pero esta bien estare esperando a que expliques el useEffect que aun se me complica a veces y sobre todo al inicio se me creaban loops infinitos pero ya le he ido aprendiendo el truco
Cierto, pero es que este no es el único de useState que habrá!
@@DesarrolloUtil genial lo esperare con ansias
theme vscode?? please
Están muy buenas tus clases, deberías buscar la manera de que el código de ejemplo se visualice un poco mejor pues aun ampliando la pantalla no queda del todo nítido, gracias por las explicaciones.
Vengo de programar en C/c++ durante años, con qt, rad studio, etc, tambien visual basic, he trabajado con punteros, he
usado herencia, polimorfismo, composición, etc, y no hay manera que entienda la existencia de los dichosos estados y para que són??????. Ya que yo puedo tener variables globales y ahí definir las "cuestiones" o "estados" que considere. O puedo tener propiedades privadas en una clase y ahí tener mis caracteristicas. En fin, no hay manera que comprenda esto.
Por mi parte te podría decir que según lo que comprendo, no es posible guardar tus estados en "variables globales" Ya que los componentes en React se renderizan "reactivamente" es decir, un componente no está ligado a la función de la que fué creada sino a la instancia de esta (algo similar a variables de clase vs variablles de instancia) y precisamente el hecho de que en React creemos componentes con funciones nos imposibilita de usar las variables de clase (si haces componentes con clases no necesitas de estos hooks)
tengo una duda ¿setear es actualizar algo?
SI EL PRIMER PARAMETRO DE LA VARIABLE "USESTATU" ES COMO EL INICIO Y EL SEGUNDO ES LA ACTUALIZACION.
11:00 "Entonces podemos decir que este setLikes lo que hace, no es solo modificar el valor de likes, sino informarle a React de que el Estado se ha Modificado, y cuando se Modifica un Estado SIRMPRE de produce un nuevo Renderizado"
-Super Fundamental
Y tanto!
react que no reacciona 😁😁😁, perdonen mi ignorancia...
{
const newLikes = { ...likes2 };
newLikes.val++;
setLikes2(newLikes);
}}
>
Likes 2
Pregunta, cada vez que le damos click al Button "Likes 2" se crea una nuevo objeto con una nueva referencia y esa es la razon por la cual podemos actualizar el estado?
Es decir se crea una nueva variable newLikes con un referencia diferente, debido a que es una copia del objeto anterior. Es asi...?
Correcto!