Dominio de React Hooks: crea aplicaciones modernas en React con proyectos

1. Introducción al curso: Bienvenido al curso sobre masterización de React Hooks y construcción de aplicaciones web usando react moderno Mi nombre es Faisel, y seré tu instructor para este curso Seré su guía a lo largo todo este viaje integral hacia el mundo de los ganchos de reacción. Ahora, como desarrollador, emprendedor y educador apasionado , he diseñado este curso para ayudarte a desbloquear los verdaderos potenciales de los componentes funcionales de reacción con este increíble concepto de ganchos de reacción Ahora en el acelerado mundo tecnológico de hoy en día, dominar los ganchos de reacción es un cambio de juego Permiten escribir código más limpio y eficiente a la vez que resuelven problemas complejos de una manera sencilla. Ya sea que estés empezando por reaccionar o si eres un tabloper de nivel avanzado o si eres alguien que es intermedio, este curso tiene que ofrecer algo para todos Ahora bien, en este curso en particular, comenzamos hablando de qué son los ganchos de reacción, por qué importan los ganchos y por qué existe este concepto de ganchos en primer lugar. Entonces hablamos de ganchos como nosotros gancho estatal y entendemos cómo hacer uso de él. Hablamos de ganchos como useFhok, usamos gancho de efecto, cubrimos usar gancho Así que muchos ganchos están cubiertos en este curso en particular, y al final, también aprendemos cómo puedes crear tus propios ganchos personalizados. Ahora, durante este viaje de aprendizaje y comprensión de ganchos, también construimos muchos proyectos. Bien, construimos algunos proyectos que cubren el uso de estos ganchos. Así que básicamente no solo llegas a aprender los conceptos, sino que también llegas a implementar estos conceptos en proyectos reales. Y esto es lo que hace que este curso sea completamente manos a la obra. Entonces hago uso de diapositivas mínimas y básicamente me concentro en todas las explicaciones prácticas. Entonces ahí es donde estará mi foco. Básicamente me apago al IDE y me aseguro explicar todo con la ayuda de ejemplos dentro del propio ID. Al final de este curso, te puedo garantizar que no solo tendrás una base sólida en el mundo con el concepto de react hooks, sino que también tendrás confianza para construir aplicaciones dinámicas y escalables basadas en reaccionar. Este curso es perfecto para desarrolladores que quieran mantenerse actualizados con las tendencias actuales con prácticas modernas de reacción y construir algunos proyectos prácticos en el camino para profundizar su comprensión Estoy muy emocionada de llevarte a través de la clase. ¿Estás listo para elevar tus habilidades de reacción y sumergirte en el mundo de los ganchos de reacción? Si están vamos a embarcarnos en este viaje, y los veré a todos dentro del curso. 2. Bienvenido a React Hooks: una revolución funcional: Oye, ahí. Ahora es el momento de que empecemos a hablar enganches de reacción y entender lo que son. ¿Todo bien? Ahora, siempre que estés construyendo algún tipo de aplicación web y si estás construyendo algún tipo de funcionalidad, ¿de acuerdo? Sea cual sea el lenguaje de programación que esté usando, sea cual sea el framework que esté usando, siempre habrá escenarios en los que querría agregar algún comportamiento dinámico a los elementos en la página web, ¿verdad? Por ejemplo, al hacer clic en un botón de aquí, por ejemplo, podría querer que cierta página o cierta parte de la página se actualice solo con el clic de este botón. A lo que pasa por aquí es que solo se supone que esa parte debe actualizarse y no toda la página. Pero lo que sucede es en el desarrollo web tradicional, si haces clic en el botón, toda la página recarga solo para actualizar esa parte en particular Eso es el desarrollo web tradicional. Pero ya sabes con reaccionar, tienes una manera en la que podrías agregar un comportamiento dinámico a los componentes. Haciéndolos interactivos responsivos sin necesidad de una recarga completa de la página ¿Bien? Entonces esto es posible con la ayuda del concepto de ganchos. ¿Todo bien? Ahora, los ganchos no son más que características especiales que le permiten agregar un comportamiento dinámico al componente. Y simplemente no se trata de actualizar la página sin una recarga completa, ¿de acuerdo? Hay muchas más cosas que pueden ser posibles con los ganchos de reacción. Por lo que actualizar la página sin recargar completa es solo un ejemplo que te di para ayudarte a entender ¿Todo bien? Por ejemplo, tengo esta base de código por aquí. Bien, esto es de código sandbox. Es una base de código disponible públicamente desarrollada por alguien. Y aquí, vi este código donde hay un contador creado usando react. Bien. Entonces aquí, puedo decir incremento, ya pueden ver, y esto es decremento Ahora, al hacer clic de estos botones, se está incrementando y decrementando sin Y esto es posible con la ayuda de los ganchos de reacción. ¿Bien? Ahora bien, esta es una posibilidad. Hay cualquier número de posibilidades. Hay diferentes tipos de ganchos disponibles en react que puedes aprovechar para construir para hacer diferentes tipos de cosas. Y cada gancho que existe tiene algún tipo de especialidad en la que puedes usarlo en tu aplicación. Todo bien. Entonces, ¿qué son los ganchos? Hooks, te permiten agregar algunas funciones interactivas a tu aplicación de una manera sencilla, y te ayuda a hacer que tu aplicación sea más interactiva donde las cosas cambian a medida que interactúas en lugar de una página web estática, ¿verdad? Entonces esto es muy útil, ya sabes, este tipo de funcionalidad, como este tipo de característica es muy útil si estás construyendo una especie de formulario, digamos, y dependiendo de lo que el usuario esté escribiendo o cualquier tipo de manejo que quieras hacer para la entrada del usuario, cualquier tipo de actualizaciones de datos. Por ejemplo, el usuario escribió aquí y es posible que desee que algo se actualice en diferentes partes de la página Todas estas actualizaciones se pueden impulsar sin problemas dando a tus usuarios una mejor experiencia, ¿verdad? Y esto hace que tu aplicación web sea muy atractiva y receptiva. Ahora, aquí en la documentación oficial de react hooks, verás que hooks te permite usar diferentes funciones de reacción de tus componentes, ¿de acuerdo? Y como dije, hay diferentes tipos de cosas que se pueden hacer con los ganchos de reacción, y eso es lo que se denomina como características de reacción por aquí ¿Bien? Entonces ahora hablando de ganchos, también hay ganchos incorporados que reaccionan proporciona, y puedes combinarlos para construir los tuyos también. Así que incluso puedes crear tu propio gancho personalizado, ¿verdad? Y aquí del lado izquierdo, verás la lista, ¿de acuerdo? Entonces usa Action State, usa callback, usa Context Todos estos son ganchos, ¿verdad? Hay bastantes. Bien. Estaremos hablando de los más importantes. Por ejemplo, algunos de los ganchos que se usan mucho es estado de uso. Entonces, si estás trabajando en reaccionar, verás que el estado se usa mucho. Usa ref siendo usado mucho. El efecto de uso también es un gancho que siempre se usa en base de código de reacción. Entonces hablaremos de nosotros hablaremos de ganchos que son muy comunes. Y una vez que obtenga algunos ganchos, entonces será muy fácil para usted construir sus propias aplicaciones de reacción que hagan uso o aprovechen la función de reacción directamente desde dentro de los componentes. Todo bien. Entonces esto es react hooks. Hay bastantes que necesitamos aprender y entender cómo podemos hacer uso y por qué existen, ¿verdad? Cada gancho de reacción tiene alguna habilidad que proporciona. Y dependiendo de tu necesidad, decides en cuanto a qué gancho quieres enganchar quieres implementar en tu aplicación. ¿Todo bien? Entonces eso es acerca de los ganchos de reacción. Espero que esto te haya dado una visión decente de qué son los ganchos y por qué deberían usarse en react. 3. Presentamos React State: los fundamentos de las aplicaciones dinámicas: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de estados en react, y es importante que entendamos este concepto para que podamos hacer uso de use state hook in react, que es uno de los hook más utilizados en las aplicaciones react, ¿verdad? Entonces, ¿qué es un estado? Ahora, un estado es cualquier tipo de información que tu aplicación web pueda querer almacenar. Bien. Ahora, claro, aquí puedes ver esta aplicación. Bien. Y aquí en la parte superior, tienes algunos ajustes. ¿Bien? Ahora bien, esta configuración me permitirá poner un modo de luz o un modo oscuro, así puedo activar esto, bien. También está este botón. Creo que esto es para bien. Entonces esto es para traducciones, creo. Bien. Pero esto también está configurando, si quiero ver el sitio web en algún otro idioma, podría elegir un idioma diferente de aquí. Si no quiero el modo oscuro, puedo cambiar el modo desde aquí, ¿verdad? Entonces lo que está pasando por aquí es este sitio web, react dot EV está almacenando una especie de configuración o una preferencia para mí como usuario, ¿verdad? Entonces soy usuario. Estoy interactuando con este sitio web. Estoy configurando la preferencia como Modo oscuro. Entonces es tener en cuenta esta preferencia que, oye, este usuario quiere ver o leer este sitio web en modo oscuro, y cada vez que estoy de visita, me está mostrando la preferencia. Siempre que estoy de visita, me está mostrando el sitio web de esa manera en particular, ¿verdad? Entonces este es un tipo de información que está guardando sobre su usuario. ¿Verdad? Ahora, piensa en esto como un marcador que usarías al leer un libro. Así que imagina que estás leyendo una novela, y a medida que avanzas por los capítulos, guardas un marcador para recordar dónde te detuviste, ¿verdad? Entonces este marcador, que cambia a medida avanzas o a veces vuelves a visitar el capítulo anterior, el marcador cambiaría, ¿verdad Por lo que representa tu posición actual en el libro. Es una información que intentas recordar sobre tu viaje de lectura, ¿verdad? Entonces es una información, ¿verdad? Entonces esa es esta información que está siendo almacenada por cualquier tipo de aplicación web en el mundo react se conoce como estado. Bien. Entonces el estado es como ese marcador del que hablamos o incluso como esta configuración porque es recordar esta información sobre el usuario, ¿verdad? Bookmark también es algo que la aplicación recordaría sobre el usuario en cuanto a dónde ha llegado el usuario. ¿Cuál es el viaje del usuario, verdad? Entonces, para decirlo simplemente estados es una forma de reaccionar como estados en reaccionar. Es una forma de que los componentes de reacción se aferren a cierta información, que puede cambiar a lo largo de un período de tiempo, y hay que recordarla. ¿Todo bien? Recuerda esta definición. Entonces, estados en reaccionar es una forma de componente de reacción se aferre a cierta información, que puede cambiar en un período de tiempo, y necesita ser recordada. ¿Bien? Ahora bien, en esta definición particular, dos cosas son importantes. Así que simplemente cambiaría a la definición de aquí en el bloc de notas, ¿de acuerdo? Y creo que esto es bueno porque también se puede ver la definición. Bien. Entonces hay dos cosas que estaba diciendo, lo cual es importante, ¿de acuerdo? Hay algunas cosas, yo diría, ¿de acuerdo? Entonces una es que la información puede cambiar. ¿Bien? Esto es algo que debes tener en cuenta. La información puede cambiar. Y esta información está siendo retenida como estado en reaccionar, ¿de acuerdo? Y hay que recordarlo. ¿Todo bien? aquí, el ejemplo que di, esto necesita ser recordado, ¿ verdad? A lo largo de mi viaje. Ahora bien, si cambio a aprender pestaña, ahora lo que quiero decir aquí es si cambio a ganar pestaña, esto no cambia al modo blanco. Sigue siendo modo oscuro, ¿verdad? Entonces la aplicación se recuerda que este usuario quiere ver toda la aplicación en el modo oscuro, ¿verdad? Lo mismo va con el marcador. ¿Verdad? La aplicación recordaría que, oye, el usuario ha terminado de leer hasta este punto. Entonces recordará y seguirá recordando. Mañana, si abres la aplicación, la aplicación de lectura o el libro, no es como si el marcador hubiera cambiado a la primera página, ¿verdad? Entonces, al construir aplicaciones interactivas interactivas para el personal, a menudo se encontrará en una situación en ciertas partes de su interfaz deberían cambiar en respuesta a la interacción del usuario. Por ejemplo, un clic de botón, como dije, aquí, un clic de botón está cambiando todo el sitio web, ¿verdad? Y habrá escenarios en los que es posible que también quieras cambiar algunas partes particulares del sitio web, ¿de acuerdo? Como clic de botón, envío de formularios o simplemente pasando el ratón sobre un elemento, bien, pasando el cursor sobre el ¿Bien? Entonces todo eso podría ser manejado con la ayuda del Estado, ¿de acuerdo? Espero que esto quede bastante claro. ¿Bien? Entonces, si recuerdas esta definición de aquí, state in react es una forma para un componente react. Para aferrarse a alguna información que pueda cambiar con el tiempo, y también hay que recordarla. ¿Bien? Esta es una definición realmente buena y la más simple que podría tener para esto. ¿Bien? Ahora, habrá algunas preguntas que podrías tener, ¿de acuerdo? Serás como, Oye, ¿por qué no solo usar variables, bien? Ven aquí. Usted dijo que el estado en reaccionar es una forma de que el componente de reacción se aferre a alguna información que puede cambiar a lo largo de un período de tiempo. Esto también se puede hacer con variables, ¿verdad? Se puede almacenar alguna información en variables, y esa información también puede cambiar, siempre que no se declare como una constante, ¿verdad? Esto es posible con variables. Entonces, ¿por qué tener este nuevo concepto de estado e introducir complejidad innecesaria? Lo que pasa por aquí es que los estados son diferentes al de las variables. ¿Cómo? Te voy a dar una esencia, bien, pero entenderás una imagen completa solo cuando la veas en acción Pero te voy a dar una idea de cómo son diferentes. Entonces el estado en reaccionar, la magia del estado en reaccionar es que cada vez que cambia, react sabe volver a renderizar automáticamente el componente o una parte de él para reflejar esos cambios en la interfaz de usuario. Esa es una magia del estado. ¿Bien? Entonces las actualizaciones, el reflejo de las actualizaciones. Entonces siempre que hagas clic en esto, por ejemplo, aquí, si hago clic en esto, puedes ver toda la página web o esta página en particular se vuelve a renderizar automáticamente. Este componente se vuelve a renderizar automáticamente en función de este clic de botón. ¿Bien? Mañana, podría tener un botón que podría introducir un cambio en ciertas partes de la aplicación. Entonces al hacer clic de ese botón. Estado está cambiando y debido a que el estado está cambiando, esa parte de la aplicación que está renderizar esa parte de la aplicación que está ligada a ese estado . ¿Bien? No estoy seguro de si eres capaz de captar esto, pero la magia radica en la re renderización, lo cual no es posible con variables. ¿Bien? Con variables, hay que manejar todo en reaccionar manualmente. Pero con los estados, todo está cuidado porque es una característica que reaccionar está proporcionando. Y verás esto en breve cuando te dé una demo de esto, ¿de acuerdo? Entonces la magia del estado en reaccionar es cada vez que cambia, react sabe volver a renderizar automáticamente el componente para reflejar los cambios en la interfaz de usuario. ¿Bien? Esto es importante. Ahora bien, otra pregunta que algunos estudiantes podrían tener es esta. Bien, ¿en qué se diferencia de los apoyos o propiedades que pasamos al componente Bien. Ahora bien, me gustaría agregar por aquí que los accesorios, que también se conocen como propiedades son como una configuración o atributo que pasa a componente, ¿de acuerdo? Son de solo lectura, en primer lugar, no se pueden cambiar las propiedades también, ¿verdad? Y solo pasaron en una dirección, como del componente padre al componente hijo, ¿verdad? Entonces los apoyos son diferentes. El caso de uso es diferente. Es como alguna información o configuración o atributos que quizás quieras transmitir a un componente en particular. Son diferentes de los estados, ¿verdad? Así que recuerda esto, un estado en reaccionar es una forma de que un componente se aferre a alguna información, por lo información es una parte importante de esta definición, y esa información puede cambiar en un período de tiempo, y hay que recordarla. Esto es importante. ¿Bien? ¿En qué se diferencia de las variables si te preguntan en una entrevista? Sí, es diferente porque react funciona con componentes react. Los estados trabajan con componentes de reacción. Están vinculados a componentes de reacción, y react sabe cómo volver a renderizar el componente automáticamente si hay algún cambio en el estado. ¿Bien? Esto no es posible con variables, ¿verdad? Y son diferentes a las propiedades, bien, porque son de solo lectura. Las propiedades son de solo lectura, quiero decir, ¿verdad? Y los estados son diferentes. Entonces espero que esto quede bastante claro. Espero haber podido desglosar esto en términos muy simples para ti, ¿de acuerdo? Ganarás mucha más claridad. Cuando empieces a usar estados y cuando veas tu primer programa usando estados de reacción, entenderás lo increíble que es esto, ¿verdad? Entonces espero que esto haya sido útil. 4. Domina el estado en componentes funcionales con Hooks en React: Así que ahora es el momento de que vayamos manos a la mano con el gancho de Estados Unidos por aquí y reaccionemos, ¿de acuerdo? Y para lo mismo, tengo este proyecto en particular creado. Es un proyecto muy sencillo. Bien. Aquí pueden ver este es el código que obtuve generado usando trigo y reaccionar. Y aquí, tengo este componente app. Y este componente de aplicación básicamente está renderizando un encabezado. ¿Bien? Es solo imprimir hola por aquí. ¿Bien? Y esta app se está renderizando aquí en medio punto s, ¿de acuerdo? Hombre punto SX. Quiero decir, ¿bien? Entonces no hay literalmente nada en el componente app, y lo que vamos a hacer es que vamos a aprender cómo se puede hacer uso de estados en reaccionar con la ayuda de ganchos, y vamos a hacer esto con la ayuda construyendo un ejemplo, en realidad, y el ejemplo va a ser un contraejemplo famoso, ¿sabes? Entonces básicamente, este es uno de los mejores ejemplos que siento para aprender sobre los estados porque se puede actualizar el valor del contador. Incrementar decremento y jugar con él. ¿Todo bien? No hablando de la salida, esta es la salida que estás viendo de esta aplicación. Todo bien. Entonces lo que haría es, en primer lugar, ya que estamos queriendo hacer uso del gancho de estado de uso, ¿de acuerdo? Entonces te diré, antes que nada, qué es el estado de uso. Entonces use state es un gancho que nos es proporcionado por react, lo que nos permite agregar estados al componente funcional. Entonces este es un componente funcional, ¿verdad? Componente funcional que significa componentes que se crean con la ayuda de funciones, derecho, en reaccionar. Y si quieres agregar Estado por aquí, queremos exhibir un contador por aquí, ¿verdad? Entonces contador es una información que queremos mostrar. El contador, deberíamos poder incrementar el contador así como decrementar el Entonces deberíamos tener dos botones ahí, ¿verdad? Entonces, para hacer un seguimiento de cuál es el número de contador, para poder realizar un seguimiento de cuál es el número de contador, necesitamos estado. ¿Y cómo agregamos estado a un componente funcional? Nosotros hacemos uso de nosotros estado, ¿verdad? Entonces este es un gancho que nos proporciona reaccionar, y nos facilita la vida al usar características como estado en componentes funcionales. Todo bien. Ahora, voy a venir aquí. ¿Cómo se hace uso de esto? ¿Bien? Entonces voy a decir importar, y voy a decir por aquí, usa estado, algo así. ¿Bien? Y se puede ver auto poblado nosotros estado de reaccionar. Todo bien. Entonces lo que esto está haciendo es que estamos importando use state Hook del módulo react. Ahora el módulo react tiene este nombre export, que podemos importar, ¿verdad? Y vamos a estar haciendo uso de esto por aquí. ¿Bien? Ahora, por aquí, dentro de app, lo que voy a hacer es voy a definir un estado, que se va a llamar como conteo. ¿Bien? Entonces voy a decir const, y primero te mostraré la sintaxis, y luego te explicaré qué significa la sintaxis y qué está pasando detrás de escena. Todo bien. Así que voy a decir contar, y voy a tener establecido el conteo por aquí y voy a hacer uso del estado de uso por aquí. Algo así. Y voy a pasar una discusión por aquí, que es cero, y voy a terminar esto con punto y coma ¿Bien? Por lo que hemos agregado un estado a nuestra aplicación. A este estado se le llama como conteo, ¿verdad? Y esta es una función que nos ayuda a actualizar este estado en particular. ¿Bien? Entonces ahora estamos haciendo uso del estado de uso por aquí para crear un estado. Ahora bien, lo que sucede es que cada vez que estás usando use state, esta es una función incorporada que devuelve una matriz con dos elementos ¿Bien? Devuelve array con dos elementos. El primer ítem es el propio estado estatal. Y el segundo ítem es una función para actualizar ese estado en particular. ¿Bien? Entonces devolvió dos elementos, y lo que hicimos es que hicimos uso de la desestructuración por aquí, desestructuración de matrices porque esto está regresando en forma de Entonces hicimos uso de la desestructuración de matrices, y obtuvimos el nombre del estado, como el estado como conteo y la función como set count, ¿verdad Así es como funciona el estado, ¿de acuerdo? Recuerde, es devolver el estado y una función para actualizar ese estado en particular. Todo bien. Entonces esto es algo que tenemos para contar. Me preguntarás, ¿qué es este cero de aquí? ¿Bien? Entonces cero no es más que el valor actual o el valor inicial con el que quieres que se inicialice el estado Entonces, cuando se cree este conteo, su valor inicial será cero. ¿Bien? Entonces espero que esto quede claro en cuanto a lo que está haciendo esta línea. Bien, para decirlo simplemente estamos creando un estado por aquí, y cada vez que creamos un estado en react, hacemos uso de use state hook como este, en donde puedes pasar cualquier tipo de valor predeterminado o inicial que quieras tener, ¿bien? Y use state devuelve una matriz, que consta de dos cosas. Uno es el propio estado, y otro es la función de actualizar ese estado. ¿Bien? Así que tenemos tanto el estado como la función en estas dos cosas por aquí usando el concepto de estructuración RAD. ¿Todo bien? Espero que esto quede claro en cuanto a lo que estamos haciendo. Ahora lo que haría es aquí, en vez de decir hola, diría valor de contador, ¿de acuerdo? Diré valor de contador. Y ahora este estado es como una variable JavaScript, ¿verdad? Así puedo hacer uso de esta sintaxis y puedo mostrar el conteo por aquí. Ahora, en el momento en que guarde esto y si vengo por aquí, verán que el valor del contador es cero. ¿Bien? Si haces cinco por aquí. Y si guardo esto, verás que el valor del contador es cinco. Entonces estamos viendo el valor inicial como cero y cinco. Entonces me quedaré a cero. Si quieres que el contador empiece desde cinco, puedes tener cinco como valor inicial aquí. Todo bien. Esto está hecho. Ahora, ¿cómo actualizamos el estado? Entonces tienes esta función set count que puedes hacer uso de para actualizar el estado. Todo bien. Entonces lo que haría es que tendría un botón por aquí. Por supuesto, activaríamos actualizaciones usando este botón. Bien. Y voy a llamar a este botón como incremento. Y voy a tener un botón más por aquí y voy a llamar a este botón como decremento por aquí, ¿de acuerdo? Primero trabajaremos en incremento y veremos cómo podemos incrementar el valor de un contador ¿Bien? Entonces voy a decir al click por aquí. Esto es al hacer clic. Y aquí, necesito activar el conteo de conjuntos, ¿verdad? Entonces set count aceptará un parámetro, que es el valor de conteo actualizado. Entonces lo que haría es que tendría una función de flecha por aquí, y diré set count, algo así, y diría el valor actual de count más uno. ¿Bien? Eso es con lo que quiero inicializarlo, ¿verdad Y voy a venir aquí. Se pueden ver estos dos botones, decremento de incremento, se puede Y se puede ver que acabamos de incrementar el conteo por aquí, ¿no? ¿Hemos hecho algo más? Acabamos de incrementar el conteo, y simplemente incrementando el conteo, el componente se está volviendo a renderizar y usted está viendo el valor actualizado del conteo que se muestra aquí Bien. Hagamos lo mismo para decremento también Entonces, si haces clic en decremento, no pasará nada por ahora. Pero lo que puedes hacer es que puedes copiar esto por aquí y puedes remontar esto y en vez de incrementar, diré menos uno. Y voy a guardar esto. Y si vienes por aquí, ahora puedes decrementarlo así, incrementarlo así, y puedes ver que tienes un contador muy bonito en acción Y mira la cantidad de código que has escrito. Apenas has escrito pocas líneas de código, ¿verdad? Hay una línea, y estas son las dos líneas, como tres líneas, básicamente, ¿verdad? Esto es lo que has hecho, ¿verdad? Y reaccionar es hacer tanto internamente. ¿Bien? Entonces déjame decirte, cada vez que estés actualizando el conteo por aquí, react está volviendo a renderizar el componente porque sabe que el valor de este estado ha cambiado y este estado está asociado con este componente en particular. Lo que está haciendo es que está activando un re render y con la ayuda del re render, el componente se está volviendo a renderizar y está viendo que se muestra el valor actualizado Esto es mucho más eficiente que renderizar toda la página. ¿Bien? Es solo actualizar ciertas partes de la aplicación desde el punto de vista de la eficiencia Todo bien. Entonces esta es una muy buena esta es una muy buena característica de react use State Hook, Okay, que estamos usando activamente en este momento. ¿Bien? Incluso podemos descomponer esto. Bien, entonces ahora mismo lo que estamos haciendo es que en realidad estamos teniendo la lógica por aquí con la ayuda de la función anónima. Bien. Lo que puedes hacer es solo en aras de la simplicidad, puedes tener un conteo constante de incrementos por aquí, bien, algo como esto Entonces esta es una función que estoy creando. Bien. Y por aquí, bien, lo siento. Entonces lo que puedes hacer es aquí, incremento Ups. Entonces será una función de flecha, y lo que puedes hacer es decir que set count es igual a contar más uno. ¿Bien? Y puedes tener set count es igual a contar más uno, terminarlo con punto y coma y terminar esto bien, terminar esto también con punto y coma, Y voy a tener esto por aquí. Diré conteo de incrementos. Bien. Entonces eso es lo que estamos haciendo. Estamos manteniendo ahora estamos definiendo funciones separadas por aquí. Puedo decir decremento, decremento, contar por aquí, y esto puede ser negativo Vaya, negativo ¿Bien? Y de la misma manera, esto será decremento. Así. ¿Bien? Y puedes incrementar el valor, puedes decrementar el valor, ¿ de acuerdo Y puedes incrementar o decrementar de la manera que quieras, ¿ Entonces esto es algo que es posible por aquí. ¿Bien? Entonces sí, espero que esto haya quedado claro en cuanto a cómo puedes hacer uso del gancho de estado de uso para agregar estados a tus componentes de reacción. Bien. Lo que hemos hecho aquí como un recapitulación, hemos agregado un estado de conteo para el cual usamos use state hook, y este use state hook devolvió el estado, así como la función para actualizar el estado Y conseguimos estos dos usando el concepto de estructuración RAD, ¿verdad? Por aquí, tenemos este valor inicial definido como cero para el estado, ¿de acuerdo? Y tenemos dos botones. Usando el cual estamos modificando el valor del estado. Y cada vez que estamos modificando el valor del estado, lo que está sucediendo, componente se vuelve a renderizar y el conteo se actualiza automáticamente. ¿Bien? Entonces espero que esto sea bastante claro y espero que tengan un buen entendimiento de qué son los estados y cómo se puede hacer uso de los estados en reaccionar. ¿Bien? Ahora, una cosa que me gustaría decirte es esta cosa de aquí, ¿de acuerdo? Existe esta pregunta que normalmente tienen los alumnos. ¿Por qué no usar variables en lugar de estados? ¿Bien? Entonces me gustaría mencionar la magia del estado en reaccionar es cada vez que cambia, ¿de acuerdo? Así que imagina manejar todo esto usando variables. Imagínese tener una variable de conteo y no hacer uso del gancho de estado por aquí. ¿Bien? Tendrías que volver a renderizar o actualizar el manual del componente. Bien, lo cual no es bueno. Aquí reacciona sabe automáticamente que hay que volver a renderizar el componente para reflejar los cambios en la interfaz. Y esto es realmente, realmente beneficioso y útil si tu aplicación crece a lo grande, ¿verdad? Si tu aplicación crece a lo grande, estás haciendo uso de múltiples variables de estado, estás administrando muchas cosas. En ese caso, esto se vuelve realmente, muy útil. ¿Bien? Y es diferente a los apoyos porque no se pueden modificar los apoyos en los componentes hijos Son de solo lectura, y estados es algo diferente que le permite tener un mejor control y mejor gestión en comparación con las variables así como los apoyos ¿Todo bien? Espero que esto haya sido útil y espero que hayan podido seguirlo. 5. Manejo de variables de estado múltiples sin esfuerzo: Entonces en este momento tenemos esta aplicación que está teniendo dos botones, incremento y decremento y estamos haciendo uso del uso state hook para incrementar y decrementar y administrar un estado para Estamos haciendo uso del componente funcional por aquí. Ahora, lo que pasa por aquí es que solo tenemos un estado. Ahora, cuando estás trabajando con componentes funcionales de reacción, gracias al gancho de estado de uso, no estás limitado a una sola variable de estado. Puedes declarar tantas variables de estado como necesites. Ahora, cuando los valores de estado no están relacionados, habrá escenarios en los que desea realizar un seguimiento de múltiples elementos de información Como, por ejemplo, aquí estamos haciendo un seguimiento del conteo, ¿de acuerdo? Ahora, es posible que desee realizar un seguimiento de un valor más, y cuando estos valores no están relacionados, tiene sentido mantenerlos en variables de estado separadas Y esto puede ayudarte a hacer que tu código sea más limpio agrupando datos relacionados y separando los datos no relacionados. ¿Todo bien? Ahora, veamos cómo podemos agregar un estado más en este ejemplo de aquí. Entonces aquí, simplemente estamos incrementando el conteo en uno y decrementando también Ahora, digamos que deseo tener una personalización quiero darte una personalización a mis usuarios donde el usuario pueda decirme si quiero aumentar el conteo en uno o cualquier valor. ¿Bien? Entonces lo que voy a hacer es, voy a añadir un estado más por aquí. Voy a llamar a este estado como paso. Bien. Y este paso definirá el incremento y decremento debe ser por cuánto ¿Bien? Entonces lo que voy a hacer es que vamos a replicar esta sintaxis similar ¿Bien? Vamos a decir usar estado, bien, por aquí, y Ups Y por aquí, voy a llamar a esto como paso, y voy a llamar a esto un paso fijo, algo así. ¿Bien? Y el valor por defecto que voy a tener es uno, ¿de acuerdo? Porque el valor predeterminado de incremento y decremento que quiero tener o quiero dar a los usuarios es Bien. Ahora esto está hecho. Ahora estamos aquí. Lo que voy a hacer es que voy a tener una entrada por aquí. Bien. Entonces digamos aquí. Déjame regresar y voy a decir entrada. Entonces voy a agregar esto justo antes del incremento y decremento por aquí, justo después de H ¿Bien? Entonces voy a decir entrada por aquí, algo así. Bien. Y para entrada, bien, voy a tener la etiqueta de cierre automático. No necesito esto por aquí. Y por aquí, puedo decir tipo. Tipo es lo que es un tipo por aquí. Entonces estamos trabajando con números. Entonces voy a decir número por aquí. Bien. Y también diré valor. Ahora, ¿cuál es el valor de esta entrada en particular? Entonces necesito vincular esto a la variable de estado. Entonces voy a decir que paso por aquí. Bien. Iré a la siguiente línea y voy a decir sobre el cambio. Entonces básicamente, si el usuario cambia algo en este cuadro de entrada en particular , estoy permitiendo cambios, derecho así en cambio, deseo deseo actualizar el estado, ¿verdad? Eso es lo que haremos. Entonces voy a decir sobre el cambio, y por aquí, voy a tener una función. Voy a decir E, o hacer uso de las funciones de flecha, y voy a decir establecer paso por aquí, Bien voy a pasar en E punto valor de punto objetivo. Otra cosa de aquí es que este valor va a pasar como una cadena, ¿verdad? Entonces puedo decir analizar por aquí y puedo concluir esto completamente en el par enviado. Bien, entonces lo que está pasando es que estamos diciendo et target dot value. Entonces, básicamente, este es el elemento, y estamos diciendo que estamos obteniendo el valor de este elemento, y lo estamos pasando para establecer paso. ¿Qué es lo que se establece un paso por aquí? Establecer paso es la función que se encarga de actualizar este estado, y se le está llamando al cambio. Por lo que cualquier cambio en este cuadro de entrada se reflejará en el estado. ¿Bien? Ahora está encuadernado, ¿verdad? Ahora, al incrementar y decrementar, necesito hacer uso del paso Ese es un cambio que necesito hacer. Bien. Ahora probemos cómo se ve nuestra aplicación. Se puede ver que el impago es uno, puedo incrementar decremento aquí. Si hago default como diez, y si empiezo a incrementar, verás nueve, 19, 29, 39, y también puedo decrementar. Si digo cinco por aquí, puedo ver por aquí, se está actualizando en consecuencia. Entonces dependiendo de cuál sea el valor que estoy cambiando por aquí, está reflejando el cambio. Se puede ver. Entonces aquí, en este ejemplo, estamos haciendo uso de dos variables de estado, yo diría, una es conteo, otra es paso usando paso por el cual queremos incrementar el conteo ¿Verdad? Entonces sí, tener múltiples variables de estado en un solo componente de reacción es absolutamente posible. Puede usar varios estados para realizar un seguimiento de la información no relacionada de la que tal vez desee realizar un seguimiento dentro de un componente en particular ¿Bien? Incluso puedes embellecer esto si quieres Entonces aquí, esta aplicación no se ve tan bien. No estamos impresionados, ¿verdad? Entonces lo que puedes hacer es aquí, puedes venir y yo voy a añadir algunos CSS por aquí. Bien. Entonces por aquí, por ejemplo, voy a decir para caja de entrada, ¿de acuerdo? Diré entrada por aquí. Para entrada, diré ancho de 50 píxeles. Bien. Y voy a decir emparejamiento de cinco pixeles, ¿bien? Algo así, y voy a decir margen por aquí, margen de diez pixeles. Bien, botella. Vamos a añadir una botella. Voy a decir un píxel sólido y voy a añadir el código de color como tiene C y radio Bien, para un radio de cuatro píxeles, algo así. Veamos cómo se ve nuestra entrada. entrada se ve decente. Se puede ver. Bien. Y también podemos agregar un poco de CSS a los botones. Los botones que tenemos, se ven bastante crudos, ¿verdad? Botones bonitos rah mil. Para que podamos tener relleno. Puedo ver relleno de cinco píxeles por aquí y diez píxeles por aquí, ¿de acuerdo? Y se puede ver margen de perdón, cinco píxeles. Bien. Botel no puedo decir ninguno. Todo bien. Y puedo decir radio. Puedo decir radio de digamos cuatro píxeles probablemente similar al de la entrada. Y puedo agregar un color de fondo, color fondo de hash 007b, FFI tienen E, código de color por aquí Incluso puedes agregar un azul claro por aquí si lo deseas, para que las cosas sean simples. Así que voy a decir azul claro, o simplemente decir azul por aquí. Azul, ¿verdad? Y se puede ver el color como, por supuesto, el blanco. Entonces esto es para texto. Y entonces puedes tener Coso Cursor puede ser puntero, ¿bien? Y entonces puedes tener efecto botón, colon hover. Bien. Entonces, ¿cuál es el efecto hover para esto Ho es la actualización del color de fondo será azul oscuro. Bien. Entonces esto está hecho y veamos si esto y veamos cómo se ve esto. Bien, esto se ve bastante decente, yo diría, Bien, mejor que la versión anterior, puedes ver, es un CSS decente. Puedes agregar, uh mucho más por aquí, bien, si lo deseas. Bien. Entonces en la parte superior aquí, tengo este contenedor de aplicaciones. Tengo margen. Se puede tener margen, digamos, de 20 píxeles. Bien. Entonces he agregado margen de 20 píxeles, y esto se ve decente. Bien. Entonces creo que la app se ve decente en este momento, ¿verdad? Y puedes mejorar aún más el CSS si así lo deseas. Bien. Pero como estamos aprendiendo, creo que eso está absolutamente bien. Somos capaces de ver el funcionamiento de la funcionalidad y cómo los conceptos de reacción están cobrando vida. Todo bien. Entonces espero que esto haya sido útil y espero que te hayas divertido. 6. La naturaleza asíncrona de React: lo que necesitas saber: Entonces ahora es el momento de que hablemos de actualizaciones estatales. Ahora tenemos esta aplicación de contador donde podemos incrementar o disminuir el contador en función de los clics de botón . ¿Todo bien? Ahora, siempre que estés realizando actualizaciones de estado, necesitas recordar un par de cosas. Lo primero importante es que las actualizaciones de estado son de naturaleza asincrónica, lo que significa que no están sincronizadas Y lo que hace react es que agrupa múltiples actualizaciones de estado juntas. ¿Bien? Ahora, siempre que esté haciendo múltiples actualizaciones de estado, se supone que debe hacer uso de un updat o función Ahora te preguntarás ¿qué es una función updata? Por lo tanto, la función updata es una función de flecha o una función simple que se pasa para pasar al actualizar el estado de una variable en particular o un componente en particular en react ¿Bien? Ahora, déjenme darles un ejemplo para esto. ¿Todo bien? Ahora, digamos que tenemos este conteo de incrementos, bien, puedo incrementarlo en uno o cualquiera que sea el paso ¿Bien? Ahora bien, lo que haría es dejarme agregar un patrón más por aquí, ¿de acuerdo? Entonces voy a añadir un botón más. Bien. Y voy a decir incremento o déjame agregar más dos por aquí. Cosa como esta. Bien. Entonces lo que esto va a hacer es que incremente dos veces, ¿de acuerdo? Y voy a decir incremento dos veces por aquí. Todo bien. Esta función no existe. Entonces lo que vamos a hacer es que vendremos aquí para incrementar el conteo, y voy a duplicar esto y voy a decir incremento Dos veces, algo así. ¿Bien? Ahora bien, lo que quiero hacer es incrementar esto dos veces Así que he incrementado esto una vez, y voy a incrementar esto dos veces por aquí ¿Bien? Si vengo por aquí, verás este botón. Ahora, idealmente al hacer clic en este botón, el valor del contador debería incrementarse dos veces Entonces a partir de cinco, si son cinco, debería convertirse en siete. Si es cero, debería convertirse en dos. ¿Por qué? Porque estoy actualizando el estado dos veces, ¿verdad? Ahora, déjame mostrarte un ejemplo o déjame mostrarte una demostración de esto, ¿de acuerdo? He guardado el archivo y si hago más dos, verás que está incrementando en solo uno. ¿Bien? Déjame hacer una actualización de cero, será uno, dos, tres, y así sucesivamente. ¿Bien? No lo está incrementando en dos Y la razón de esto es las actualizaciones de estado son asincrónicas, Por lo que agrupa múltiples actualizaciones de estado juntas. Ahora lo que está pasando está por aquí, escribiendo este set count o count más uno. Es equivalente a tener cero más uno por aquí y cero más uno por aquí. Es equivalente a esto. Por qué es equivalente a esto porque el valor inicial de estado es cero. Si el valor inicial es uno, entonces es equivalente a escribir uno más uno y uno más uno. El valor anterior. Entonces básicamente, estás actualizando el conteo de aquí a dos, ¿verdad? Por lo que esto no se está tomando en consideración a la hora de ejecutar esta segunda línea. Se toma en consideración el estado inicial del conteo. Y la razón de esto es porque es asíncrono y las múltiples actualizaciones se parchean juntas Entonces yo solo haré el control C. Bien. Entonces esto no va a funcionar, bien. Entonces lo que voy a hacer es hacer uso de una función updata. ¿Bien? Entonces necesitamos hacer uso de una actualización o función para múltiples actualizaciones de estado. Entonces solo voy a comentar esto, así. Bien. Voy a repartir esto por aquí. Ahora, para hacer uso de la función updata, haremos uso de una función de flecha muy simple por aquí que nos va a ayudar a realizar la actualización ¿Bien? Entonces aquí, voy a decir conteo o conteo previo por aquí como esto, algo así. Y voy a tener esto por aquí. Ahora, recuento anterior por aquí, esta variable en particular está teniendo el valor del valor anterior de conteo. ¿Bien? Así que voy a tomar esto por aquí y esto vendrá por aquí, algo como esto. Bien. Y ahora veamos la salida. Ahora bien, si me refresco, si hago más dos más dos más dos, pueden ver, ya se está incrementando dos veces ¿Correcto? Entonces esto está funcionando bien. Y el cambio que hicimos es que ahora estamos haciendo uso de esta función de flecha por aquí, bien, que es simplemente hacer el trabajo de tomar el valor anterior de conteo e incrementarlo en uno Ahora bien, esto es solo una convención por aquí donde he hecho uso de esta variable llamada PIV count Normalmente, es una convención. Normalmente, verías si lees código en línea, verás cualquiera que sea la variable de estado. La primera letra se convierte en mayúscula, como C es mayúscula por aquí, y PIV se agrega debajo o antes del nombre del estado de aquí, lo que indica que es un valor anterior ¿Bien? También puedes hacer uso de C y C por aquí, C y C. La salida no va a cambiar. ¿Bien? Entonces eso es sólo una convención. Si hago una actualización, y si lo vuelvo a jugar, pueden ver, se está incrementando dos veces por aquí Así que siempre que quiera hacer múltiples actualizaciones de estado juntos, bien, lo mejor es hacer uso de este tipo de sintaxis en la que estamos haciendo uso de una actualización o función. ¿Bien? Aquí, lo que está sucediendo es que el valor previo del estado se toma en C, y se incrementa en uno Y luego para la siguiente llamada, el valor anterior, que es la actualización como la después de que se actualice el conteo a partir de este código en particular de aquí, que se pasa por aquí, y luego se incrementa en uno Entonces no serás como ningún bicho si estás haciendo las cosas de esta manera. ¿Bien? Es un problema muy común donde los desarrolladores hacen las cosas de esta manera y son como, Oye, hay alguna inconsistencia en mi código, y no estoy viendo el resultado deseado Y la razón de esto es simple debido a la naturaleza asíncrona de las actualizaciones, ¿de acuerdo? Entonces Actualizar una función es útil en este caso en particular. Aquí, en este caso particular, si estás escribiendo código de esta manera, las actualizaciones se ponen en cola ¿Bien? Entonces se realiza esta primera, y luego se pone en cola la siguiente Y luego una vez que termina el primero, éste se ejecuta, y hasta entonces está en la cola. ¿Bien? Entonces así es como pueden agrupar por lotes o hacer múltiples actualizaciones juntos. Recuerde, las actualizaciones de estado en react para componentes son de naturaleza asíncrona y necesita hacer uso de funciones updata para múltiples Ahora qué funciones updata, como dije, es una simple flecha funciones que estás pasando A la función actualizador por aquí. Entonces esta es la función que se está utilizando para actualizar el estado. ¿Bien? Y estás pasando aquí la función updater para actualizar el valor Todo bien. Entonces espero que esto haya sido útil y espero que hayan podido seguirlo. 7. Navega por matrices y objetos en la gestión de estados en React: Oye, ahí. Entonces en este video, vamos a construir una aplicación que nos va a ayudar a administrar múltiples contadores, ¿verdad? Entonces cuando digo que nos está ayudando a administrar múltiples contadores, puedes agregar contadores sobre la marcha a la página. Incluso puedes incrementar contadores separados individualmente, ¿de acuerdo? Entonces déjame mostrarte. Tengo este mostrador por aquí, ¿de acuerdo? Y puedo incrementarlo uno, dos, tres, cuatro. Este es el contador uno. Bien, puedo agregar un contador de la manera que me guste. He añadido cinco contadores por aquí. Puedo incrementar el uno dependiendo de mi elección. Y puedes ver que cada contador tiene su propio conteo por aquí, ¿de acuerdo? No se superpone de ninguna manera, y tiene su propio botón que está escuchando el evento. Y siempre que estés haciendo clic en este botón en particular, el estado correspondiente a ese contador en particular, o se incrementa el recuento correspondiente a ese contador en particular y no los demás ¿Bien? Y puedes agregar tantos contadores como quieras dependiendo de tu necesidad, bien, el tiempo que quieras. Todo bien. Incluso puedes mejorar esta aplicación para agregar un botón de decremento para agregar un paso por aquí, ¿de acuerdo? Entonces con paso, puedes tomar un número, que decidirá si debe incrementarse en uno o qué número incrementará Pi. ¿Bien? Entonces puedes hacer eso, e incluso puedes agregar un botón para eliminar el contador. Entonces, si quieres eliminar un contador específico, puedes seleccionarlo y eliminarlo. Entonces esas son las mejoras que se pueden hacer, bien. Pero ahora mismo, esto es lo que va a ser el ejemplo. Es una lista de múltiples contadores juntos. Con su propio conteo que se está mostrando y su propio patrón de incremento, que puede ayudarnos a incrementar el conteo del contador respectivo ¿Todo bien? ¿Listos? Así que vamos a saltar de inmediato. Entonces aquí, estoy en la aplicación, y tengo este archivo app dot JSX, donde tengo un par de importaciones en la parte superior, y tengo esta función o un componente funcional que se está creando con export, y simplemente está mostrando hola ahora mismo, ¿verdad? Y puedes ver hola como la salida por aquí. ¿Bien? Ahora bien, el punto que quiero demostrar aquí en este video es el punto del que voy a hablar es que se pueden almacenar objetos arrays e incluso estructuras de datos más complejas en un estado. ¿Bien? Entonces el estado simplemente no se limita a una variable normal. No es como si pudieras almacenar un solo valor en un estado, sino que puedes tener cosas complejas como matrices, objetos e incluso más. ¿Bien? Y a eso se va a dirigir este ejemplo, ¿de acuerdo? Entonces, si le echas un vistazo a la aplicación que vamos a pild, bien, necesitamos una lista de contadores, ¿verdad Entonces con in app, lo que vamos a hacer es que voy a crear un estado por aquí. Bien. Entonces voy a decir const. Bien. Y en vez de contador, voy a decir contadores por aquí, algo como esto, y voy a decir “set counters” por aquí. Bien. Y voy a decir usa Estado por aquí. Bien. Y necesitamos un bloque de inicialización por aquí, ¿no? Entonces inicializaré esto a default y default será esto por aquí. ¿Bien? Entonces voy a decir ID, e ID será uno, y voy a decir valor y valor es cero. ¿Bien? Entonces esta variable o este estado esencialmente está teniendo la lista de todos los contadores en forma de matriz, y cada contador de aquí es un par de valores clave. Se puede ver que este es un contador, bien, que es tener su propio ID y su propio valor. ¿Bien? Entonces este es el contador uno, y es un objeto para el contador uno, y estás teniendo una matriz de contadores por aquí. Se puede decir, esto es contener una matriz de contadores y un solo contador no es más que un objeto, que está teniendo ID y valor como su atributo. ¿Bien? Entonces así es como se va a mantener por aquí. Voy a llevar esto a nuevas líneas para que sea visible en una sola pantalla por aquí. ¿Bien? Entonces esto está claro, bien por qué estamos teniendo este tipo de cosas. ¿Bien? Ahora bien, lo siguiente que quiero agregar aquí es una función, ¿de acuerdo? Diré const, agregue contadores por aquí. Bien. Y esta es una función que nos ayudará a agregar nuevos contadores a la interfaz, ¿verdad? Entonces es una función de flecha, y por aquí, voy a agregar un punto y coma, y voy a tener la lógica por aquí Ahora, para sumar los contadores, lo que tenemos que hacer es, ¿de acuerdo? Así que déjame tomar esta matriz. Entonces esta es la matriz. Bien. Déjeme tomar esto en una línea. Este es el mostrador, ¿verdad? Ahora para agregarle un contador más, lo que necesito hacer es, necesito llevarme todo esto. ¿Bien? Necesito decir coma y necesito agregar esto por aquí con la identificación también. ¿Correcto? Así es como voy a añadir un contador más. Si necesito agregar uno más, lo que haré es decir coma, agregaré lo mismo, y convertiré esto a tres, ¿verdad Entonces así es como estoy agregando contadores, ¿verdad? Ahora bien, ¿cómo puedo implementar esta lógica por aquí, verdad? Entonces lo que necesito hacer es que primero necesito la lista de todos los objetos actuales que existen, ¿de acuerdo? Y necesito agregar un objeto más al final cuyo ID se incrementa en . Repito. Entonces la lógica de aquí que necesito implementar es tener la lista de todos los objetos actuales que existen para el contador, en la matriz, y luego agregar un objeto más al final cuyo ID se incrementa en uno Ya ves, ¿cómo haríamos esto? Así que voy a deshacerme de esto por aquí. Bien, esta cosa. Y lo que tengo que hacer es, tengo que llamar a set counter primero porque necesitamos actualizar esto por aquí, ¿verdad? Entonces voy a decir tres puntos. Haré uso de este operador de spread. Diré mostradores por aquí. ¿Bien? Entonces esparciré el valor existente de los contadores por aquí. ¿Bien? Lo siento, esto tiene que estar en es una llamada de función, ¿verdad? Por aquí. Bien. Entonces primero, extenderé el valor existente de los contadores, y luego diré ID, dos puntos, diré contadores punto Longitud más uno por aquí. Y voy a decir valor cero. Entonces esta sería mi lógica básicamente para agregar nuevos contadores. Espero que esto tenga sentido por aquí. ¿Bien? Entonces lo que estamos haciendo es que hemos creado una nueva función de flecha llamada add counters, ¿verdad? Y estamos llamando a los contadores establecidos. ¿Por qué estamos llamando a los contadores fijos? Porque es la función de actualización de estado para contadores, ¿verdad? Ahora bien, ¿cómo actualizamos el estado? ¿Con qué valor lo estamos actualizando? Entonces, sea cual sea lo que exista así que necesitamos agregar una matriz. ¿Bien? Necesitamos agregar actualizar la matriz existente con una nueva matriz. ¿Bien? Necesitamos actualizar la matriz existente que está sosteniendo. Entonces esta es la matriz existente, derecho, que está sosteniendo. Es tener un objeto. Lo que tenemos que hacer es hacer que el operador de spread sea el operador y obtener todos los contadores repartidos por aquí. ¿Bien? Y luego tenemos que agregar uno más al final. Tenemos que decir ID es contadores de longitud de punto más uno y el valor es cero. Bien. En el momento en que hacemos esto, se agrega a la lista existente, y ahora los contadores van a tener dos contadores por aquí, uno con ID uno, y otro con ID dos. Y entonces si vuelves a llamar a los mostradores, lo que va a hacer es que va a extenderse tanto por aquí y va a sumar el tercero y así sucesivamente. ¿Bien? Entonces espero que esta lógica sea bastante clara. Estamos haciendo uso del operador spread por aquí y estamos creando una nueva matriz que se está reemplazando la existente para contadores Ar? Entonces esto se hace en el mostrador. Ahora, lo que tenemos que hacer es que tenemos que venir aquí. Y necesito agregar un botón. Necesito actualizar la Y aquí. Diré botón. Diré al click. ¿Qué debo llamar al hacer clic? Voy a llamar a agregar conteo por aquí, y voy a decir, es plural, así que voy a decir agregar conteo por aquí. Bien, así y voy a decir en el mostrador, algo así. Bien. Y voy a cerrar este botón de aquí. Bien. Y también necesitamos exhibir el mostrador, ¿verdad? ¿Cómo mostramos? Así que lo mostraremos como una lista desordenada, una simple lista desordenada usando estas etiquetas HTML ¿Bien? Y voy a decir contadores mapa de puntos. Entonces estamos haciendo uso del mapa por aquí. Bien. Y aquí, necesito decir contador. Bien, entonces por cada elemento en los contadores, estoy diciendo contador, esto es estoy aceptando esto como un parámetro y estoy teniendo esto básicamente, estoy teniendo esta función de flecha por aquí. ¿Bien? Y lo que haría aquí es que crearía una lista por aquí. Bien, algo como esto. Entonces Ali y yo crearemos una lista. Bien. Ahora lo que va a tener esta lista, va a tener una llave. Por supuesto, necesitamos agregar clave para que el renderizado esté optimizado. Por lo que tendrá un ID único, que es el ID de punto de contador. Bien. Y aquí, necesito mostrar el contador, y podemos mostrar el contador de ID de punto. Necesito tener una interfaz de usuario, que diga, Bien, entonces la interfaz de usuario que necesito mostrar es el contador uno, dos puntos de valor, y luego tiene un botón aquí. Bien. Entonces tiene un botón. ¡Uy! Entonces por aquí, hay un botón. Esta es la interfaz de usuario que quiero tener, ¿verdad? Entonces tengo contador, y uno no es más que el ID, contador ID. Voy a añadir dos puntos por aquí. ¿Bien? Diré el valor del punto del contador. Bien. Quiero mostrar el valor porque cero es el valor. Y entonces necesito tener un botón. ¿Bien? Entonces voy a añadir un botón. Lo llevaré a la nueva línea, y voy a decir botón. Bien. Y al hacer clic, tiene que haber un evento on click. Todo bien. Y al hacer clic. Bien, algo así. Necesito vincularlo a una función. ¿Bien? Será una función de contador de incremento que aún no existe. Bien, entonces voy a tener algo vacío por aquí. Yo sólo voy a mantener esto vacío. ¿Bien? Y aquí, voy a decir incremento incremento. Eso es. Todo bien. Y necesito deshacerme de este texto de aquí. Esto es solo para fines explicativos. Voy a guardar esto y vamos a ver la interfaz de usuario. ¿Podemos verlo? Sí. ¿Podemos agregar el contador? Intentémoslo. ¿ Verás? Impresionante, ¿verdad? El incremento no va a funcionar porque no hemos creado esa función Estamos llamando a una cosa vacía por aquí, ¿verdad? Entonces, cómo está funcionando esto, cómo está funcionando el contador de agregar. Primero, estamos manteniendo el contador de esta manera. ¿Bien? Entonces, si esto no está claro, déjeme explicarle, de una manera más clara. Bien. Voy a dar cada paso por aquí para asegurarme de que entiendas. ¿Bien? Así que aquí es cuando el contador es uno, ¿de acuerdo? Contador. El conteo es uno. Bien. Cuando el conteo del contador es dos, bien. Contador dos. Lo que sucederá es cuando añades un contador, esto también se actualiza. Entonces esto se actualiza a esta cosa. Bien. Es uno más. Este es el ID dos. ¿Bien? Cuando el contador se convierte en tres, hay tres contadores, ¿de acuerdo? O 1 segundo. Déjenme decir cuando un contador. Bien. Yo sólo voy a copiar esto cuando dos contador y cuando tres cuentan. Entonces este es el contador de dos, y esto es de tres cómputos. ¿Bien? Ahora, cuando hay tres contadores, lo que haces es agregar el tercer elemento por aquí. Este es el tercer mostrador de aquí. Así es como se están gestionando los contadores. ¿Bien? Espero que esto tenga sentido. Entonces esto es cuando sólo hay un contador. Bien, entonces se representa el contador. Entonces contador puede ser representado por dos cosas. Uno es el ID del contador y otra cosa es el valor. ¿Bien? Entonces inicialmente tenemos un contador con ID uno y valor cero. Eso es con lo que lo hemos inicializado, ¿verdad? Y lo que estamos haciendo es que lo estamos renderizando, cómo estamos entrando en él. Entonces, si te desplazas hacia abajo por aquí, ¿de acuerdo? Estamos diciendo para cada contador, hacer uso del método map por aquí porque estamos haciendo uso de map por aquí porque esto se está almacenando en una matriz. Es una variedad de objetos, ¿verdad? Cada contador está representado de esta manera, ¿verdad? Contador se representa de esta manera. Y para representar múltiples contadores, estamos creando una matriz, ¿verdad? Esta es una matriz. Se puede ver que se están agregando los elementos. ¿Bien? Cuando tres contadores son tres contadores se agregan, se puede ver que hay tres elementos, ¿verdad? Entonces estamos diciendo contadores mapa de puntos. ¿Bien? Para cada contador, necesitamos mostrar el ID del contador. Lo sentimos, no estamos mostrando el ID del contador, pero lo estamos agregando a la clave, y estamos mostrando el ID del contador así. Bien, estamos viendo el contador uno y estamos teniendo el valor que se está mostrando. Y al hacer clic, necesitamos realizar el incremento, lo cual no estamos haciendo ahora mismo ¿Bien? Y cuando decimos añadir así cuando hacemos clic en este botón, añadir contador por aquí. Lo que está sucediendo es que se está llamando a esta función. Lo que esta función está haciendo es agregar un elemento en esta matriz. Puedes ver por aquí, está agregando este elemento en la matriz, pero es asegurarse de que el ID se incremente en uno ¿Bien? Entonces, ¿cómo es agregar un elemento en la matriz? Se está difundiendo los elementos existentes. Se trata de crear un nuevo elemento, nueva matriz mediante la difusión del elemento existente y la adición de un nuevo elemento al final Entonces, ¿cómo está creando una nueva matriz? Está creando una nueva matriz por aquí extendiendo la matriz existente y agregando un nuevo elemento en la matriz al final y se está asegurando de que su ID se incremente en al final y se está asegurando de que su ID se incremente Así es como lo está haciendo. ¿Bien? Entonces esto está hecho. No voy a borrar esto. Sólo estoy teniendo esto en forma de comentarios. Creo que esto es bueno para entender propósito. Si aún estás confundido, entonces, al mirar esto, todo debería aclararse, ¿verdad? Porque así es como se ve el contador cuando se están creando tres contadores. Así sería el estado. Bien. Ahora esto está hecho. Ahora lo que tengo que hacer es que necesito tener contador de incrementos. Todo está hecho, ¿verdad? Contador de incremento. Entonces esto está funcionando bien si me refresco. Se inicializa a uno primero, y si agrego varios contadores, se puede ver que el ID también se está incrementando ¿Bien? Así que voy a venir aquí. Lo que haría es ahorrar aquí const. ¿Bien? Diré incremento. Contador. Bien, contador de incrementos, algo así por aquí Bien. Voy a tener ID por aquí siendo pasado y una función de flecha. Vaya, funciones de flecha, algo así, terminando con punto y coma Ahora bien, ¿cómo podemos incrementar el contador? Entonces tenemos la identificación del mostrador, ¿no? ¿Cómo obtenemos la identificación? Lo estamos consiguiendo por aquí, y tenemos que pasarlo por aquí. ¿Bien? ¿Cómo lo pasamos? Entonces podemos decir por aquí. Esta es una función de flecha, así que solo eliminaré esto. Diré contador de incremento. Y voy a decir contador punto ID, algo así. Entonces estamos pasando la identificación del contador. Entonces sabemos qué contador se está incrementando. ¿Bien? Ahora, lo que tenemos que hacer es buscar a través de esta matriz, y necesitamos obtener el contador. Cuyo botón de incremento se hace clic o cuyo ID coincide, y necesitamos incrementar el valor y actualizar el valor a la cosa incrementada Bien, entonces, ¿cómo hacemos eso? Entonces lo que tenemos que hacer es que Ala venga aquí. Primero diré contadores mapa de puntos. ¿Bien? Y voy a realizar una búsqueda por aquí. Voy a ir a través de toda la matriz por aquí. Voy a decir cómo voy a buscar, voy a decir contador ID es igual a ID. ¿Bien? Y si es igual, ¿ entonces qué hacemos? Nosotros incrementamos. Bien, necesito agregar la lógica para el incremento, de lo contrario, solo tienes el contador por aquí ¿Bien? No haces ningún cambio. Así es como funcionaría la lógica. ¿Bien? Y también, la salida de esto debería ir a establecer contadores porque necesitamos actualizar el estado, ¿verdad? Entonces voy a agregar todo para establecer contadores. ¿Bien? Ahora bien, ¿cómo va a funcionar la lógica aquí? Entonces, ¿cuál sería la lógica de incremento aquí? Yo diría, agregaría un par de llaves rizadas. ¿Bien? Yo diría que esparza el contador por aquí y actualice su valor por aquí. Bien, voy a decir valor de contador más uno. ¿Bien? Entonces lo que esto va a hacer es que va a extender el contador actual junto con su atributo, y va a anular el valor por aquí, y va a incrementar el valor en uno ¿Bien? En primer lugar, todos los atributos se dejan tal cual. Entonces primero, extiende el contador por aquí, y luego actualiza el atributo value del contador con el nuevo valor. ¿Bien? Y eso es lo que se devuelve. Y si esto no es una coincidencia, entonces esto se ejecuta sólo cuando es cierto. Si esto no es una coincidencia, lo que sucede es que se está devolviendo el contador actual. Bien. Espero que esto tenga sentido. Y entonces si vengo aquí, pongamos a prueba esto. Si me grement puedes ver, está funcionando bien, ¿verdad Se puede ver que no se volvió a cargar toda la aplicación incluso después de que agregamos la función, ¿bien? Pero sólo se recargaron las partes relevantes porque los contadores siguen ahí Toda la recarga, así es como se la recarga completa de la aplicación ve la recarga completa de la aplicación. Todo está reseteado. ¿Correcto? Entonces eso no se hizo a pesar de que cuando agregamos una nueva función, ¿verdad? Entonces esa es la belleza de reaccionar en los estados de aquí. Entonces puedes ver que esta aplicación está funcionando como se esperaba, ¿de acuerdo? Y espero que esto le esté dando una buena idea de cómo puede tener estructuras de datos complejas como matrices, objetos e incluso estructuras de datos más complejas en estado Y así es como puedes hacer uso de ella. ¿Bien? Es un ejemplo bastante decente o un buen ejemplo, diría que eso te ayuda a entender el poder de los estados y cómo puedes trabajar con los estados para crear maravillas, diría yo. Todo bien. Entonces espero que hayas podido seguir adelante, y espero que sepas, así que este es un CSS básico que tengo en su lugar. ¿Bien? No es mucho, ¿de acuerdo? Pero cosas súper básicas, como estilo de contenedor, estilo H one, estilo de entrada, estilo borde, perdón, estilo de botón y estilo de vuelo libre Tan simple CSS que tengo, que ya estaba vinculado a este archivo en particular. ¿Bien? Entonces espero que esto haya sido útil y espero que hayan podido seguirlo. 8. Proyectos en foco: gestiona entradas de formularios con ReactState Hook: Oye, ahí. Entonces ahora es el momento de que hablemos de cómo se puede construir un formulario usando reaccionar y administrar todos los datos con la ayuda de state y usar State Hook en componentes. ¿Todo bien? Entonces esto es lo que vamos a construir. De hecho tengo el Temo por aquí. Y se puede ver que hay diferentes tipos de elementos de forma con los que vamos a jugar. Entonces primero, tienes un cuadro de texto normal. Bien, y tienes una casilla de verificación. Tienes botones de radio, tienes casilla de selección, y puedes ver todos los datos del formulario que se actualizan en vivo por aquí. Déjame darte una demostración. Así que lo que entre por aquí o lo que sea que seleccione se mostrará por aquí. ¿Bien? Entonces aquí, si digo, Oye, puedes ver este texto aquí arriba por aquí. Bien, puedo decir, me encanta reaccionar, algo así. Y se puede ver cualquier tipo de actualizaciones que haga, esas también se reflejan en tiempo real. Puedo seleccionar los botones de radio. Puedes ver la opción uno que se muestra aquí. Si cambio a la opción dos, verás la opción dos por aquí. Lo mismo ocurre con la casilla de verificación. Puedo ver comprobado y sin marcar y para el selecto también Se puede ver la opción uno, la opción dos. Bien. Entonces este es un formulario que está siendo completamente administrado por react con la ayuda de U State Hook, y se puede ver como es capaz de actualizar una parte de la aplicación cada vez que hay un cambio en otra parte sin refrescar la página. Esa es la belleza de reaccionar, ¿verdad? Para que puedas ver cómo está funcionando. Incluso puedes actualizar cualquier cosa en cualquier momento, verás que la actualización se refleja sin que la página se actualice o vuelva a cargar Todo bien. Así que vamos a construir esto en las manos, y vamos a estar pasando por cada paso en cuanto a cómo se puede construir esto. Y este conocimiento será realmente útil si planeas usar react para, ya sabes, construir formas, formas dinámicas con algunas validaciones robustas Entonces aquí estamos en el IDE, y este es el código de inicio que tengo por aquí. Es un componente llamado componente de aplicación. ¿Bien? El nombre es app en sí. Que reside en el archivo app dot JSX, vinculado a un CSS llamado app dot CSS, y el archivo CSS literalmente no tiene nada Todo bien. Entonces tenemos que trabajar en esto. Es simplemente mostrar un encabezado por aquí o debería decir, un encabezado llamado hola en la página web, ¿bien Entonces comenzaremos con esta aplicación. Primero lo primero, lo que vamos a hacer es que vamos a hacer uso del estado de uso por aquí, Bien Asegúrate de importar el estado de uso en la parte superior, ¿de acuerdo? Ya tengo un importado. Entonces vamos a hacer uso del estado. Voy a decir constante. Voy a tener un estado creado llamado datos de formulario, y voy a tener un conjunto de datos de formulario. Funcionan por aquí, y entonces voy a hacer uso de nosotros estado así, sí, ¿a qué se va a inicializar esto Eso es interesante. Entonces este es un objeto, básicamente, que contendrá todos los datos de los formularios. Entonces tenemos texto por aquí, ¿verdad? Tenemos una casilla de verificación, y la inicialización de checkbox es falsa Tenemos una radio, que se está inicializando a algo vacío o sin datos como tal Esto también está vacío. Y entonces tenemos por aquí, seleccionar algo como esto. Bien. Así. Entonces esto es lo que la inicialización inicial. Es un objeto con estos atributos. Todo bien. Ahora lo que voy a hacer es empezar a construir en el formulario por aquí. ¿Bien? Entonces tengo este H uno. Voy a cambiar esto voy a cambiar el texto para formar ejemplo. Bien. Voy a ver si esto. Bien. Esto está hecho. Y aquí, entonces voy a tener este nombre de clase como contenedor de formulario, algo así, contenedor de formulario. Esto será útil para CSS más adelante. Voy a tener una etiqueta Fm, que es la etiqueta HTML Fm. Bien. Y ahora voy a empezar a trabajar en los elementos uno por uno. Entonces, el primer elemento que voy a tener es la entrada de texto, bien. Y el siguiente en el que voy a trabajar es la casilla de verificación, algo así ¿Bien? Entonces primero cubriremos estos dos, y luego pasaremos a la siguiente. ¿Bien? Entonces sí, el cuadro de texto. ¿Qué necesitamos hacer para la entrada de cuadro de texto o texto? ¿A la derecha? Entonces necesito tenerlo TIF primero. ¿Bien? Voy a llamar bien a este TIF. ¡Uy! Bien, metí la pata con mis llaves por aquí, pero este sería el nombre de la clase, Y voy a llamar a esto como campo de formulario por aquí. Bien. Y esto pasará a una nueva línea. Y campo de formulario, primero voy a tener una etiqueta. Bien. Entonces la etiqueta es, cuál es la etiqueta, será texto. Tenemos que introducir el texto. Puedes agregar cualquier tipo de etiqueta como nombre o algo así si lo deseas. Bien. Campo de entrada, es un campo de entrada. Que todos los atributos necesito establecer para esto. Entonces primero voy a ver que esto es de tipo texto. Bien. Entonces el nombre es texto por aquí. ¿Bien? El nombre es texto. Bien. 1 segundo, así que solo presionaré tabulador para que quede sangrada. Bien. El nombre es texto. ¿Cuál es el valor? Entonces necesito vincularlo al valor, y el valor está por aquí, datos de formulario, texto tot, algo como esto, ¿de acuerdo? Y entonces necesito tener sobre el cambio por aquí. Bien. Sobre el cambio, ¿qué debería pasar? Deberíamos llamar a una función llamada handle change. Bien. Aunque esta función aún no está definida, ¿de acuerdo? Entonces necesitamos definir esa función también. Simplemente voy a tener una función vacía por aquí que se está creando para que no aterricemos en ningún error. Entonces voy a decir const, maneje el cambio por aquí. Bien. Y voy a tener E siendo aprobada. Bien. Y solo lo tendré vacío. Bien. No hay problema alguno. Uy. Entonces es un error de sintaxis. Sí, solo se ve bien. ¿Todo bien? Es una función de flecha, ¿verdad? Entonces solo tengo este cambio de mango, y aquí, si vienes, lo estoy vinculando para manejar el cambio. ¿Todo bien? Ahora bien, con lo que sea que lo estés inicializando, ¿de acuerdo? Ya que estás vinculando este cuadro de texto al estado de aquí, con lo que sea que inicialices el texto, si digo ABC y si guardo esto, verás que ABC está aquí arriba por aquí, ¿verdad Porque esa es la inicialización, ¿verdad? Así que lo he mantenido vacío por ahora. ¿Bien? Pero este es el DIV o este es el componente, o este es el yo debería decir, esto es UI para entrada de texto. ¿Todo bien? Pasemos al siguiente después de la entrada de texto, tenemos casilla de verificación Entonces déjame copiar el tieso, antes que nada. Uy. Voy a tener el tieso por aquí. Bien. También es un campo de formulario. Tiene etiqueta. En lugar de entrada, me desharé de esta entrada. Aquí, puedo decir, en lugar de etiquetar por aquí. Bien, entonces la etiqueta tendrá cómo funcionará esta casilla de verificación dentro de aquí, voy a tener entrada. Bien. Y por aquí, voy a decir tipo es igual a Checkbox. Algo como esto, ¿de acuerdo? Nombre, voy a decir, casilla de verificación. Voy a mantener el nombre y el tipo mismos comprobados. ¿Bien? Esta es una propiedad comprobada, que la vincularé para formar datos. Diré casilla de verificación de punto de datos de formulario. ¿Bien? Esto está hecho, y en el cambio, voy a decir manejar el cambio. Entonces hay una sola función que tenemos ahora, bien, para manejar todos los cambios, ¿verdad? Y, sí, lo cerraré. Es una entrada de etiqueta de cierre automático o también puede tenerla por separado . ¿Bien? Entonces esto se hace etiqueta, y aquí después de la entrada, probablemente puedas tener 1 segundo. Para que puedas tener casilla de verificación. Algo así. Y puedes ver la casilla de verificación por aquí, ¿no? Así que la casilla de verificación está hecha, ¿de acuerdo? La forma no se ve bonita. No te preocupes por eso porque aún no tenemos ningún tipo de CSS, ¿verdad? Entonces ahora voy a tener un comentario. Diré botones de radio. ¿Bien? ¿Cómo trabajamos ahora en los botones de radio? ¿Bien? Entonces tendremos que crear un botón de radio, ¿verdad? Entonces voy a remontar esto. ¿Bien? Esta es tu estructura, y voy a deshacerme de la entrada de aquí. Bien. O lo que puedo hacer es apegarme a esta entrada. Cambiaremos los tipos. Esto es radio por aquí. ¿Bien? Y escriba por aquí para radio es radio. Copia esta radio. El texto es radio. ¿Bien? Formulario de datos enseñados radio, la opción cuatro marcada. Entonces esto no va a estar ahí. Se revisará por aquí. ¿Bien? Tipo nombrado, y también necesito agregar valor por aquí, bien valor. El valor es igual a, voy a decir la opción uno. Bien, algo como esto. Y puedo decir que la radio es igual a la opción uno, ¿de acuerdo? Y en cambio, hay cambio de mango. ¿Bien? Y aquí, puedo decir después de entrada tras etiqueta. Bien. Entonces esta es la etiqueta de la etiqueta. Bien. Gana bien, esto está dentro de la entrada. Entonces si guardo esto, bien, estoy viendo radio por aquí, pero necesito agregar una etiqueta más, que está envolviendo esto, ¿verdad? Entonces voy a decir etiqueta. Y voy a cerrar esto, este cierre irá después de la entrada, y necesitamos tener una etiqueta que diga opción uno, algo así. ¿Bien? Para que puedas ver la opción uno por aquí. ¿Bien? Duplicaré lo mismo por completo. De hecho. Bien. Y me desplazaré hacia abajo por aquí. Entonces después de la etiqueta de cierre de etiqueta, se abre otra etiqueta, radio, y esta es la opción dos, y la opción de radio de aquí es dos para esto, y el texto es dos. Bien. Entonces esto es todo. ¿Bien? Creo que esto se ve bien por aquí. ¿Bien? No hay CSS, así que no te preocupes por eso. Bien. Pero estos son nuestros botones de radio. Tenemos un par de opciones. ¿Bien? Ahora esto está hecho. Tenemos TIF, ¿de acuerdo? Y ahora lo que tenemos que hacer es 1 segundo. Este es el DIF de aquí para esto. Después de este DIF, voy a agregar. Bien. ¿Qué necesitamos agregar desplegable? Bien. Ahora para el desplegable, necesito el TIF. Bien, entonces me desplazaré hacia arriba. Voy a copiar esta punta de entrada de texto baje . Bien. Y por aquí, voy a repartir esto. ¿Bien? Ahora para el desplegable, lo que tenemos que hacer es que veamos por aquí, seleccione. Esto es selecto. Y en lugar de entrada. Así que no necesitamos decir entrada por aquí, vamos a tener select por aquí, ¿verdad? Y ahí hay una etiqueta, pero ésta será selecta. Entonces puedo decir que no necesitamos esto. Esto es muy específico de entrada, ¿verdad? Yo solo me desharé de esto y diremos seleccionar. Algo así. Bien. Y para seleccionar, vamos a tener múltiples opciones dentro de Select. ¿Bien? Entonces esta es la opción uno. Pero para seleccionar, necesitamos establecer algunas propiedades. Entonces voy a decir nombre de select es igual a. ¿Cuál es el nombre? Es selecta. Bien. ¿Cuál es el valor aquí? Entonces el valor es a partir de datos enseñados, selectos, algo así. ¿Qué hay en el cambio? En cambio, es cambio de mango, ¿verdad? Entonces voy a decir manejar el cambio por aquí. Bien. Ahora llegando a opciones, tenemos opción por aquí. El valor de la opción es igual a vacío. No hay opción. Bien. Y la primera opción se trata de elegir una opción. Bien. Entonces mostraremos esto al principio. Bien, elige una opción. Algo así. Bien, para que veas, elige una opción, ¿verdad? Ahora, necesito replicar esto, bien, al otro lado. Entonces voy a copiar esto e ir al final. Puedes pegar esto una y dos veces. Todo bien. Entonces esto está hecho. Bien. Ahora bien, el valor para el siguiente es la opción uno. Bien. Y aquí puedes tener la opción uno. Y el valor para dos es la opción dos. Y aquí. Opción dos. Opción dos. Todo bien. Entonces esto está hecho. Tienes la opción uno y la opción dos entrando. Bien, así que esto está hecho. Ahora necesitamos lo que necesitamos es necesitamos una casilla de verificación o creo que la casilla de verificación ya está agregada desplegable, casilla de verificación de botón de radio Entonces esto está hecho. Ahora lo que tenemos que hacer es que también necesitamos mostrar todos los datos, ¿verdad? Entonces aquí, después del último o antes del último si, debo decir. Bien, aquí, voy a añadir un televisor. Bien. Este es el DF y voy a llamar a esto. Voy a añadir un nombre de clase por aquí. Nombre de clase como el de los datos del formulario. Bien. Y por aquí, voy a decir H tres. Vaya, H tres, debería ser H tres. Lo siento. Entonces esto es H tres por aquí. Bien. Y voy a decir datos de formulario, algo así. Bien. Ahora mostraremos los datos del formulario uno por uno. ¿Bien? Entonces, ¿cómo vamos a exhibir? Primero, tendremos una etiqueta P. ¿Bien? Dentro de la etiqueta P, tendremos etiqueta fuerte. Bien, fuerte. Dentro de fuerte, diremos texto. Entonces mostraremos todo uno por uno. Entonces diremos texto. Bien. Y aquí afuera fuerte, voy a decir forma theta Voy a tener este guión Ja. Diré forma theta. Tita por aquí. Texto punteado. Bien. Y si esto no está ahí, entonces diré en A en A. Bien. Bien. Entonces esto está hecho. Así es como estamos mostrando como funcionaría la pantalla. Se puede ver. Bien, Fm data dot text o N. Entonces, si Fm data dot text no es nada, entonces NA se está mostrando. Y tenemos que hacer esto para todos, o vamos a venir aquí. Vamos a replicar esto para radio radio y veremos formdata dot Radio por aquí De lo contrario, esto será Bien, entonces para la radio, esto no funcionará o esto funcionará. No va a funcionar para casillas de verificación. ¿Bien? Así que voy a añadir para casilla de verificación por aquí. ¿Bien? Esto es para chequear. Caja por aquí. Entonces, para checkbox, necesitamos tener especial cuidado. ¿Bien? Porque si los datos del formulario o casilla de verificación son verdaderos, entonces necesitamos mostrarlos marcados y desmarcados, Entonces voy a decir signo de interrogación, de lo contrario, condiciones falsas. Estoy haciendo uso de tonería operar por aquí. Diré comprobado y sin marcar. Algo así. Todo bien. La radio está hecha. Tenemos selectos. Bien, entonces voy a ver seleccionar algo como esto. Y aquí, voy a ver seleccionar. Bien. Esto está hecho. Bien. Estamos mostrando los datos, también tenemos la vista para mostrar los datos. Todo bien. Ahora bien, lo que tenemos que hacer es implementar la función más importante de aquí, que es para manejar el cambio. Así que me desplazaré hacia arriba por aquí. ¿Bien? Estamos consiguiendo E por aquí, que es el evento. Entonces voy a decir const, y voy a decir nombre va a tener valor, tenemos tipo, y habremos comprobado aquí Bien, entonces esto es lo que estamos creando y voy a decir E dot target por aquí. Bien. Ahora, por aquí, lo que tenemos que hacer es después de crear esto, necesitamos establecer la forma. ¿Bien? Entonces voy a decir establecer datos de formulario. Entonces, esencialmente, lo que hice aquí está en la línea número uno, he estructurado el objetivo de punto E por aquí. Lo he estructurado en elementos individuales, y estoy diciendo establecer datos de forma de punto. Bien. Voy a fabricar este nuevo objeto por aquí, ¿de acuerdo? Y voy a decir tres veces los datos de formulario, así que voy a hacer uso de que estoy haciendo desestructuración por aquí. Bien. Hm data, coma, y para nombre, lo que haría es si el tipo de nombre es igual a checkbox, Entonces necesitamos tener el valor comprobado, ¿verdad? Entonces voy a decir comprobado el valor de dos puntos. Así. ¿Bien? Esto está hecho, y, sí, esto también está hecho. Si guardo esto, veamos cuál es la salida. Para que veas que la cosa se está actualizando, checkbox marcada y marcada Opción uno, Opción dos, y se puede ver la opción uno, Opción dos siendo reflejada. Entonces está funcionando absolutamente bien, ¿verdad? Podemos hacer uso del cambio en el mango para actualizar los datos del formulario. ¿Bien? Así que estamos reestructurando los datos del formulario aquí, cualesquiera que sean los datos del formulario que estén siendo los datos del formulario que existan aquí. ¿Bien? Y entonces lo que estamos haciendo es que estamos actualizando los valores. Por lo que la aplicación está funcionando bien. Lo que haríamos es simplemente embellecerlo un poco. Todo bien. Entonces un poco de embellecimiento es importante Bien, para que se vea un poco más presentable. Así que voy a empezar con, con algo de CSS por aquí para el contenedor de formularios, bien, voy a tener el ancho máximo como 400 píxeles por aquí. Bien. Tengo margen por aquí, que voy a poner en 50 pixeles y auto. Voy a pasar en estas dos cosas. Bien. Voy a tener relleno por aquí. Relleno, vamos a establecer en 20 píxeles. ¿Bien? Radio de borde. Bien. El radio del borde, voy a establecer en ocho píxeles. Probablemente. A ver. Bien. Y voy a ver el color de fondo. Bien. El color Macron puede ser, digamos, blanco, una especie de cosa Bien, claro. Abded como seguro. Todo bien. Puedes elegir la forma que quieras. Bien. Voy a tener sombra de caja por aquí a cero, cero, diez píxeles Rch PA, y pondré el valor de aquí a cero, cero, Bien, cero, cero Uno. Entonces esto es a lo que lo estoy configurando. Todo bien. Y si, esto es todo. Supongo que fin de semana familiar de fuentes, ¿de acuerdo? Si necesitas familia de fuentes, y voy a decir sensif por aquí. Todo bien. Este contenedor de forma, H dos y H tres etiquetas tendrán una línea textil de centro por aquí y color como el de gris. Bien, algo como esto, probablemente. Bien, o color de oscuridad. A. Dependiendo de su elección, bien, o simplemente puede configurarlo en negro por aquí. Bien. Esto también es bueno. Bien, h2h3. Bien, ahora esto está hecho. Voy a tener campo de formulario. Entonces todos los campos de formulario. Bien. ¿Cómo lo hacemos? Entonces vamos a tener fondo de margen por aquí. Voy a establecer el margen inferior en 20 píxeles. Bien, guárdala. Y si, esto es todo. Déjame volver a esto si es necesario más tarde. Etiqueta. Entonces voy a decir exhibición de candado por aquí para etiquetas. Bien, ya puedes ver, cambio en la interfaz de usuario. Diré tamaño de fuente. El tamaño de la fuente es de 14 píxeles. Bien. Voy a tener peso por aquí. El peso del pulso por aquí, ¿de acuerdo? Y luego voy a decir, fondo de margen. Margen inferior de cinco por aquí. Bien. Y color. Vamos a mantener el color como hash tres, tres. Bien. Sí, ya terminamos Para etiqueta, voy a decir entrada, y voy a tener que escribir como texto por aquí. Bien. Entonces el tipo es igual al texto. ¿Bien? Algo así. Bien. Ahora para el texto, lo que voy a hacer es decir ancho del 100%. Bien, esto es, a primera hora. Ahora voy a tener relleno por aquí de diez pixeles. Bien. También agregaré select también al CSS. Seleccione. Bien. Y luego voy a decir frontera. Uy. Por lo que será un borde de punto y coma Ahora para frontera, voy a decir uno pixeles, sólido, hastac CCC. ¿Bien? Es una especie de código de color blanco tipo gris, ok y radio. Cuatro píxeles por aquí. Bien. Y tamaño de fuente de 16 píxeles. Así. ¿Bien? Esto se ve bien. Todo bien. Si le echas un vistazo a la aplicación, se ve bien. No está mal. Bien. Trabajemos en esto más a fondo. Entonces tengo esta entrada porque tengo el CSS para texto. Vamos a agregar algunos CSS para checkbox también. Entonces voy a decir checkbox. Bien. Y voy a decir margen derecho. Bien. Margen derecho. Vamos a agregarlo diez pixeles. A ver. Bien. Y para radio también, voy a añadir algunos para radio. Para radio, solo voy a agregar margen por aquí cinco pixeles. Bien, un poco de alineación por aquí. Bien. Y ahora vamos a alinear los datos del formulario, así que voy a decir datos de formulario. Los datos del formulario son clase D para los datos que se muestran en la parte inferior. Bien, entonces voy a decir margen inferior. Margen superior, comenzaré con 30 pixeles. Tenemos algo de espacio ahí. Conseguimos algo de espacio, y relleno. Vaya, relleno de digamos diez píxeles por aquí. Bien. Voy a añadir color color de fondo. Bien, el color de fondo es que podemos mantener el color de fondo como algo. En realidad tengo un código de color, ¿de acuerdo? Es E nueve, f7f9, algo así. Es una especie de color blanco. Esto se puede ver y el color exterior no es bueno en ese sentido. Entonces lo que voy a hacer es tomar este color y probablemente CCC o si me desplazo hacia arriba por aquí. Esta es una orilla. Esto no es bueno. Entonces puedo cambiar esto a F nueve de nueve I nueve. Bien. Entonces, tal vez esto se vea bien, ¿de acuerdo? Entonces esto es grisáceo, y esto es azulado Bien. Entonces sí, eso es lo que es el estilo que estoy usando ahora. Y color de fondo, tengo borde también. Borde de un píxel, sólido. Bien. Y hash, tengo un código de color A tres, D dos, D seis. Puedes usar el código de color o puedes elegir algo parecido, dependiendo de tu preferencia Es una especie de esquema de color azul que estoy usando. Bien, SN azul. Voy a añadir radio de frontera de cuatro píxeles y un diez. Bien. Diré datos de formulario, etiquetas P. Bien. ¿Qué hacemos al impuesto P? Diré tamaño de fuente de 16 pixeles. ¿Bien? Veamos color color, voy a decir hash 555. ¿Esto está hecho? Bien. Fuerte. Entonces cuando dices fuerte, bien, diré color de 333. Bien. Creo que esto se ve decente. ¿Bien? Agreguemos algo porque creo que esto está hecho. ¿Bien? No se necesita nada más. Supongo. Creo que esto se ve decente. ¿Bien? Entonces la aplicación está funcionando bien, se puede ver. Todo bien. Y CSS también se ve decente. Si quieres mejorar más, improvisar más, absolutamente puedes hacerlo. Bien. Pero sí, esto es muy presentable Y lo que sea que escriba, puede ver cómo se está actualizando. ¿Bien? Entonces sí, así es como podemos administrar los datos del formulario. Estamos haciendo uso de un estado por aquí, bien, que es tener un objeto con todos los atributos. Ahora tienes más campos que se están agregando a este formulario, tienes más atributos que se están agregando, y puedes administrarlos de la misma manera. Todo bien. Espero que esto haya sido útil, perspicaz y útil también Oh 9. PROYECTO: crea un selector de color personalizado con React: Oye, ahí. Ahora es el momento de que comencemos a construir un proyecto, que es una aplicación de captación de color usando react has. Ahora bien, esto nos ayudará a reforzar muchos conceptos de reacción y nos ayudará a practicar mucho, ¿de acuerdo? Este también podría ser un gran proyecto de portafolio para exhibir en entrevistas y currículum, ¿ verdad? Esta es la aplicación. Aquí puedes ver algunas fichas de color que puedes seleccionar. Y en el momento en que selecciones alguno de los mosaicos de color, verás el cambio de color de esta manera, ¿verdad? Y además, aparte de esto, si quieres agregar cualquier otro color, puedes seleccionar por aquí y puedes, como, cambiar el color, ¿verdad? Entonces esto es completamente dinámico, ya se puede ver. El camino o el momento en que estoy arrastrando el deslizador, verás que todo está cambiando, ¿verdad Entonces es muy dinámico, bien. De esa manera, se puede ver, es muy dinámico, ¿verdad? Entonces este es el recogedor de color que vamos a arrojar, ¿de acuerdo Y esto nos va a ayudar a practicar muchos conceptos de reacción, ¿verdad? Entonces, sin más preámbulos, saltemos directamente al editor y empecemos. Todo bien. Entonces aquí estamos en el editor de codificación, y aquí para empezar, tengo una configuración básica de tap React con app dot GSX devolviendo este marcado por aquí que ves, y aquí ves la salida, que es el selector de color Entonces no hay literalmente nada en el proyecto en este momento. Estamos como devolver H una etiqueta que está dando la salida como encabezado de selección de color, ¿verdad Ahora necesitamos comenzar a construir la aplicación. Entonces comenzaremos con estos estados. Todo bien. Y en la cima, ya estoy imputando gancho de escenario. Todo bien. Entonces lo que necesito hacer es crear un estado, y lo que necesito hacer un seguimiento es, por supuesto, ya debes haberlo adivinado, es color de fondo, ¿verdad Porque eso es con lo que estamos jugando, bien, en esta aplicación. ¿Bien? Así que el color de fondo por aquí. Y voy a decir establecer color de fondo, ¿de acuerdo? Así que el color de fondo, algo así. Bien. Y sí, esto está hecho. Y entonces necesito haber usado por aquí. Entonces voy a decir use state, y voy a tener un color por defecto inicializar Entonces el color predeterminado puede ser el blanco, ¿de acuerdo? Y entonces puedo ahorrar. ¿Bien? Entonces esto está hecho. Tenemos el conjunto del Estado. Voy a añadir un punto y coma al final. Bien. Ahora lo que tengo que hacer es que necesito agregar una interfaz por aquí para mostrar los mosaicos básicamente de color, ¿verdad? Y esos serían los mosaicos básicamente en los que el usuario puede hacer clic y obtener el color de fondo cambiado en instancia, ¿verdad? Entonces lo que voy a hacer es que voy a agregar una matriz por aquí. Puedo ver colores por aquí, y puede ser una matriz vacía en este momento. Bien. En breve voy a añadir algunos colores por aquí. Bien. Pero también necesitamos renderizar la matriz, ¿verdad? Entonces, sean cuales sean los colores que estemos viendo, necesitamos renderizarlo, y tenemos una matriz. ¿Bien? Entonces lo que voy a hacer es que voy a agregar etev por aquí Voy a agregar nombre de clase a este diff para que pueda agregar CSS más adelante, y voy a llamar a esto como paleta de colores, algo así. Bien. Ahora aquí, voy a decir colores Tat mapa. Voy a hacer uso del mapa por aquí, método de mapa, y voy a decir color, ma index. ¿Bien? De estas dos cosas que vamos a hacer uso. ¿Bien? Haz uso de las funciones de flecha, y aquí estamos. Bien. Entonces dentro de esto, lo que sea que agregues se implementaría para cada elemento de la matriz. ¿Bien? Y lo que queremos hacer cada elemento de la matriz, queremos mostrarlo, ¿verdad? Entonces voy a agregar un TeV por aquí. ¡Uy! Entonces voy a agregar un TeV algo así Y, ¿por qué no se cerró? Bien. Entonces lo cerraré manualmente. Todo bien. Así que aquí estamos aquí tenemos televisión, ¿de acuerdo? Y voy a añadir una llave, algo así. Bien. 1 segundo. Entonces voy a decir clave es igual a, y voy a decir índice. Bien. Y el nombre de la clase. Y voy a decir caja. Solo voy a agregar nuestro CSS por aquí. Lo siento, el nombre de la clase por aquí para que pueda agregar CSS más adelante. ¿Bien? Y puedo decir al pinchar por aquí. Entonces al click necesito, por supuesto, entonces al click, hubo una interacción, o? Y necesito agregar una interacción. La interacción será que el color de fondo deba cambiar al hacer clic, ¿verdad? Y necesito una función para eso, que no tenemos ahora mismo, lo cual está absolutamente bien. Así que voy a dejar esto como vacío. ¿Verdad? Ahora bien, esto está hecho. ¿Bien? Tenemos este día. Tenemos esto por aquí. ¿Bien? Y lo que tengo que hacer es desplazarme hacia arriba por aquí. Podemos agregar algunos colores por aquí en la matriz. ¿Bien? Ahora bien, ¿qué colores debemos agregar? Bien, sí tengo algunos códigos de color, así que los voy a escribir manualmente. ¿Bien? Entonces puedo decir FF, cero, cero, cero, cero, ¿bien? Déjame guardar esto, y no estamos viendo ningún cambio por aquí. Bien. Bien, no estamos viendo ningún cambio porque en realidad estamos, solo estoy renderizando el tap por aquí, nombre del color de la clave, y solo estoy mostrando el click por aquí. Entonces no estoy viendo nada porque, bien, no hay nada en el dev, pero lo que voy a hacer aquí es ya que el nombre de la clase para esto es caja de color por aquí, solo voy a agregar un ancho por aquí de 50, digamos, ¿bien? Y voy a añadir una altura por aquí de 50 pixeles. Voy a guardar esto por aquí. Bien. Y así aún no estamos viendo la salida. Lo que tenemos que hacer es desplazarme por aquí y dejarme ver. Bien, entonces hay un error que he cometido. Esto no debería ser un pase rizado por aquí. ¿Bien? Este debe ser soporte redondo italia. Bien. Y solo tomaré este soporte redondo y lo reemplazaré por esta paese rizada Bien. Entonces todo esto, lo div debería estar dentro de corchete redondo por aquí. Y si guardo esto, aún no voy a ver nada, pero hay un div agregado, ¿de acuerdo? Solo necesitamos agregar color de fondo a este div. Entonces voy a decir estilo, bien. Así estilo de color de fondo. Aquí, algo así, color Colin. Bien. Al igual que así. Ahora verás que el DIF se muestra por aquí. ¿Bien? Entonces lo que está pasando es, te lo diré, entonces este es el colord Este es el código de color para el rojo. ¿Bien? Si buscas esto en Google, sabrás cuál es este código de color. Y lo que estoy haciendo es que me estoy tomando este color. O todos los elementos de la matriz, estoy iterando a través de él, bien, usando este mapa de puntos de color ¿Bien? Y estoy aceptando estos dos parámetros en esta función de flecha, color e índice, ¿verdad? Ahora por cada elemento de la matriz, estoy obteniendo color y es índice. ¿Bien? Lo que estoy haciendo es que estoy diciendo renderizar un TiVo cuya clave es el índice. Esto lo estoy haciendo para la optimización, como un mejor propósito de renderizado para reaccionar. Tengo un nombre de clase, y usando este nombre de clase, estoy configurando el ancho y alto como 50 píxeles para que sea visible porque literalmente no hay nada en el DIV y luego estoy configurando el estilo de aquí al valor de color que tenemos por aquí. Entonces esto es lo que se establecerá. Y luego tengo un oyente de eventos on click, que aún no he manejado, ¿de acuerdo? Se puede decir, no tengo una función definida para eso, ¿de acuerdo? Así que he hecho esto, bien, y esto es todo. Lo que tenemos que hacer es agarrar algunos códigos de colores que tengo y los pegaré por aquí. Así que lo pegaré por aquí, y se puede ver que es una larga matriz. ¿Bien? Puedes agregar tus propios códigos de color o puedes referirte a éste. Entonces, si buscas en Google por aquí, código de color, y puedes buscar este, verás que este es el código de color, ¿de acuerdo? Y puedes ir a este sitio web como colorhx.com, y puedes obtener cualquier tipo de código de color que quieras, ¿de acuerdo Así que los nombres de color. Entonces aquí se puede ver el cero absoluto. Tienes la lista de todos los colores junto con sus códigos de color. Para que puedas elegir los que quieras exhibir o puedes llevarte los míos. ¿Bien? Eso está absolutamente bien. Bien. Pero solo te estoy mostrando el camino en cuanto a cómo puedes obtener tus propios códigos de color también. ¿Bien? Así que he agregado esto, y voy a guardar esto. Entonces en el momento en que lo guarde, verás como todos los códigos de color que se muestran sobre. Entonces, a partir de ahora, solo estás viendo estos botones. ¿Bien? No hay estilismo. No pasa nada si haces clic en esto, ¿verdad? Es sólo que ahí. Bien. Ahora lo que voy a hacer es escribir una función para manejar el click. Entonces voy a decir const, voy a decir manejar cambio de color Ahora estoy llamando a esta manija cambio de color por una razón. ¿Por qué? Porque al hacer click de este DIV el color debería cambiar para toda la página, ¿verdad? Entonces es por eso que estoy diciendo esto. Diré color por aquí. Bien. Y aquí, lo que voy a hacer es, voy a decir establecer color de fondo. Bien, y voy a pasar en color, algo así. Bien. Y voy a prestar esto. Bien. Y ahora lo que voy a hacer es, voy a bajar por aquí. Y lo que tenemos que hacer es aquí, en vez de tener una flecha vacía por aquí, voy a decir manejar el cambio de color, y voy a pasar en el color. ¿Bien? Entonces, lo que hace la función es que la función en realidad cambiará el color de fondo o cualquier color que estés pasando por aquí. Yo estoy haciendo eso. Si selecciono azul ahora. Bien, entonces no funciona. Déjame ver cuál es el tema. Bien al click, estoy diciendo que todo es correcto. Bien aquí, maneje el cambio de color. Yo también estoy pasando en el color. Bien, estoy cerrando en el div. Bien, entendí el tema por aquí. Aquí sólo estamos actualizando el estado, ¿no? Esta es la función que llamamos para actualizar el estado por aquí. Entonces el color de fondo tiene el valor actualizado del color, ¿verdad? Ahora bien, lo que tienes que hacer, aún no lo estás poniendo en el fondo del TIF o de la página. Entonces, lo que tienes que hacer aquí es que vendremos aquí, ¿de acuerdo? Nombre de clase DV, paleta de colores. Bien, no este, lo agregaremos al div padre de aquí. ¿Bien? Entonces aquí, lo que voy a hacer es en la raíz DV voy a decir estilo, ¿de acuerdo? ¿Y cuál es el estilo? El estilo es el color de fondo. Bien. Entonces aquí tenemos color de fondo. Veamos cómo funciona esto. Así se puede ver que el color de fondo está cambiando ahora, ¿no? Se puede ver. Entonces sí, esto es lo que es. Bien. La funcionalidad está funcionando bien. Bien. Y lo que voy a hacer aquí es que agregaré un nombre de clase también para poder hacer uso de él más adelante. Todo bien. Diré app. Usaremos esta clase en CSS. Bien. Pero por ahora, espero que tengan una claridad en cuanto a cómo está funcionando el cambio de color. ¿Bien? Esto está hecho. Ahora bien, ¿qué tenemos que hacer a continuación? ¿Qué hacemos a continuación? Lo siguiente es también necesitamos tener un seleccionador de color personalizado Entonces, si un usuario quiere seleccionar cualquier otro color aparte de los que están disponibles por aquí, lo que haría es agregar un seleccionador de color personalizado, así que diré TiVo Y por aquí, voy a decir el nombre de la clase. Bien, agregarás un nombre de clase. El nombre de la clase puede ser un picker de color personalizado. Algo como esto. Bien. Ahora por aquí, tendrás entrada. Bien. Estaremos aceptando aportes por aquí. Entonces voy a decir tipo. Escriba como color. Todo bien. Y luego aquí, valor. Entonces, ¿cuál es el valor? El valor puede ser color de fondo. ¿Bien? Ahora, el color de fondo es un estado. Recuerda que tenemos en donde estamos manteniendo el estado del color de fondo, y lo estamos actualizando desde estos tips también al click. ¿Bien? Entonces estamos asignando el valor que hay en el color de fondo a este selector de color ¿Bien? Y lo que tenemos que hacer es sobre el cambio. Bien, necesitamos tener un evento. Si algo cambia por aquí, estoy aceptando E, o y diré que el cambio de color del mango, y pasaré el valor del punto objetivo del punto E punto. Algo como esto. Bien. Esto está hecho, voy a guardar esto, y vamos a ver una selección de colores por aquí. Se puede ver que no está bellamente estilizado. No te preocupes por ello, pero puedes ver la dinamicidad por aquí Esto es reaccionar, ¿verdad? Entonces estamos haciendo uso del estado por aquí, el concepto de estado para traer una sensación dinámica a nuestros antecedentes, ¿de acuerdo? Y se puede ver cómo está funcionando esto. Bien, ahora mismo no se ve hermosa, te lo diré. Entonces, si vas por aquí, esta es una aplicación de página completa, no se ve hermosa. Cierto, no es hermoso, claro, porque no hay CSS, literalmente, ¿verdad? Entonces necesitamos agregar CSS para embellecerlo un poco. Pero sí, espero que ustedes tengan una idea de lo que está pasando. Todo bien. Ahora lo que vamos a hacer es agregar algo de CSS, ¿de acuerdo? Entonces voy a empezar en el archivo CSS. Solo asegúrate de que el archivo CSS esté enlazado por aquí, y que sea importado por aquí. Importar aplicación dot slash dot CSS. Y asegúrate de tener este archivo en la misma carpeta. Si no está ahí en la misma carpeta, asegúrese de tener la ruta correcta. ¿Bien? Está en la misma carpeta, así que lo estoy refiriendo como dot forward slash app dot CSS ¿Bien? Ahora aquí, lo que tenemos que hacer es que veamos dot app Bien. Y voy a decir familia de fuentes. Así. Y voy a decir al éste. ¿Bien? Y al final, hubo punto y coma Puedo decir textine ¿verdad? Y voy a decir centro. Déjame ver si esto. ¿Bien? Entonces los cambios que pude ver, algunos buenos cambios. Todo bien. Y ahora puedo ver relleno. ¿Bien? Relleno, podemos agregar de 50 pixeles. O déjame mantener el relleno de cero píxeles de distancia. Bien, veamos qué pasa. Diré altura mínima de 100. Bien. Y luego voy a decir color. Bien, entonces color, agreguemos. Tengo un código de color tiene F 0f0f0, algo así. Parece un color blanco o texto claro para el modo oscuro es lo que puedes decir. Todo bien. Entonces esto está hecho. Mantendremos el CSS para la aplicación de esta manera. Voy a tener H uno. ¿Bien? Y voy a decir color. Bien. Entonces color, voy a mantener este igual. Bien. Esto se ve genial. Creo que todos estamos bien. ¿Bien? Ahora, agreguemos el CSS para la paleta de colores. Diré paleta de colores, algo así. Y aquí, voy a decir display flex. Voy a añadir un display de flex. Se puede ver cómo se volvió horizontal. ¿Bien? En el momento en que agregamos esta propiedad. Diré justificar el contenido al centro. Guarde esto. Bien. Y voy a decir brecha de diez, diez pixeles. Entonces cada elemento estará espaciado a la distancia de diez píxeles. No he guardado este cambio. Pero aquí, si ves, no hay espaciamiento entre medias, ¿verdad? Está funcionando bien, pero no hay espacio entre ellos. Entonces quiero agregar algo de espacio. Entonces he agregado esta brecha diez pixeles. El archivo aún no se ha guardado. En el momento en que ahorre, ya verá cómo cambió, ¿verdad? Y si ves por aquí, puedes ver diez pixeles, ¿ verdad? Esto está funcionando bien. Bien. Así que aquí brecha de diez píxeles, y ahora voy a decir margen, margen de arriba por aquí. Digamos cero píxeles. Bien, diez pixeles. Lo siento. No cero. Esto está bien. Todo bien. Y caja de color, tenemos 50 pixeles, 50 pixeles. Diré puntero del cursor. Coso se quedará con dos punteros, y yo diré frontera. Bien, borde de dos píxeles, sólido, y voy a decir hash FF. Bien. Entonces esto es todo y veamos si esto. Bien. Entonces tenemos alguna botella y tenemos este efecto hover, que se ve decente, diría yo Todo bien. Ahora, también necesitamos darle estilo a la entrada de pika de color Esto no se ve tan bien, ¿verdad? Entonces voy a decir tot, y voy a decir color personalizado Pica. Bien. Una vez más, ¿es esta una clase que tenemos? Déjame desplazarme hacia abajo. Bien, sí. Esta es una clase que recuerdo. Es un seleccionador de color personalizado. Y dentro de esto tenemos insumo, ¿verdad? Entonces voy a decir que el recogedor de color personalizado por aquí. Bien. Y dentro de esto, hay que sumar, digamos, margen. Entonces en este momento literalmente no hay margen entre estos botones y el seleccionador de color Entonces voy a decir, agreguemos un margen de 20 pixeles así. Bien, ahora hay cierta brecha. Ahora lo que puedo hacer es copiar esto. Aquí agregaremos el CSS para entrada también dentro de esto. ¿Bien? Entonces voy a decir para esto, deshazte de esto. No necesitamos margen superior, así que voy a decir puntero del cursor. Bien, esto está hecho. Diré frontera como ninguna. Bien. No necesitamos ningún tipo de botellas, así que puedes ver que esto se ve genial. Relleno, no tan genial, necesitamos agregar algo de relleno diez pixeles, ¿de acuerdo? Y agregaremos radio radio de poder. Agreguemos un radio de poder de cinco píxeles. Bien. Y podemos añadir color por aquí. Lef. ¿Bien? Esto está hecho. Creo que esto es todo, y necesitamos agregar el efecto hover. Entonces voy a decir seleccionador de color personalizado, entrada, colon hover. ¿Bien? Ahora bien, cuál es el hover, voy a decir color de fondo de 55. Al igual que así. ¿Bien? Hasta el momento tan bueno. Bien. Ahora bien, si vienes por aquí, esta es una aplicación de página completa, verás cómo está mostrando el color y aquí también, puedes cambiar esto, ¿verdad? Ahora bien, si por alguna razón, si no te están gustando estos parches blancos al lado todo el div donde estás renderizando esta ala pica. Todo esto se está renderizando en el ala pico y ahí está este parche blanco. Este parche blanco, no hemos agregado. Lo que puedes hacer es aquí, si quieres restablecer los estilos predeterminados, lo que puedes hacer es agregar estrella aquí. Se puede decir margen, margen cero, y yo diré relleno cero. Bien, guardemos esto y veamos. Bien, puedes ver que se fue, ¿verdad? Entonces sí, esto está funcionando absolutamente bien. Si lo desea, puede agregar una especie de gorra aquí en la parte superior de arriba del selector de color Entonces puedes venir a la base de código por aquí y aquí, si ves, tenemos esta app por aquí, ¿verdad? Entonces esta app, lo que puedes hacer es dentro de esta app, tenemos selector de C. Entonces aquí, si vienes con una app, puedes agregar un padding por aquí de 40 pixeles como este. Y si guardas el archivo, tendrás un acolchado decente en la parte superior, y podrás jugar con esto. ¿Bien? Entonces esto se ve decente y bastante bien. Puedes jugar con el recogedor de colo aquí así. Bien puedes ver cómo es cómo está cambiando el color, ¿verdad? Entonces sí, eso es sobre el seleccionador de color, y este seleccionador de color nos ha ayudado a reforzar el concepto de estados y cómo los estados pueden jugar un papel vital en los componentes de reacción Y se puede ver cómo está cambiando el color de fondo, esencialmente. Es cambiar el UY sin que ni siquiera refresques la página Entonces esto es muy, muy bueno, y esta es la razón por la que me encanta reaccionar. ¿Todo bien? Espero que hayas podido seguirlo, y espero que esto haya sido útil. 10. Primeros pasos con useEffect: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar del efecto de uso enganchar en reaccionar. Ahora bien, ¿qué es usar el gancho de efecto? ¿Bien? Entonces aquí, tengo un nuevo proyecto react con algún código comentado, que nos va a ayudar a entender este concepto, y luego también haremos lo práctico para entender esto aún mejor. Entonces, para decirlo simplemente use effect hook in react te permite ejecutar algún código automáticamente cuando algo cambia o cuando se carga un componente. ¿Bien? Ahora bien, cuando digo cargas de componentes, significa que el componente se renderiza por primera vez o se monta, ¿de acuerdo? Entonces puede haber varios tipos de cosas que quieras hacer o quizás quieras ejecutar o quizás quieras hacer algo cuando algo cambia en la aplicación o cuando cambia en la aplicación se carga un componente, ¿de acuerdo? Entonces es como configurar una tarea para que suceda después actualice la pantalla o cuando un cierto tipo de datos esté listo, ¿de acuerdo? Ahora, si buscas en línea sobre el efecto de uso, una definición común que encontrarás es use effect hook in react te permite realizar efectos secundarios en componentes funcionales. ¿Bien? Verás este término efectos secundarios. Ahora bien, lo que esto significa es que se ejecuta después de que el componente se renderiza, y se puede utilizar para tareas como obtener datos, actualizar la cúpula o configurar cualquier tipo de suscripciones si así lo desea ¿Bien? Ahora bien, estas tareas que son importantes, pero no están directamente relacionadas con el renderizado, ¿de acuerdo? Se les conoce como efectos secundarios, ¿de acuerdo? Y eso es también de lo que estoy hablando por aquí. Use Effect Hook en react le permite ejecutar código automáticamente cuando algo cambia o cuando se carga un componente. ¿Bien? Ahora, después de que se cargue el componente, es posible que desee obtener algún tipo de datos de la API, ¿verdad O es posible que desee obtener los datos de la API cuando algo cambia en la aplicación, ¿verdad Por ejemplo, se actualiza un estado, ¿verdad? Por lo tanto, es posible que desee obtener los nuevos datos del servidor. Entonces en ese caso, se puede hacer uso del gancho de efecto de uso. Y esta obtención de datos también se conoce como efecto secundario, ¿verdad? Entonces es básicamente una tarea que debes hacer después de tu tarea principal, ¿verdad? Entonces para eso es lo que es usar efecto gancho gancho para ponerlo realmente simple. Bien. Y aquí hay una sintaxis por aquí. ¿Bien? Esta es la sintaxis, se puede ver. Entonces tengo efecto de uso, ¿de acuerdo? Y dentro de estos paréntesis, ¿de acuerdo? Entonces 1 segundo. Voy a cortar esto por aquí. Estoy haciendo uso del efecto de uso de esta manera. Necesito importar esto en la parte superior cada vez que lo estoy usando, y si lo pego por aquí, tengo esta función dentro. Entonces esta es una función que puedes ver, la parte seleccionada. Y esto básicamente consiste en el código que quieres ejecutar como efecto secundario, derecho, o la acción que quieres realizar, esto se está pasando como la función de flecha como puedes ver por aquí. Bien. Ahora bien, este código puede ser cualquier cosa como hacer una llamada a la EPA, como dije, o actualizar cualquier tipo de suscripción o cualquier tipo de cosa que quieras hacer, ¿verdad? Y por aquí, tienes array para dependencia. ¿Bien? Ahora bien, lo que esto significa es, esta es la dependencia, ¿de acuerdo? Eso es que básicamente está siendo vigilado, ¿de acuerdo? Y siempre que haya algún cambio en esta dependencia, se ejecuta este código. Así es como funciona, ¿verdad? Entonces aquí, si ves la definición decía, Use effect hook in react te permite ejecutar código sum automáticamente, cual es este código, es este código el que mencionaste aquí, ¿verdad? Entonces este es ese código de suma, que te permite ejecutar automáticamente cuando algo cambia o cuando se carga un componente. ¿Bien? Cuando algo cambia, entonces, ¿qué es eso de aquí? Entonces esa es la dependencia de la que estamos hablando. ¿Bien? Entonces cuando esta dependencia cambia, si has especificado una dependencia, por supuesto, esto es opcional. Si has especificado una dependencia, entonces este código se ejecutará cada vez que haya algún cambio en la dependencia. Y aquí puedes ver, estas son diferentes variaciones de uso efecto gancho en el que se puede utilizar. Esta es la primera. Bien. Ahora por aquí, no hay una matriz de dependencias. Se puede ver que no hay una matriz de dependencias. Si quiero especificar, puedo especificar la matriz de dependencias así, pero aquí no hay ninguna matriz de dependencias. Entonces, sin la matriz de dependencias o sin especificar ningún tipo de dependencia, esto se ejecutaría en cada render. Entonces, siempre que haya algún tipo de renderizado que se haga, este código que especifique dentro de esta función de flecha se ejecutaría. Bien. Y esta es otra variación donde se tiene una matriz de dependencias. ¿Bien? Aquí puede especificar valores separados por comas Lo siento, este no es el que tiene la matriz de dependencias. Este es el que tiene la matriz de dependencias vacía. Bien. Entonces tengo el tercero con la dependencia agregada. Bien. ¿Qué sucede si tienes una matriz de dependencias vacía? Por lo que se ejecuta sólo después del render inicial. Entonces, cuando el componente monta o se renderiza por primera vez, ese es el único momento en que esto se ejecutaría. Bien. Y esta es una tercera variación que tenemos por aquí, en la que tenemos cuenta. ¿Bien? Ahora, count es la dependencia en base a la cual se ejecutará este código. Entonces, si hay algún tipo de actualización por aquí en el conteo, bien, esto se ejecutaría, ¿verdad? Eso es lo que significa, ¿de acuerdo? Y también se ejecuta en render inicial, y cuando cambia el conteo, eso es lo que significa. ¿Bien? Entonces espero que esto quede bastante claro desde el punto de vista teórico, correcto, para decirlo simplemente use efecto Hk Bien, esta es la definición más simple que podría tener usar effect hook and react, te permite ejecutar algún código automáticamente cuando algo cambia o cuando un componente se cargaría. ¿Todo bien? Entonces eso es usar gancho de efecto para ti. Ahora, antes de usar use effect hook, lo que voy a hacer por aquí es un scroll hacia abajo, y por aquí, tengamos un ejemplo sin usar efecto hook primero. ¿Bien? Entonces aquí en esta aplicación en particular, solo tengo este encabezado normal que estoy regresando y se puede ver esta salida en la pantalla aquí, gancho de efecto, ¿de acuerdo? Lo que voy a hacer es que voy a crear un conteo por aquí, claro, voy a hacer uso del gancho estatal por aquí. ¿Bien? Y voy a decir contar aquí y voy a decir set count, que es el mar, y voy a decir use state por aquí y lo inicializaré a cero ¿Bien? Ahora, lo que voy a hacer lo siguiente por aquí es que voy a tener conteo de incrementos, bien. Y por aquí, voy a decir que esta es una función de flecha. Por aquí. Bien. Y lo que voy a hacer es cuando se llame a esta función, voy a actualizar el conteo por aquí, ¿de acuerdo? Entonces voy a decir contar más uno, algo así. Bien. También voy a actualizar el título, ¿de acuerdo? Así que documente. El título es igual a, y voy a tener los literales de plantilla por aquí. Diré que cuente. Entonces dentro de backticks, tengo conteo, y voy a decir más alto, y voy a decir contar más uno, algo así ¿Bien? Todavía no estamos haciendo uso de esta función. ¿Bien? Tenemos que hacer uso de ella. Entonces aquí, voy a entrar, y por aquí, voy a añadir un botón. ¿Bien? Entonces este es simple botón. ¿Bien? Y lo que hace es que dice incremento por aquí Bien. Y aquí por el lado, tiene al click algo como esto, y voy a decir conteo de incrementos. Voy a guardar esto. ¿Bien? Entonces este es un botón que tengo, bien, y puedes ver por aquí. El título dice qué más reaccionar, ¿verdad? Entonces puedo decir incremento y está actualizando el título, ¿no? Se puede ver que se está actualizando el conteo, ¿ verdad? En el título, se puede ver. Derecha. Entonces este es un ejemplo sin uso efecto gancho. Y cada vez que se hace clic en el botón, la función de incremento actualiza directamente el título del documento Esto funciona, pero esto no es lo ideal porque es difícil de administrar y mantener, especialmente cuando la app crece. Esto es sin usar efecto gancho, ¿verdad? Ahora podemos hacer la transición de este ejemplo al gancho de efecto de uso y ¿cómo lo haríamos? Así que lo que haría es decir, Oh, déjame que tenga esto por aquí, ¿de acuerdo? Y me desplazaré hacia arriba, bien. Y por aquí, voy a decir efecto de uso. En el momento en que digo usa efecto así, ¿de acuerdo? Y si presiono Enter, vamos a desplazarnos hacia arriba y ver si se ha agregado la entrada. Entonces se ha agregado la entrada, se puede ver por aquí en la parte superior, junto con el estado de uso. Y si te desplazas hacia abajo, eliges efecto, necesito hacer uso de la sintaxis T para que incluso pueda copiarla. Entonces quiero usar el que tiene la dependencia, ¿no? Así que me llevaré este de aquí. Bien. Y lo que haría es por aquí, puedo tener el código, o dentro de esto. Entonces el efecto secundario de aquí es este código, ¿verdad? Así que voy a cortar esto y lo voy a mover a esta función en particular por aquí. Bien. Entonces tengo el conteo de incrementos separado, y este es un gancho de efecto de uso que se ejecuta, ¿de acuerdo? Uy. Entonces entra este pop up. Bien. Entonces se ejecuta este gancho de efecto de uso, ¿de acuerdo? Cuando se actualice el conteo, cualquier cambio en el conteo activará este código para que se ejecute, ¿ verdad? ¿Y qué está haciendo este código? Esto es actualizar el título del documento. ¿Bien? ¿Cuál es la tarea principal? La tarea principal era sólo actualizar el conteo con esta función. Y después de actualizar el conteo, tenemos un gancho de efecto de uso, que es asegurarnos de ejecutar algún código adicional una vez que se hayan realizado los cambios para contar. Todo bien. Espero que esto tenga sentido. Así que voy a guardar esto por aquí, y voy a refrescarme. Bien. Ahora puedes ver aquí, estás viendo el conde Colin uno, ¿verdad Ni siquiera hemos hecho clic en el botón todavía. Está diciendo que cuente Colin uno. Todo bien. Mientras que en el ejemplo anterior, así que voy a cortar esto, voy o simplemente voy a copiar esto, ¿de acuerdo? Simplemente voy a comentar esto, y sólo voy a volver al ejemplo anterior. Entonces este es nuestro ejemplo anterior. En el ejemplo anterior, cuando no pulsamos el botón, teníamos Wt plus react, que es el título predeterminado de aquí. No estamos viendo contar más uno por aquí porque el título está establecido, claro, cuando se hace clic en el botón, ¿verdad? Entonces, cuando hago clic en el botón, se actualiza para contar uno, contar dos, y así sucesivamente, ¿verdad? Pero en este caso, por aquí, ¿de acuerdo? Déjame solo para controlar. Entonces. En este caso por aquí, ¿de acuerdo? Entonces voy a tener el conteo por aquí, el conteo más uno. Bien. Entonces en este caso por aquí, veo la cuenta cero. ¿Correcto? ¿Por qué es esto cero? ¿Por qué lo veo actualizado en el título? Porque si ves por aquí, va a correr. Si estás haciendo uso de dependencias por aquí, se ejecuta en el render inicial y cuando cambia el conteo Entonces ya se está ejecutando en render inicial. Pero este no fue el caso. Entonces esta cosa cuando esto estaba en la función y esto fue comentado, o no existía. En ese momento, no se estaba ejecutando en el render inicial. Se puede ver, no se está ejecutando en el render inicial. Y cada vez que hacías clic, mostraba la actualización por aquí, ¿verdad Entonces sí, eso es lo que pasa por aquí ahora mismo. Entonces esto explica que esto corre en el primer azar, ¿verdad? Entonces, si guardo esta F cuenta cero, y puedo incrementar esto, bien, cuantas veces quiera, y verán la actualización del título sucediendo Y esto está empatado básicamente a contar. Un cambio en el conteo activará este código por aquí, ¿de acuerdo? Este código que he escrito. Bien. Este código se activará, ¿verdad? Y, sí, todo esto se debe a la matriz de dependencias. Por lo tanto, la matriz de dependencias asegura que esto solo se active cuando se actualiza el recuento y en cualquier otro momento. Todo bien. Entonces espero usar efecto gancho sea bastante claro para todos ustedes en cuanto a qué es y cómo funciona. Entonces, para decirlo simplemente Use effect hook and react te permite ejecutar código automáticamente cuando algo cambia o cuando se carga un componente, ¿verdad? Es como configurar una tarea para que suceda después actualice la pantalla o cuando un cierto tipo de datos esté listo, ¿verdad? Ahora bien, lo que esto significa es que cuando cierto tipo de datos está listo, podrías estar realizando algún tipo de procesamiento, ¿verdad? Y podrías estar asignando esos datos de proceso a un estado. Se puede tener un efecto de uso gancho atado a ese estado. Y siempre que los datos estén listos y estén asignados a esa variable de estado, el efecto de uso es estricto, ¿verdad? Entonces eso es lo que significa cuando dices cuando ciertos datos están listos, ¿verdad? Y por aquí, tienes estas diferentes variaciones de efecto de uso, y esta es la sintaxis, la sintaxis principal. Todo bien. Espero que esto haya sido útil y espero que hayan podido seguirlo. 11. Desmitifica las matrices de dependencia: controla el comportamiento de useEffect: Oye, ahí. Bienvenida. Y vamos a echar un vistazo a la importancia de la matriz de dependencias en el gancho de efecto de uso, ¿verdad? Entonces echemos un vistazo a este ejemplo. Entonces aquí en este ejemplo, tengo un proyecto reactivo muy simple, y dentro de la app JSX, tengo este componente app en donde simplemente estoy devolviendo un dif con un encabezado y un click de botón Lo que hace el clic de botón es que está actualizando el estado. Por supuesto, tenemos un estado llamado count por aquí con la ayuda de use state, y estamos haciendo uso de use effect hook, donde si hay algún cambio en el conteo, estamos actualizando el título del documento. Todo bien. Entonces esto es lo que es el código. Es bastante sencillo, y estoy renderizando este componente aquí en punto principal GSX como puedes ver, ¿de acuerdo? Entonces, lo que haría es sobrecargar a app dot JSX, y nuestro objetivo es entender la importancia de la matriz de dependencias que tenemos Entonces esta es la matriz de dependencias que tenemos. ¿Todo bien? Ahora, ahora, lo primero, bien, lo que haría es que esta matriz de dependencias está directamente ligada a cómo se ejecuta el hook de efecto de uso o cuántas veces se ejecuta y cuándo se ejecuta. Entonces para rastrear eso, lo que voy a hacer es decir Console dot Iniciar sesión por aquí, ok. Y simplemente voy a tener un mensaje por aquí. Diré efecto de uso. Activado, algo así. Todo bien. Y puedo deshacerme de esto. I No quiero actualizar el título. ¿Bien? Yo sólo me quedaré con la cerradura de la consola por aquí. ¿Bien? Voy a guardar esto y podemos ver las cerraduras de aquí en inspeccionar. ¿Bien? Entonces iré a inspeccionar, iré a Consola y verás que el Efecto de U ha sido activado. ¿Todo bien? NiFi refresh, ya verás, bien, se está activando dos veces por aquí. ¿Bien? Debería activarse idealmente una vez. Bien. Ahora te voy a decir lo que está pasando. Entonces el gancho de efecto Jos con una matriz de dependencias se activa una vez cuando se monta el componente y cuando hay algún cambio en la matriz de dependencias. ¿Bien? Entonces en este momento se está activando cuando se monta el componente. ¿Bien? no hay ningún cambio en el valor de la matriz de dependencias Aquí no hay ningún cambio en el valor de la matriz de dependencias. Entonces no estamos actualizando el conteo de refrescar, ¿verdad? Entonces solo se está renderizando por una sola vez, pero estamos viendo el registro de puntos de consola dos veces por aquí, ¿de acuerdo? Y esto es porque estamos en modo de desarrollo. Y cuando estás en modo desarrollo por aquí, realidad estamos ejecutando esta aplicación react en el modo estricto por aquí, si ves. Entonces si vas al punto principal JSX en el proyecto, realidad estoy ejecutando esto en el estricto Bien. Ahora bien, si no quieres ver esto dos veces, bien, lo que puedes hacer es simplemente deshacerte de este modo estricto de aquí. Aunque se recomienda el modo estricto cuando estás en modo de desarrollo, ya que comprueba si hay problemas potenciales y cualquier tipo de prácticas de código inseguras cuando estás en desarrollo. ¿Bien? Pero estábamos viendo el mensaje dos veces porque la reacción se estaba ejecutando en modo estricto. Y una vez que me deshaga de esto, si guardo esto, verá que lo veo sólo una vez. ¿Bien? Entonces puedes ver usar efecto gancho se activa una vez, ¿verdad? Ahora lo que podemos hacer es aquí, jugaremos alrededor de una mascota con el efecto de uso. ¿Todo bien? Ahora bien, si digo incremento, verás que se está activando cada vez que haga clic en incremento. ¿Y por qué sucede esto? ¿Bien? Esto está sucediendo porque este efecto está atado para contar aquí. Y siempre que haya algún tipo de cambio en el conteo, ya sea incremento, decremento, estoy haciendo algún tipo de cambio en el conteo, este código va a activarse, Y eso es lo que estamos diciendo aquí. ¿Todo bien? Ahora, lo que podemos hacer es deshacernos de esto. Bien. Ahora, ¿qué va a pasar? ¿Bien? Así que lo haré refrescar, y limpiaré la consola, ¿de acuerdo? Entonces lo haré refrescar. Se activa por primera vez cuando se monta el componente, claro, ¿verdad? Ni lucha clic incremento, va a ser disparado cada vez ¿Bien? Pero ahora verás que la salida es sm por tener una matriz de dependencias y sin una dependencia a Entonces, ¿cuál es la diferencia, bien? La diferencia aquí es que sin una matriz de dependencias, se activará en cualquier tipo de cambio o cualquier tipo de renderizado en el componente, derecho, o cualquier tipo de re renderizado en el componente. Pero con la matriz de dependencias, se activará solo cuando se actualice el recuento. Todo bien. Entonces déjame mostrarte esto. ¿Bien? Y para demostrarlo, lo que voy a hacer es introducir una variable de estado más. Voy a llamar a esto otro valor por aquí, ¿de acuerdo? Y voy a decir establecer otro valor como este. Bien. Y voy a decir usar estado por aquí, y esto puede ser, digamos, o simplemente pondré esto en diez, ¿de acuerdo? Veamos qué pasa. Todo bien. Y aquí, voy a bajar. Duplicaré este botón de aquí en la parte inferior. ¿Bien? Y lo que voy a hacer es llamar a esto otro valor. Algo como esto. Bien. Entonces tenemos un botón más. Pero en lugar de actualizar el conteo, voy a actualizar otro valor por aquí. Todo bien. Y voy a decir otro valor más uno, ¿verdad? Entonces esto está hecho, bien. Esto es algo que estamos haciendo. Todo bien. Ahora veamos la importancia de la matriz de dependencias. ¿Todo bien? Yo he guardado esto. Bien. Déjame refrescarme. Entonces puedes ver Usar efecto gancho se activa, o cuando el componente se renderiza por primera vez o el componente se monta. Ahora si digo incremento, se va a activar cada vez que haga clic en el incremento Eso es por supuesto, ¿verdad? Pero si hago clic en otro valor, no se va a activar. ¿Por qué? ¿Por qué? Entonces la respuesta para esto es porque está atado al cambio de valor en el estado de conteo, correcto, y no en otro valor. Y por eso no se está activando. ¿Bien? Ahora bien, si me deshago de contar por aquí, bien. Ahora bien, si actualizo, verás que se activa una vez en la carga del componente. Si digo incremento, se está activando. Si digo otro valor, se está activando de nuevo. ¿Bien? Se puede ver. Entonces se está renderizando para cualquier tipo de cambio en el componente. Y esto se debe a que no hay una matriz de dependencias, ¿verdad? No hay matriz de dependencias. ¿Bien? Ahora, digamos si agrego una matriz de dependencias vacía. Así que permítanme agregar una matriz de dependencia vacía. Entonces, ¿qué pasaría? Si actualizo, se activa por primera vez aquí, se puede ver, ahora, cualquier tipo de cambio, no se activará porque matriz de dependencias vacía se asegura de que el componente se renderice o se active el efecto de uso. Lo siento, el efecto de uso se activa solo por primera vez cuando se monta el componente. ¿Bien? Entonces espero que tengas algo de claridad decente, ¿de acuerdo? Y espero que puedan ver cómo esta matriz de dependencias hace mucha diferencia, ¿de acuerdo? Entonces, si estás realizando algún tipo de operación por aquí, eso es un poco pesado, ¿de acuerdo? Aquí es un punto y coma. Acabo de añadir eso. Entonces, si está realizando algún tipo de operaciones que sea un poco pesada y que consuma mucho tiempo aquí dentro de este gancho de efecto de uso, entonces esta matriz de dependencias puede decidir el rendimiento. ¿Bien? Por lo tanto, debe asegurarse de que tiene que asegurarse que este gancho de efecto de uso se ejecute solo en el momento adecuado cuando realmente necesitaba ejecutar. Bien. Si por alguna razón, tienes una tarea larga por aquí, digamos, una tarea de procesamiento alto, y si pierdes la matriz de dependencias, entonces te va a dar un rendimiento realmente malo, ¿de acuerdo? Pero digamos que si tienes una variable, bien, y quieres monitorear los cambios en esa variable, y si quieres hacer esta acción en particular solo cuando hay el cambio en esa variable en particular, en ese caso, debes incluir o vincular esto a esa variable en particular, y debes agregar esa variable, variable estado, sea lo que sea, aquí en la matriz de dependencias. Y siempre que haya algún cambio, el gancho de efecto de uso se activará solo diez. Ahora habrá algunos escenarios en los que quizás quieras hacer algún tipo de limpieza cuando el componente se carga por primera vez, ¿verdad? Entonces puedes tener usar effect hook en ese caso con una matriz de dependencias vacía, porque eres quieres hacer esa tarea de limpieza justo cuando el componente está cargado y no después de eso. Entonces puedes tener un área de dependencia vacía para eso. Entonces se renderizará como viste. Ahora mismo, tenemos un área de dependencia vacía, por lo que se renderizará o se ejecutará sólo una vez cuando se renderice el componente y no después de eso. Entonces espero que este ejemplo te dé una claridad decente de cómo funciona el uso de Effect Hook y cómo es importante esta matriz de dependencias que existe, ¿verdad? Entonces espero que tengas claridad de diferentes escenarios en cómo se ejecuta y gestiona esto, ¿verdad? Entonces, si tienes la matriz de dependencias mencionada, como cualquier tipo de valor, entonces esta función que estás especificando se ejecutará solo cuando haya algún cambio o actualización en este valor en particular, ¿verdad? Y por supuesto, también se ejecutará en el primer render. ¿Correcto? Si desea que se ejecute solo en el primer render, especifique una matriz de dependencias vacía. Si tiene algo que desea ejecutar en cualquier tipo de cambio en la interfaz de usuario o cualquier tipo de renderizado que ocurra, bien, simplemente omita la matriz de dependencias. Bien. Pero recuerda que se activará cada vez que haya re renderizado. Todo bien. Así que ten en cuenta el rendimiento. Todo bien. Espero que esto haya sido útil, bien. Y sí, deshabilitamos el modo estricto por aquí. Simplemente puedes mantener o apegarte al modo estricto. Porque se recomienda el modo estricto en modo de desarrollo. Así que acabo de modificar esto porque no quería ejecutar use Effect hook dos veces en el renderizado de componentes por primera vez, ¿verdad? Entonces había quitado eso. Pero sí, así es como funcionarían las cosas, y espero que esto sea claro para todos ustedes. 12. Proyecto práctico: crea un rastreador de ratones en tiempo real con useEffect: Bienvenidos a este video en particular donde vamos a construir nuestro propio rastreador de mouse, y vamos a hacer uso del gancho de efecto de uso para el mismo. ¿Bien? Así que aquí en mi pantalla, se puede ver esta aplicación donde me está mostrando la posición del ratón a medida que lo estoy moviendo. ¿Bien? Así que es completamente en tiempo real, y estamos haciendo uso del efecto de uso hook por aquí para esta aplicación en particular. Bien. Por lo que esto nos ayudará a practicar algunos conceptos de reacción, y nos ayudará a conseguir un proyecto en nuestra cartera. Bien. Entonces es un proyecto muy sencillo, ¿verdad? Y vamos a saltar de inmediato. Entonces aquí estoy en código VS, código Visual Studio, y tengo mi navegador abierto uno al lado del otro. He creado un proyecto VA muy simple usando VT, y puedes ver que estoy aquí en app dot GSX, que se está renderizando a través de media punto GSX ¿Todo bien? Tengo un archivo CSS dos. Aquí con CSS muy básico. Es un CSS estándar que puedo llamarlo. ¿Bien? Tienes familia telefónica, tienes texto alinear el centro, relleno y margen establecido en cero, ¿de acuerdo? Vaya, y la parte superior acolchada es de 40 píxeles y la altura mínima de esta. Bien. Entonces, lo que vamos a hacer es construir nuestro propio rastreador de mouse. Ahora, primero lo primero, lo que necesitamos es que tenemos que tener un estado por aquí. Voy a llamar a este estado como posición del ratón. Bien. Y esto nos va a ayudar a rastrear la posición del ratón. Entonces esto va a tener la última posición del mouse, y también necesita actualizarse cada vez que cambie la posición del mouse. Y voy a hacer uso del estado de uso por aquí. En el momento en que nos agrego estado, verás esta entrada agregada en la parte superior, ¿de acuerdo? Y esto básicamente mantendrá la posición en forma de pares de valores clave. Entonces voy a tener X, colon cero. Entonces esta es la posición de X, y esta es la posición Y. Entonces sí. Esto está hecho. Bien. Ahora lo que tenemos que hacer es que necesitamos tener necesitamos tener un necesitamos cambiar la interfaz. Bien necesitamos tener un rumbo, así que voy a decir posición del ratón. Bien, y mostraremos esta posición del ratón por aquí. Bien. Entonces voy a decir etiqueta P y voy a decir X, dos puntos y voy a decir la posición del ratón punto X por aquí. Bien. Y también tengo posición Y. ¿Bien? Voy a decir Y dos puntos y voy a mostrar la posición Y como posición del ratón punto Y, algo así. Bien. Para que pueda ver la posición del mouse que se muestra. Actualmente es 00 porque eso es a lo que lo hemos inicializado . Bien. Ahora lo que tenemos que hacer es aquí, voy a hacer uso del efecto de uso y a través del efecto de uso por aquí, tenemos al oyente y todo gestionado ¿Bien? Así que aquí, use effect, ok y dentro de use effect, tengo esta función de flecha por aquí, algo así, y tengo una matriz de dependencias. ¿Todo bien? Así será el anzuelo, ¿verdad? Cuando se agrega el efecto de uso, tome nota de que esta entrada se agregó en la parte superior automáticamente. ¿Todo bien? Ahora por aquí, lo que voy a hacer es que voy a tener esta matriz de dependencias vacía, o y dentro de esto, voy a agregar de función. Bien. Entonces voy a decir manejar, mover el ratón por aquí. ¿Bien? Y va a aceptar evento, y aquí tengo una función de flecha creada. ¿Bien? Entonces esto es lo que estoy creando y aquí, voy a decir establecer la posición del mouse. ¿Bien? los asientos llamando a esto, establecer la posición del mouse, y voy a decir X Clineventt cliente X. Bien. Entonces esto es actualizar los asientos llamando a esto, establecer la posición del mouse, y voy a decir X Clineventt cliente X. Bien. Y voy a decir y, Colin, evento, punto, cliente, Y, algo así ¿Bien? Entonces sí, esto se hace por aquí. Y entonces lo que voy a hacer es que voy a agregar un oyente a Windows Voy a decir Punto de ventana, agregar oyente de eventos, algo así, y voy a agregar un oyente de movimiento de mouse. ¿Bien? Entonces voy a decir movimiento del ratón, éste. Quiero que esto se active en cualquier tipo de movimiento del mouse, ¿verdad, para poder rastrearlo en tiempo real, verdad? Y voy a decir manejar el movimiento del ratón. Bien. Espero que esto tenga sentido. Lo que estamos haciendo es simplemente estamos agregando un oyente a la ventana ¿Bien? Esto es una ventana. Estamos agregando un oyente por allá, estamos viendo mover el ratón oyente Por lo que rastreará cada movimiento del mouse, y básicamente tendrá este movimiento del mouse de mango que se está ejecutando. ¿Bien? Entonces voy a guardar esto. Y si vienes por aquí, puedes ver que está funcionando bien. Se puede ver el puesto en tiempo real, ¿verdad? Entonces sí, este es el rastreador del mouse con la ayuda del gancho de efecto de uso. Y espero que tengan alguna buena claridad en cuanto a cómo se puede hacer uso del efecto de uso gancho a las buenas prácticas. 13. Limpia como un profesional: domina las funciones de limpieza en usoEffect: Entonces ahora es el momento de que hablemos un poco más sobre la aplicación de rastreo de mouse que arrojamos. Entonces por aquí, estamos adjuntando un oyente de eventos a la ventana, ¿de acuerdo? Ahora, hay un pequeño problema, ¿de acuerdo? No hay limpieza que estemos haciendo, ¿verdad? El oyente de eventos que estamos agregando permanece activo incluso cuando el componente está desmontado Bien, y esto puede provocar fugas de memoria y sobrecarga de rendimiento innecesaria a medida que el oyente continúa ejecutándose ¿Bien? Entonces esto no es bueno, y deberíamos manejarlo con efecto de uso. Por lo tanto, use effect puede permitirnos incluir una función de limpieza para eliminar el oyente de eventos cuando el componente se desmonta y esto asegura que los recursos se liberen correctamente, y evita las posibles fugas de memoria también. ¿Bien? Entonces, ¿qué es la función de limpieza? La función de limpieza es una especie de función que se nos proporciona con efecto de uso donde se puede hacer la limpieza, ¿ Entonces puedes hacer un tipo de tareas de limpieza como eliminar los oyentes de eventos o si tienes algún tipo de temporizadores funcionando, y si el componente se desmonta, puedes cancelar esos temporizadores y todo este tipo de cosas Y esto mantiene tu app eficiente y libre de errores. ¿Bien? ¿Cómo agregamos un oyente de eventos Entonces por aquí, lo que voy a hacer es después de que el oyente se agregue por aquí, voy a decir regreso, ¿de acuerdo? Y voy a tener una función de flecha por aquí. Cosa como esta. Al igual que así. Bien. Y por aquí, simplemente voy a decir, voy a tener el código para limpiar dentro de esta función de limpieza Entonces esta es una función de limpieza por aquí. Voy a decir ventana punto eliminar oyente de eventos. Se puede ver. ¿Cuál es el oyente de eventos que agregamos Entonces fue movimiento del ratón. Este era el oyente de eventos, y yo también tengo al oyente Tengo asa ratón mover por aquí. ¿Bien? Entonces me quitan esto, y aquí, puedes hacer un registro de consola si lo deseas, ¿de acuerdo? Puedes hacer un registro de consola si lo deseas. Pero ahora mismo, no vamos a estar viendo ningún tipo de salida porque esto se activa cuando se desmonta el componente, ¿verdad Entonces lo que haríamos es en lugar de agregar un registro de consola por aquí, primero activaremos un desmonte manual, derecho, agregaremos un botón que nos permitirá montar y desmontar el componente para que podamos ver cómo está funcionando este oyente Entonces, lo que haría es mover todo este código de hecho, ¿de acuerdo? Voy a mover todo este código, de hecho, a otro componente. Y en este componente app, voy a añadir un componente padre. ¿Bien? Entonces tendremos un componente padre que cargará este rastreador de mouse y también tendrá un botón para descargar. ¿Bien? Entonces déjame mostrarte de lo que estoy hablando. Entonces aquí, voy a crear un nuevo archivo. Diré mouse, tracker dot JSX, algo así. Voy a pegar esto por aquí. Y en lugar de exportar la app por aquí, solo diré mouse, tracker. ¿Bien? Esta es una función. Este es un nombre de componente, ¿verdad? Entonces esto es lo que es el nombre del componente en estos momentos. Y aquí en app dot JSX, lo que tenemos que hacer es deshacernos de esto Realizaremos algún tipo de limpieza, y solo agregaremos el componente padre aquí Bien. Así que me voy a deshacer de todo este código de aquí. Bien. Y sí, esto se queda en la aplicación, y necesitamos renderizar el componente padre por aquí. ¿Bien? Nos desharemos de esto. Todo bien. Aquí estamos recibiendo un error porque no hay nada que estemos renderizando, pero solo me quedaré con la televisión por ahora para que no tengamos ningún error. Voy a introducir un componente más llamado componente padre. Bien. Y voy a mantener separados los componentes padre. Diré componente padre punto SX. Así que aquí hemos agregado dos componentes. Todo bien. Y lo que yo haría es diría función. Bien, función, componente padre, algo así, y voy a añadir una exportación por aquí. Diré exportación por defecto, componente padre, me gusta Bien. Y por aquí, voy a añadir un estado. Entonces lo que haremos es mantener un estado tanto si quieres mostrar un componente como si no. ¿Bien? Entonces voy a decir show component, y voy a decir set show component. Algo como esto, voy a agregar usar gancho de estado por aquí. Bien. Ahora el estado de uso es cierto. Entonces por defecto, estamos mostrando esto es booleano Este estado tiene un valor de booleano, y puedo tener componente de alternancia constante, y voy a tener una función de flecha por aquí, Y dentro de esto, puedo decir set, show componente. Y aquí, voy a decir el valor anterior. ¿Bien? Así que solo invierta el valor anterior. Eso es lo que estamos diciendo aquí. Bien. Entonces sí, esto está hecho. Y lo que tengo que hacer ahora es que tengo que regresar por aquí. Entonces va a decir retorno, y voy a añadir una declaración de retorno. Bien, algo como esto. Gana esto, voy a tener un TF así. Bien, y voy a tener un botón. Bien. Ahora bien, ¿qué hace este botón? Así botón al hacer clic. Bien. Al hacer clic, alternará componente, Ls. Bien. Y por aquí, puedo hacer uso de operador ternario Entonces, si el componente show es verdadero, o entonces ¿qué hacemos? Tenemos este valor de desmontar rastreador, ¿de acuerdo? Al igual que el texto se muestra como rastreador de desmontaje. ¿Bien? Entonces voy a decir desmonte Y Rastreador de montaje. Y si el valor es fuerza, entonces diremos mount tracker. Entonces este texto también cambia, ¿verdad? Básicamente, eso es lo que significa. ¿Bien? Entonces tengo este botón hecho. ¿Bien? Y ahora lo que puedo hacer es que voy a tener este guión de Ja por aquí. Si es componente show, bien, entonces lo que tenemos que hacer es renderizaremos mouse tracker, algo así. Me gusta. Bien. Así que estamos renderizando condicionalmente el rastreador del mouse por aquí ¿Bien? Lo que está pasando es que estamos diciendo mostrar componente. Muestro componente es cierto, entonces estamos viendo render mouse tracker, ¿verdad? Entonces esto se hace, y por aquí, necesitamos en lugar de tf agregaré componente padre, así. L se puede ver que la app está por aquí, ¿no? Así se puede ver que esto está llegando. Puedo renderizar y un render. Se puede ver. Bien, puedo montar. Y desmontar Por lo que el componente está siendo montado y desmontado. ¿Bien? ¿Cómo funciona esto? Bien, acabamos de hacer un poco de refactorización. Agregamos un componente padre. ¿Bien? Primero, creamos dos archivos. Uno son dos archivos, o debería decir, dos componentes en archivos separados. Entonces este es el componente padre. ¿Bien? Contamos con componente de rastreador de mouse. Por lo tanto, el componente del rastreador del mouse es sencillo. Bien. Sólo tenemos este rastreador de ratón con gancho de efecto de uso y nos está mostrando la posición del ratón, ¿verdad? Y hemos agregado una función de limpieza por aquí. Entonces tenemos un componente padre que tiene este estado de componente show, que es polen y hay un botón que conmuta este valor de componente, este show valor de componente a true o false, ¿verdad? Y luego estamos renderizando el componente show de esta manera. ¿Bien? Entonces esto está atendido. Y luego en la app dot JSX, estamos mostrando solo el componente padre, Porque dentro del componente padre, en realidad estamos renderizando el componente de seguimiento del mouse, y eso es renderizado condicional con la ayuda del operador. Todo bien. Entonces esto se hace, y ahora lo que podemos hacer es que tengamos que ver cómo está funcionando esta función, ¿verdad? Entonces lo que voy a hacer es que necesitamos agregar, yo diría, necesitamos agregar el registro de puntos de consola por aquí. ¿Bien? Y necesitamos rastrear cómo se está agregando el oyente y cómo se está quitando Así que aquí, voy a decir Log, ¿de acuerdo? Y aquí, podemos decir mouse, mover, oyente agregado, algo así ¿Bien? Voy a quitar esto. Bien. Voy a copiar esto y aquí en la sentencia return, dentro de la función return, voy a ver el ratón mover oyente eliminado ¿Bien? Algo como esto. Ahora veamos la Consola. Voy a venir aquí. Vendré a Console. Bien. Se puede ver. Bien, primero, voy a hacer un refresco por aquí. Bien, actualiza, y puedes ver el rastreador de movimiento del mouse agregar, rastreador movimiento del mouse, agregarlo. Estoy como mover mi mouse por aquí, y tienes el rastreador mousemove agregado Lo siento, se agregó el oyente de movimiento del mouse. Y ahora desmonte, bien, verás que se quita el oyente de movimiento del ratón ¿Bien? Este no será el caso si no tienes esta función de limpieza Entonces, si no tienes esta función de limpieza, el oyente nunca se elimina. ¿Bien? Eso es lo que es el problema. Entonces, si refrescas, puedes ver que se agrega el oyente. Se puede ver que se agrega el oyente de movimiento del mouse, ¿verdad? Si desmonte el rastreador desmonte el oyente monte el componente, debería decir, se puede ver que no hay oyente que se esté quitando, ¿de acuerdo Entonces el oyente sigue ahí, y esto puede llevar a efectos secundarios o a cualquier tipo de parques Bien, porque tienes un oyente ahí fuera, ¿ verdad? Eso no se está utilizando. ¿Bien? Entonces puedes ver e imaginar cómo está funcionando bien esto, ¿de acuerdo? Por lo tanto montaje de montaje. Se ve que se le está agregando y ¿verdad? Entonces esto es lo que es una función de limpieza, ¿de acuerdo? Espero que esto te esté dando una idea de lo importante que es esto. El objetivo de esta función de limpieza es, por supuesto, como dice su nombre, se usa para limpiar, ¿verdad? Entonces, cualquier tipo de tarea de limpieza que quieras hacer, puedes hacerlo de esta manera ¿Bien? Esta es la sintaxis de aquí. Bien. Dentro de estas llaves, puedes tener todo tipo de tareas de limpieza, y puedes ver cómo se está activando esto en el desmonte del componente de aquí. ¿Correcto? Entonces espero que esto sea útil y espero que hayas podido seguirlo, y espero que ahora tengas una buena comprensión de cómo puedes hacer uso de Gancho de efecto enorme. 14. PROYECTO: desafía la creatividad al construir un reloj digital funcional con React: Oye, ahí. Entonces en este video en particular, vamos a construir este reloj digital que estás viendo en la pantalla. Entonces es un reloj digital muy sencillo, ¿de acuerdo? Vamos a eso va a mostrar el tiempo por aquí. Y puedes ver cómo está actualizando la interfaz de usuario. Se puede ver que hay segundos, minutos, horas, y se está visualizando todo el tiempo, derecho, básicamente. Esto es lo que vamos a construir, y vamos a hacer uso de conceptos de reacción e ir manos a la obra con ellos. ¿Bien? Entonces este es un proyecto de práctica que puede ayudarte a reforzar el aprendizaje que tienes con reaccionar hasta ahora. ¿Bien? Entonces sí, sin más preámbulos, saltemos directamente al código de Visual Studio. Bien, así que para empezar, tengo una configuración muy simple del proyecto React Chase por aquí, ¿de acuerdo? Estoy haciendo uso de T por aquí, y este es un proyecto de reacción persecución que tengo. Tengo app dot JSix que se está renderizando en media punto JSX, Y dentro de app dot JSX, he ingresado tengo este par de entradas en la parte superior Una definición de componente muy básica, correcto, y estoy exportando este componente por supuesto. Y dentro de App punto CSS, tengo un estilo muy básico que ves por aquí solo para, uh, al igual que esto no es mucho, bien, pero un estilo bastante simple que tengo en su lugar. Entonces vamos a construir este reloj digital desde cero, bien. Ahora, primero lo primero, lo que voy a hacer es que tengo este STIF bien, y tengo que actualizar la interfaz de usuario por aquí, por supuesto Pero antes de actualizar la interfaz de usuario, necesitamos tener tiempo y necesitamos almacenar el tiempo en forma de estado, ¿verdad? Entonces voy a decir const, diré tiempo. Vaya, me perdí esto. Entonces diré tiempo por aquí y diré tiempo establecido. Ahora, claro, aquí, voy a decir usar estado, ok. E inicializaré esto a nueva fecha ¿Bien? Algo como esto. Bien. Entonces, sea cual sea la nueva fecha que devuelva, eso es con lo que se inicializa. Todo bien. Ahora esto está hecho. ¿Bien? Ahora por aquí, voy a hacer uso de voy a hacer uso del efecto de uso por aquí. Ahora dentro del uso EfectHok, lo que vamos a hacer es que necesitamos actualizar esta vez, esta vez cada segundo, Y básicamente, eso es lo estaríamos haciendo porque esto necesita tener el tiempo actual, ¿verdad? Y el tiempo cambia cada segundo. Entonces necesitamos actualizar esta variable de calle cada segundo. ¿Bien? También vamos a tener limpiezas , así que déjanos hacerlo. Entonces vamos a decir efecto de uso por aquí. Bien. Voy a tener una función de flecha. Bien, algo como esto. Bien. Esta es la función de flecha, y por aquí, voy a tener una matriz de dependencias. Bien. Entonces sí, esto está hecho. Y lo que tenemos que hacer es aquí, voy a añadir algún código. Así que aquí, voy a decir contras temporizador ID. Bien. Entonces estoy recibiendo una identificación de temporizador o vamos a agregar esto más tarde. ¿Bien? Entonces lo que primero vamos a hacer es decir establecer intervalo. Bien. Estoy haciendo uso del intervalo establecido por aquí. Bien. Ahora, dentro del intervalo establecido, voy a tener así que no quiero esta función de flecha, ¿de acuerdo? No quiero esta función de flecha. Voy a decir que establezca tiempo aquí. Bien, establece la hora. Y así tengo la función de flecha. De hecho, dije, no quiero la función de flecha. Tengo función flecha, pero solo me quito las brisas rizadas, justo para que se vea un poco más limpio Bien, puedo tener el código escrito por aquí también. Entonces puedo decir que establezca tiempo por aquí. Entonces estoy actualizando el estado usando set time. Estoy diciendo nueva fecha, Bien, algo como esto, y de hecho puedo agregar mil por aquí. Bien, entonces aquí, puedo decir mil, algo así. Bien. Vaya, me perdí un soporte redondo, supongo, set time, set time, Nutt, algo así Bien, o 1 segundo. Bien, entonces esto no va a venir por aquí. Este es el intervalo. ¿Bien? Entonces este es el intervalo. Voy a venir aquí. ¿Bien? Entonces esto está hecho. Bien. Entonces esto es lo que es. Ahora, déjame explicarte lo que acabo de decir, bien, por si acaso te estás preguntando qué pasó. ¿Bien? Así que aquí, hice uso de la función set interval. Ahora, ¿qué es el intervalo establecido? Solo escribiré de nuevo el intervalo establecido. Establecer intervalo básicamente es una función JavaScript, ¿de acuerdo? Es una función básicamente repetida que ejecutará el bloque de código dentro él repetidamente después de un intervalo de tiempo establecido. ¿Bien? Y ¿cuál es el intervalo que estamos estableciendo? Así que puedes establecer cualquier tipo de intervalo por aquí, que será en milisegundos. Entonces si entro mil por aquí, significa que 1 segundo. Bien. Entonces, ¿qué estás dispuesto a hacer? ¿Cuál es el objetivo aquí? Queremos actualizar el tiempo cada segundo, ¿verdad? Queremos actualizar el tiempo cada segundo, ¿verdad? El tiempo debe actualizarse cada segundo, porque el tiempo cambia cada segundo, y estoy construyendo un reloj dinámico, ¿verdad? Así que estoy haciendo uso del intervalo establecido por aquí, establecer la función de intervalo. Se puede ver si me pongo el cursor sobre esto, probablemente estoy consiguiendo la documentación Programa la ejecución repetida de devolución de llamada cada demora milisegundos, ¿verdad? Entonces esta es la devolución de llamada que tenemos. Puedo simplificar esto en una sola línea. Puedo deshacerme de las llaves porque solo hay una línea de código Así que me voy a deshacer de esto. Esto es bastante sencillo. Bien. Espero que esto quede bastante claro en cuanto a lo que está sucediendo, establecer intervalo, bien. Entonces lo que estamos haciendo es que necesitamos incitar a establecer intervalo. Estamos actualizando el tiempo establecido por aquí, y estamos haciendo esto cada mil milisegundos. Entonces lo que tenemos que hacer es que necesitamos obtener el ID del temporizador por aquí porque también estaremos agregando una función de limpieza Entonces voy a decir const timer, ID, algo así Bien. Entonces esta es la identificación del temporizador que tenemos, ¿de acuerdo? Y entonces voy a tener una función más limpia así. Bien. Voy a añadir una función de flecha, y voy a decir intervalo claro. ¡Uy! Diré intervalo claro. Bien, y voy a decir hora o identificación. Entonces estoy limpiando el intervalo. Básicamente, esta es una limpieza que estoy haciendo. Todo bien. Entonces este es el código para actualizar la hora básicamente cada segundo. Eso es lo que hemos escrito aquí. ¿Bien? Esto es lo que hace. Ahora, por aquí, lo que podemos hacer es aquí, si vienes aquí, podemos mostrar la hora. Veamos lo que vemos como la salida. Bien, la salida no va a ser buena. No será de manera fácil de usar, pero aún así quiero mostrarte esto. Entonces si guardo esto, vaya. Entonces, literalmente, no hay salida aquí. Entonces no está mostrando nada porque estamos tratando de mostrar la fecha por aquí y estamos recibiendo un error, ¿de acuerdo? Entonces necesitas convertir esta fecha en una cadena. Entonces voy a decir, tenemos una función por aquí a cadena de tiempo local. Bien. Y puedo guardar esto y se puede ver el tiempo que se muestra por aquí, ¿verdad? Entonces esto es actualizarse cada segundo, ¿verdad? Ahora bien, lo que tenemos que hacer es formatear esto, bien. Entonces yo diría que esto está bien, pero necesito tener un mejor control sobre el tipo de formato que deseo tener para mi aplicación, ¿verdad? Entonces lo que voy a hacer aquí es que voy a tener una función. Voy a decir formatearlo, tiempo, y aquí. Entonces esto es en realidad, esto es hacer un trabajo. ¿Bien? No es una función, sino que está haciendo un trabajo de formatear el tiempo al formato correcto. ¿Bien? Entonces podemos hacerlo sin función. Entonces voy a decir hora punto dos local, dos cadena de hora local por aquí. Bien. Y podemos pasar en el local como en el formato, ¿bien? Entonces pasaré en el local como EN US, ¿de acuerdo? Y aquí, voy a especificar el formato, derecho. Entonces aquí puedo decir R, o Colón, diré dos dígitos, algo así. Podemos seguir este formato. R, colon para cavarlo por aquí. Entonces este formato tiene que ir en un par de llaves, bien. Entonces eso es algo que me perdí por aquí. Bien, R a dígito. Voy a venir aquí. Esto es minuto a dígito, algo así, y estos serán segundos para deshacerse Bien. Vaya, algo como esto En el momento que lo guardes, no verás ningún cambio porque estamos mostrando el tiempo. Es necesario mostrar la hora formateada. Así que tienes que venir aquí y deshacerte de todo esto y podrás mostrar el formato a la vez. ¿Bien? ¡Uy! Entonces el segundo no se está mostrando porque deberíamos agregar una coma aquí, probablemente Y déjame ver. Bien, entonces es segundo y no segundos. Bien. Sólo S marcó la diferencia, ¿verdad? Ya puedes ver que está en el formato. 08. Entonces antes no era 08. Eran las 8980 9:06 P.M Así que ahora estoy teniendo un mejor control sobre el formateo, Entonces sí, así es como se está ejecutando la aplicación, ¿de acuerdo? Y te voy a dar una idea de lo que está pasando aquí, ¿de acuerdo? Entonces primero, primero, cómo está funcionando esta aplicación, tenemos un componente. En la parte superior, estamos creando un estado que está manteniendo el estado inicial de la hora a la fecha y hora actuales, bien, usando esta nueva fecha. ¿Bien? Y tenemos este estado de tiempo y establecer la función de tiempo para actualizar el estado cada vez que cambie. Tenemos un enorme efecto gancho por aquí, bien. Y dentro de use effect hook, así que use effect hook esencialmente ejecuta el código dentro de él después de renderizar el componente, ¿de acuerdo? Y en este caso, se encarga de iniciar el temporizador que actualiza el reloj cada segundo, ¿bien? Entonces tenemos una dependencia vacía aquí lo recuerdo, y se está ejecutando inmediatamente después de renderizar el componente , ¿de acuerdo? Ahora lo que está sucediendo aquí es que estamos haciendo uso de la función set interval. Ahora, ¿qué hace set interval? Establecer intervalo es una función que nos permite ejecutar algún código repetidamente después de un intervalo de tiempo establecido. ¿Bien? Y aquí, el intervalo de tiempo que estamos establecidos es de 1,000 milisegundos, que es de 1 segundo ¿Bien? Y tenemos una función de limpieza que está borrando el intervalo usando el ID del temporizador que tenemos, y estamos formateando la fecha Lo sentimos, estamos formateando la hora a nuestro propio formato deseado, y estoy mostrando la hora de formato. Entonces, lo que está pasando es cada vez se vuelve a renderizar el componente, ¿de acuerdo? Así que cada vez que se actualiza la función de tiempo establecido por aquí. Se actualiza el estado, se vuelve a renderizar el componente, bien. Y cada vez que se llama a este tiempo establecido, se actualiza el tiempo, y cada vez que se llama a tiempo, se actualiza el tiempo formateado. Y cada vez que se actualiza el tiempo formateado, estás viendo el valor actualizado aquí. Bien. Entonces así es como funciona todo esto. Siempre que el estado de tiempo cambia, el componente se vuelve a renderizar y se muestra la hora recién formateada. ¿Bien? Y esta cosa recurrente está siendo establecida por la función set interval porque eso es lo que esa función en sí actualiza el estado de tiempo cada segundo. ¿Bien? Y cada vez que cambia el estado de tiempo, el componente se vuelve a renderizar y se muestra el tiempo formateado, y el proceso se repite, por lo que el tiempo se actualiza constantemente en tiempo real. Todo bien. Entonces espero que esto sea bueno. Y ahora tenemos que hacer un poco de, como, embellecimiento, yo diría, por aquí, ¿verdad Entonces lo que podemos hacer es mejorar el CSS para poder deshacerme de esta bienvenida en la parte superior. Bien. Y puedo añadir un TIF. Lo llamaré nombre de clase, y lo llamaré contenedor de reloj. Así que esto es exclusivamente para peinar aquí, ¿de acuerdo? Puedes agregar un tif más aquí. Puedo ver TIF. Bien. Y puedo mover esto, esto adentro por aquí. Bien, algo como esto. Bien. Y por aquí dentro del contenedor del reloj, voy a decir el nombre de la clase como reloj, algo así. Bien. Ahora, necesitamos agregar algo de CSS. Voy a cambiar a la aplicación punto CSS. Tengo algunos CSS de Bsic por aquí. Bien, de lo que me voy a deshacer. Bien. Voy a deshacerme de él. Y voy a decir reloj contenedor. Algo así, y voy a decir exhibición de banderas por aquí. Bien, justifique el contenido como centro y alinee los elementos como centro. Bien, puedo puedo establecer la altura. Bien. Y vamos a tener color de fondo. Bien, entonces color de fondo, tengo un código de color para esto. Bien, entonces voy a decir hash y 2a2c3, cuatro. ¿Bien? Puedes tener un color de tu elección. Bien. Ahora después de actualizar el color, el reloj apenas es visible. Eso está absolutamente bien. Bien, también actualizaremos el reloj. Diré reloj por aquí. Bien. Voy a establecer un tamaño de fuente por aquí. Bien. Tamaño de fuente de, uh, cuatro ERM. Bien, eh, y sí, el reloj es más grande ahora. Bien, familia, familia de fuentes de Voy a añadir una familia por aquí. Este puede ser el indicado, y voy a decir color. Bien. Para que podamos tener un color. Y para eso, tengo un código de color. Entonces voy a decir 61, DAF P. ¿Bien? Puedes agregar el color de tu elección. Eso está absolutamente bien. Y color de fondo. Voy a establecer el color de fondo a hash. ¡Uy! Entonces este es el hash 202, tres, 202, tres, dos A. Bien. Así. Así que totalmente depende de ti en cuanto a cómo quieres manejarlo. ¿Bien? Y voy a poner el relleno por aquí. Relleno de 20 píxeles y 40 píxeles. Bien. Algo como esto. Bien. Así que alejaré un poco para que esto se vea bien. Estoy ultra acercado. Bien. Esto se ve genial. Hay bordes blancos además lo que voy a hacer es deshacerme de esos portales blancos, así que voy a tener estrella por aquí, margen de uh uy. Entonces margen de cero píxeles, así, y se puede ver que los portales blancos se han ido. ¿Bien? Entonces esto está hecho. Relleno, puedo agregar un radio de borde, bien radio de polvo de, digamos, diez pixeles, ¿bien? Y, si, esto es todo. Creo que esto es todo, ¿verdad? Entonces este es nuestro reloj en modo de pantalla completa, como puedes ver por aquí, ¿de acuerdo? Y espero que hayas disfrutado de este tutorial, y espero que tengas que aprender mucho, ¿de acuerdo? Espero que esto haya sido útil y nos vemos la próxima vez. 15. Sumérgete en el usoRef: el guardián silencioso del estado: Oye, ahí. Ahora es el momento de que comencemos a hablar del uso del gancho ref. Ahora, el gancho Uf también es proporcionado por reaccionar para trabajar con componente funcional y es diferente del gancho de estado de uso que tenemos. Uf hook se utiliza para almacenar valores, pero es un poco diferente de cómo lo administra el estado. Uf le permitirá persistir valores a través de renders. Esto es diferente a nosotros estado, en donde state, si actualizas el valor, te permitirá causar re render, ¿verdad? Otra cosa sobre useref es que no causa que el componente se vuelva a renderizar Entonces como acabo de decir, use state desencadenaría re render. ¿Bien? Sref, por otro lado, no hace que el componente se vuelva a renderizar cuando cambia el valor ¿Bien? Entonces para ponerlo en contexto o para ponerlo simplemente usa ref hook en react se usa para persistir para valorar a través renders sin causar que el componente vuelva a renderizar cuando el valor cambia. ¿Bien? Así que venga de nuevo, se usa para persistir valores a través renders sin causar que el componente vuelva a renderizar cuando el valor cambia. Y una de las cosas principales en cuanto a por qué se está utilizando SRF o dónde se está utilizando SRF es para almacenar la referencia Dom, Por lo que te permite almacenar directamente la referencia a un elemento Dom e interactuar con él. Por ejemplo, puedes agregar enfoque a ese campo de entrada en algún evento, ¿de acuerdo? Puedes tener desplazamiento y así sucesivamente. Entonces este es uno de los casos de uso para urF y este es uno de los principales casos de uso donde se usa comúnmente, ¿de acuerdo? Se puede utilizar para almacenar valores que no necesitan o no necesitan causar re render cuando se actualizan. ¿Bien? Eso es según la definición como dice, ¿de acuerdo? Por ejemplo, es posible que desee almacenar un ID de temporizador, un valor anterior o cualquier otro valor que deba persistir en los renderizados, pero que no desencadene la actualización de la interfaz ¿Bien? Entonces ese es el gancho US Ref para ti, y déjanos probarlo en acción o déjanos ver esto práctico en cuanto a cómo funciona. Entonces lo que voy a hacer aquí está aquí, tengo un proyecto de reacción, ¿de acuerdo? Es un proyecto creado usando trigo, y tengo un componente funcional aquí, app dot JSX, que se está renderizando aquí en punto principal JSX, Sobre el elemento raíz. Todo bien. Entonces voy a hacer uso de esto para escribir algún código. Simplemente tiene algunos JSX simples que está regresando. En este momento, tiene un TIV con H una etiqueta. Aprende a reaccionar como estás viendo en el lado derecho, ¿verdad? Entonces, lo que haría aquí es que haría uso del uso Rf por aquí, ¿de acuerdo? Entonces voy a decir const. Di mi Rf por aquí, y voy a decir usar ref. Y se puede ver que esta cosa se sugiere sobre el uso ref. En el momento en que seleccione esto, verías que se agrega una entrada en la parte superior. ¿Bien? Se puede ver que esta es la entrada. Y esto se está importando como cualquier otro gancho de reacción nos tienes estado, usa effact y todo ¿Bien? Si pasas el cursor sobre esto, puedes ver, puedes ver use ref devuelve un objeto ref múltiple. Cuya propiedad actual se inicializa al argumento pasado, que es el valor inicial, y el objeto de retorno persistirá durante toda la vida útil del componente Esto es de lo que hablamos. Todavía no hemos hablado del objeto de aquí, del objeto ref del que está hablando, ¿de acuerdo? Es decir que tiene una propiedad actual. Te lo voy a mostrar en un momento. ¿Bien? Pero dice que el objeto devuelto persistirá durante toda la vida útil del componente, y como dije, persiste a través de renderizados, ¿de acuerdo? Es útil más que el atributo f. Es útil para mantener cualquier valor mutable similar a cómo le gustaría usar los campos de instancia en las clases. Todo bien. Así que vamos a echar un vistazo a cómo se puede hacer uso de ella. Entonces tengo urF y voy a pasar un valor por aquí. Bien, voy a saludar. Y voy a decir Wold por aquí, algo así, y voy a añadir un punto y coma Todo bien. Entonces esto está hecho, sí, tenemos E ref creado. ¿Bien? Entonces este es el valor inicial que estoy pasando, y esto es lo que MyRF está sosteniendo ahora mismo ¿Bien? Ahora bien, lo que haremos es que imprimiré esto en la consola y veremos lo que sostiene este MRF ahora mismo, ¿de acuerdo? Así que solo voy a tener mi ref impresa. Bien. Y voy a guardar esto. Bien. Y aquí, me dirijo a la consola. Bien, y voy a ir así. Todo bien. Veamos qué tiene. Entonces bien, lo está imprimiendo dos veces, y es solo por el modo estricto en min dot Jx nuestra aplicación se está renderizando dos veces, ¿de acuerdo? Pero si quitas esto, bien, verás que se imprime una vez. ¿Bien? Entonces, si expandes este objeto, verás que el objeto tiene corriente por aquí. Bien. Y puedes ver que tiene corriente, y déjame alejarme un poco para que lo veamos claramente. Bien. Entonces sí, puedes ver que tiene corriente y sea cual sea el valor que hayamos pasado, hola mundo, eso es lo que estás viendo por aquí. ¿Bien? Entonces, lo que tiene ahora mismo es, déjame imprimir por aquí, ¿de acuerdo? Tiene algo como esto. Es un objeto como este, y tiene propiedad actual en él, y el valor de la corriente es hola mundo, algo así. Entonces esto es lo que MRF sostiene en estos momentos. Este es el objeto que sostiene ahora mismo, y eso es lo que está imprimiendo aquí en la consola. Se puede ver que es un objeto tipo. ¿Correcto? Y si quieres jugar con el valor para usar ref, necesitas trabajar con la propiedad actual, ¿bien? Entonces ahora mismo, la propiedad actual está sosteniendo hola mundo Y porque lo estoy inicializando para hola mundo por aquí. Bien. Entonces, cada vez que imprima un objeto serf, verá un objeto con una sola propiedad que es actual, y la propiedad actual almacena el valor de lo que tenga asignado, como un elemento dom o un valor o un valor inicial ¿Bien? Se puede acceder al valor almacenado en la ref de uso haciendo uso de corriente por aquí. ¿Bien? Así que sí, eso es sobre el uso ref. Entonces lo que haría es que entraría en sot. Esto es lo que es. Y te voy a mostrar cómo puedes hacer uso de esto en el TSX Entonces aquí, digamos, si quiero imprimir hola mundo, para poder hacer uso de estos dos rizados, puedo decir mi ref. ¿Y cómo accedería al valor? ¿Dirás punto actual? Bien. Si guardas esto, verás aprender reaccionar, hola mundo, ¿verdad? Entonces, sea cual sea el valor que estés pasando por aquí, bien, ya sea cero, uno, hola mundo o lo que sea, puedes referirte a él usando current. Espero que esto tenga sentido. Ahora lo que haría es construir sobre este ejemplo, o, y voy a aclarar esto por aquí. Bien. Permítanme construir sobre este ejemplo. Y ahora mismo tengo mi ref, bien. Así que voy a cambiar el nombre a ref count, ¿de acuerdo? Entonces esto es ref y aquí, en vez de usar ref y tengo una cadena pasando, voy a pasar en cero. Bien. Voy a deshacerme de esto por aquí, registro de puntos de consola, y esto también. ¿Bien? Ahora, lo que haremos aquí es que tenemos un conteo de referencias, Rf por aquí, ¿de acuerdo? Y voy a añadir un stet también. Bien, entonces voy a decir Const por aquí, y voy a ver el conteo de estetas. Bien. Así que tengo conteo de ref. Tengo Steed count, y he establecido Steed count por aquí. Y voy a decir use state, e inicializaré estos dos también cero Bien. Entonces esto también se hace. ¿Bien? Entonces tenemos use ref y use State, que se están inicializando a cero. Todo bien. Ahora lo que voy a hacer es yo en la interfaz de aquí. Bien. Voy a deshacerme de este H uno, bien, y voy a sumar P por aquí. Bien. Voy a ver al Conde del Estado por aquí. Bien. Y voy a decir cuenta del Estado. Algo como esto. Bien. Verás el recuento de Estado aquí en la interfaz de la derecha. Y por aquí, voy a añadir el botón E, algo así. Así. Y para botón, voy a decir incremento, Conde del Estado. Así. Bien. Aquí este botón. Bien. Y lo que haría es cuando el usuario haga clic en el recuento de estado de incremento, voy a aumentar el valor del estado en uno Todo bien. Entonces lo que puedo hacer es que puedo decir const, voy a tener una función porque voy a necesitar función para manejar este estado de incremento, Cuenta estatal más uno por aquí. Bien. Y voy a guardar esto. ¿Bien? Entonces estamos teniendo conteo de estado de incremento por aquí y al click de esto, voy a decir al click Voy a añadir Ups. Voy a agregar conteo de estado de incremento. Oh, entonces esto necesita ser agregado. ¿Bien? Entonces sí, lo voy a incrementar y se puede ver que el conteo estatal se está incrementando de esta manera. Todo bien. Ahora lo que voy a hacer es agregar también un conteo aproximado, o de manera similar y sólo voy a copiar esto. Lo pegaré por aquí. Bien. Y lo que yo haría es contar interestatal, voy a decir f contar por aquí Bien. Y esto es f count. ¿Cómo mostramos un conteo de ref? R cuenta corriente de punto, ¿verdad? Porque la corriente es lo que sostiene el valor. Ref count es tener un objeto con actual como propiedad. Todo bien. Y voy a decir incremento Ref contar. Esta función aún no existe. Tenemos que crear esto y voy a guardar esto. Bien, entonces la salida se ha ido porque esta función no existe, lo cual está absolutamente bien. Voy a replicar esto por aquí y aquí, en vez de estado de incremento, recuento voy a decir incremento ref count Bien. Y sí, todo viene en una línea. Bien. Entonces puedo mover esto a una nueva línea con solo agregar PR. Voy a deshacerme de esto por aquí. O probablemente pueda, lo siento, esto no es una buena idea. Yo solo me desharé de BR por aquí en su lugar. Vendré a CSS por aquí. Tengo display flex. Bien, estos son casos básicos que estoy teniendo. Bien. Para DIV, tengo la pantalla de flex, y estableceré la dirección también, la dirección flex de columna. Bien, y esto pone todo verticalmente. Creo que esta es la mejor solución aquí. Todo bien. Y si, tengo conteo de incrementos por aquí y conteo de ref de incremento para conteo de ref de incremento, necesito decir por aquí, f count, Toto necesito aclarar Entonces f contar, Tt actual y tenemos que decir más igual a uno. Bien. Entonces sí, esta es una forma taquigráfica de hacer las cosas Todo bien. Y voy a guardar esto. Bien. Y veamos cómo funciona esto. Entonces se puede ver que el Estado se está incrementando, ¿ok? Al estar aumentando el estado, el recuento de Rugh está obligado a aumentar porque no está causando re render ¿Bien? Pero si dices consola punto registro por aquí, y si imprimo en el valor por aquí, si digo 1 segundo. Entonces, si digo conteo aproximado, bien. Y voy a decir aquí. Bien, cuenta de dólares al corriente, algo así y punto y coma. Voy a guardar esto. Bien. Y esta causa re render, así se puede ver cómo básicamente se actualizó el conteo. Pero si vienes aquí a inspeccionar, o, y si abres esto, ve a Vaya Ve a Consola, algo así. Todo bien. Estoy viendo conteo de ref no está definido, bien. Esto fue un error desde el principio. No debería venir ahora, ¿de acuerdo? Para que puedas ver el conteo de estados incrementándose y el conteo de referencias que se está imprimiendo en la consola Bien. Ahora bien, si por alguna razón se causa el renderizado, puedes ver que el conteo de referencias se actualiza por aquí, ¿verdad? De lo contrario, simplemente sigue incrementando e imprimiéndolo en la consola No se está reflejando en la interfaz de usuario porque no se está volviendo a renderizar, ¿verdad? En el momento en que actualicé el estado por aquí, renderización ocurre para el componente y se actualiza el recuento de referencias. Espero que esto tenga sentido en cuanto a cómo está funcionando esto. Y este es un buen ejemplo para ayudarnos a entender la diferencia entre el estado de uso y el uso Rf, ¿bien? Así que puedes ver por aquí, persisten use Rf se usa para persistir valores a través de renders, y no causa que el componente vuelva a renderizar cuando cambia el valor. Y eso es lo que estamos viendo claramente por aquí, ¿de acuerdo? Y si quieres probar o si quieres tener algún tipo de código que se ejecute en re render, lo que puedes hacer es hacer uso del efecto de uso para ver realmente si el componente se está volviendo a renderizar aquí. Diré que usa efecto por aquí. Bien. Y si, ¿cuál es la sintaxis para el efecto de uso? Entonces tenemos una función de flecha como primer parámetro. Bien. Y entonces tengo una dependencia como esta. ¿Bien? Entonces esto es lo que es la función. Ahora, lo que voy a hacer es que necesito ver o necesito ejecutar este efecto en cada render. Entonces voy a deshacerme de la dependencia y por aquí en la función, voy a decir bloqueo por aquí. Oh, vaya, así que registra este. Voy a iniciar sesión en la consola. ¿Qué estamos registrando en la consola? Sólo voy a decir componente re render. Rerender de componentes, algo así. Guarde esto. Se puede ver que se está renderizando dos veces inicialmente. Bien. Déjame refrescarme. Se está renderizando dos veces inicialmente debido al modo estricto que tenemos en JSix principal, lo cual está absolutamente bien. Si quieres, puedes deshacerte del modo estricto, solo para este ejemplo. Bien. Yo voy a hacer eso. Si guardo esto, ahora puedes ver se está renderizando solo una vez, ¿verdad? Si vienes a app.j6, bien, se está renderizando Voy a hacer un refresco todavía. Se puede ver que se está renderizando una vez. Ahora lo que puedes hacer es incrementar el conteo de calles. Puede ver que el componente se vuelve a renderizar, se vuelve a renderizar de nuevo. El número de veces que haces clic, haces clic en el incremento Recuento de calles, verás que el componente se vuelve a renderizar, ¿verdad Si dices conteo de ref de incremento, verás que se está actualizando el recuento de referencias, pero no estás viendo que se vuelva a renderizar el componente , ¿verdad Y si se incrementa un conteo estatal. Entonces aquí, antes de incrementar el conteo de estados, solo echa un vistazo al conteo de referencias en la interfaz Es cero, ¿verdad? Pero en la consola, el recuento de referencias es 15, pero no se está reflejando aquí en la interfaz de usuario porque el componente aún no se ha vuelto a renderizar. Entonces, si dices conteo de estado de incremento, el componente se volverá a renderizar y el recuento de referencias se actualizará sobre Así que déjame hacer clic en esto y verás que el recuento de ref está actualizado. ¿Correcto? Entonces sí, e incluso se puede ver el registro que se está imprimiendo componente re renderizado, ¿verdad? Así que use el componente de registros de gancho de efecto vuelto a encargar cada vez que se vuelva a renderizar el componente, y esto nos está ayudando a observar cuándo el componente realmente se renderizar en qué evento Entonces sí, para resumir, cuando haces clic en el botón de conteo de estado de incremento, el componente re renderiza y ves el registro en la consola que está Al hacer clic en el botón de conteo de ref de incremento, el recuento de referencias se incrementa, pero el componente no se vuelve a renderizar, por lo que no verá el bloqueo de efecto de uso en la consola por aquí cuando haga clic en Incrementar recuento de Rf, ¿ Espero que esta demostración sea realmente útil para entender la diferencia entre use ref y use state. Esto es una confusión entre los estudiantes. Crea mucha confusión en cuanto a, Bien, así que estoy dispuesto a almacenar el valor de uso, debería usar estado de uso o usar Rf, bien. Ambos tienen sus propios beneficios, y espero que la diferencia sea bastante clara para todos ustedes, ¿verdad? Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 16. Da vida a useRef: gestiona elementos HTML con facilidad: Entonces ahora es el momento de que echemos un vistazo a ¿cómo se puede hacer uso del uso Rf con elementos HTML? Entonces en este video en particular, lo que vamos a hacer es que vamos a tener un ejemplo donde hagamos uso de nosotros ref para acercar el foco a un elemento de entrada al hacer clic de botón. ¿Todo bien? Entonces para empezar, ya que estamos haciendo uso de usef ¿qué vamos a hacer? Vamos a crear una ref de entrada. ¿Bien? Entonces voy a decir entrada constante Rf. Bien, voy a hacer uso del uso ref para crear el gancho por aquí, y voy a inicializar esto a null por ahora, ¿verdad Y lo que voy a hacer aquí está aquí, voy a tener un elemento input. Bien, entonces voy a tener entrada. Algo como esto. Y voy a tener tipo, tipo de texto. Bien. Y voy a tener marcador El marcador de posición es enfocarme. Bien, ese es un marcador de posición que estoy teniendo. Bien, puedes ver este marcador de posición. Bien, entonces el enfoque debería venir así en un clic de botón. Entonces también necesitamos el botón. Bien, entonces voy a añadir un botón por aquí. Bien. Entonces voy a decir botón. Bien. Y al click y aquí, voy a vincular esto a una función, pero la función no existe, así que estoy dejando esto en blanco por ahora y voy a decir foco. Vaya, concéntrese, algo como esto. Bien. Y si, al hacer click de este botón, lo que tenemos que hacer es llamar a esta función focus input. Llamémoslo entrada de enfoque. Vendré aquí y definiré esta entrada de enfoque. ¿Bien? Entonces voy a decir const, entrada de enfoque. Bien. Y voy a decir que voy a tener la función de flecha por aquí. Y si, esta función no hace nada. Pero click de esto, el foco debería venir aquí. Todo bien. Entonces lo que vamos a hacer ahora es voy a decir input ref input ref current dot focus. Bien. Así que estoy haciendo uso de esto ahora mismo, ¿de acuerdo? Y ¿qué es input ref? La ref de entrada ahora mismo se inicializa a nulo. Es nulo ahora mismo. ¿Bien? Entonces, ¿cómo apunta ref de entrada a este campo de entrada de aquí? ¿Bien? Entonces lo que harías aquí es que dirías ref. Harás uso de la propiedad ref por aquí y yo diré entrada ref. Eso es. Bien. Ahora, en el momento en que hagas esto por aquí, ¿de acuerdo? La ref de entrada va a tener la referencia a esta entrada en particular por aquí. ¿Bien? Puedes echarle un vistazo a eso. Entonces lo que voy a hacer es decir Consola dot log. Esa es la mejor manera de ver lo que sostiene un elemento en particular, ¿verdad? Diré entrada ref. Estoy imprimiendo entrada ref. ¿Bien? Vamos a comentar esto por un tiempo, ¿de acuerdo? Y nos dirigimos a Console. Vayamos a Consola. ¿Bien? Entonces estás viendo, bien, 1 segundo. Entonces esta es alguna salida que estoy viendo. Bien. Entonces ahora mismo no veo nada en la consola. En el momento en que digo foco, verás actual es tener el elemento input. Se puede ver es el elemento de entrada. Y si explico el elemento input, puedes ver que está teniendo todas las propiedades o los atributos de input por aquí. Bien. Entonces ese es todo el elemento de entrada que estás viendo, ¿verdad? Así que sí, esto es con lo que vamos a jugar, ¿de acuerdo? Entonces se refiere a este elemento de entrada, ¿verdad? Así que voy a comentar esto por aquí. Y en cambio, habilitaré esto. Bien, voy a guardar esto y vamos a refrescarnos por aquí. ¿Bien? Si digo enfoque, verás que el foco resulta al cuadro de texto, o al cuadro de entrada, debería decir ¿Bien? Elimino el foco. Si digo enfoque, verás que el enfoque sale por aquí. Ahora puedes hacer mucho más, ¿de acuerdo? En lugar de solo enfocarse, incluso puedes actualizar el uh el color por aquí. Entonces puedo agregar por aquí enfocar y resaltar. ¿Bien? Todo bien. Y aquí, después del foco, lo que puedo decir es entrada ref, punto, estilo de punto actual, punto, color de fondo es igual a. Puedo agregar cualquier tipo de color, gris, el color que quieras Y voy a guardar esto. Ahora bien, si digo foco y halight verás que cambia a gris Puedo mantenerlo aquí mira gris se ve demasiado raro. Todo bien. Entonces puedo decir enfoque y hlight ya ves que está funcionando bien, ¿verdad Y puedes tener múltiples refs también en un programa. Entonces, si tienes múltiples cajas de entrada a las que quieres mover el foco, puedes tener múltiples f. bien. Entonces déjenme mostrar un ejemplo de eso también. ¿Bien? Entonces puedo llamar a esto como ref de entrada y puedo tener por aquí, entrada ref siguiente por aquí. Bien. Entonces llamaré a esto a continuación. Bien. Y lo que puedo hacer es elegir duplicar esto por aquí. Bien. Duplicar esto y puedo decir entrada ref siguiente por aquí. Bien. Concéntrate, concéntrate en altura y en lugar de enfocar la entrada siguiente, algo como esto ¿Bien? Así que actualicé la ref y la función onclick. Todo bien. Y aquí necesitamos tener esa función también. Así que simplemente duplicaré esto por aquí. Bien, enfoque entrada a continuación, y voy a deshacerme de este comentario aquí. Bien. Y en lugar de en lugar de entrada ref por aquí, voy a tener entrada ref siguiente, algo así. Se puede ver el enfoque y eso, el enfoque y ello. Se puede ver que ambos están funcionando de la misma manera. Se puede ver, ¿verdad? Incluso puedes tener un botón para restablecer el enfoque, y restablecerá el enfoque y el estilo para cada uno de ellos. Así que solo voy a hacer eso y te lo mostraré. Bien, entonces voy a tener esto. Voy a añadir un botón más. Diré resetear. Bien. Es un botón de reinicio. Bien. Y reiniciemos el enfoque. Bien. Entonces al hacer clic, lo estoy vinculando a una función de reinicio de enfoque. Ahora Reset focus no existe, así que simplemente duplicaré esto. Bien, y voy a llamar a este enfoque de reinicio, algo así por aquí. Bien. Y entonces lo que yo haría es decir entrada ref estilo actual punto Fondo. Bien. Diré Input ref, fondo de estilo actual, voy a decir blanco por aquí, y esto también será blanco, el siguiente, ¿verdad? Bien. Y si, así puedo ver enfocarme en ello, enfocarme en ello. Déjame refrescarme. Entonces enfoca la luz, concéntrate en ella, y luego puedo ver el reinicio. Se puede ver al reiniciar, el foco se va, ¿verdad Uy, es descanso. Entonces hice un tipografía Es resetear, en realidad, bien. Todo bien. Esto se ve genial. Enfócate en él, enfócate en él y luego se restablece. Se puede ver ¿verdad? Entonces este es uno de los casos de uso, y este es uno de los casos de uso comunes donde se está utilizando el gancho de serf Por lo que el gancho de serf se está utilizando con frecuencia. Si lees el código en línea, cualquier tipo de código de reacción, verías que se usa principalmente con elementos HTML uh para obtener más control sobre el modelo de objetos del documento ¿Todo bien? Como estamos haciendo por aquí, estamos teniendo un mejor control en cuanto a lo que estamos haciendo con los elementos de entrada por aquí, ¿verdad? Entonces sí, eso es sobre el usuario ref. Además, una cosa más, cuando actualizas el enfoque y todo esto por aquí, no está provocando que el componente se renderice. Bien, porque esa es una de las cosas sobre el uso Rf. ¿Correcto? Así que siempre que estés haciendo esto, cada vez que estés cambiando esto, solo puedes tener un efecto de uso por aquí, usar efecto gancho por aquí. Bien. Y simplemente puedo tener una función de flecha por aquí sin ningún array de dependencias. ¿Bien? Solo puedo hacer el registro de puntos de consola por aquí y veré al inquilino de componentes ¿Bien? Sólo voy a tener este mensaje. Yo sólo voy a guardar esto. Si vas a inspeccionar, Bien. Verá los componentes renderizados. Por supuesto, viene en dos ocasiones, y la razón de esto es porque tengo en modo estricto. Bien. Si digo foco y aliado, enfoque y reset aliado, verás que el componente renderizado no se está imprimiendo, lo que significa que el renderizado no está sucediendo, ¿verdad? Y esta es una de las mejores cosas de usar Rf. Te permite agregar dinamicidad a la página web o a tu componente sin causar re renders, Entonces espero que esto haya sido útil y espero que hayan podido seguir este sencillo ejemplo. 17. Desglosando la perforación de utilería: lo bueno, lo malo y lo feo: Entonces ahora es el momento de que comencemos a hablar este concepto de perforación de utilería. Entonces tengo un proyecto react, y aquí tengo este archivo llamado app dot CSX, junto con app dot CSS, ¿bien? Y tengo este GSX básico que estoy regresando junto con algunos CSS simples que ya he agregado Ahora, ¿qué es la perforación de puntal? Por lo tanto, la perforación de puntales es una situación en la reacción en la que necesita pasar datos desde el componente de nivel superior hacia abajo a través de las varias capas de componentes intermedios a un componente hijo que realmente lo necesita ¿Bien? Entonces tendrás un escenario en el que tengas muchos componentes anidados, ¿de acuerdo? Entonces tienes el componente uno, ¿de acuerdo? Uy. Y entonces tienes dentro el componente uno, tienes C dos, ¿de acuerdo? Y luego dentro de C dos, digamos que tienes C tres. ¿Bien? Esta es una jerarquía que estás siguiendo, ¿de acuerdo? Podría haber más en la jerarquía, pero sólo te estoy dando un ejemplo de tres. Y digamos que C tres necesita acceder a algunos datos. ¿Bien? Entonces C uno estará pasando estos datos a C dos y C dos pasará estos datos a C tres. Ahora bien, si hay diez niveles así, bien, los datos tienen que pasar por diez niveles. Eso es lo que esto significa esencialmente. Y esto es lo que es la perforación de utilería porque aquí estás pasando los datos con la ayuda de utilería, ¿de acuerdo? Entonces, volviendo a la definición nuevamente, perforación de utilería es una situación en la que se necesita pasar datos desde componente de nivel superior hacia abajo a través de las varias capas de componentes intermedios a un componente hijo que realmente lo necesita ¿Bien? Ahora, C dos por aquí, en este caso, es un componente intermediario Si hay diez componentes más en el medio, todos esos serán componentes intermediarios ¿Bien? Y a esta cosa se le conoce como perforación de puntal. ¿Bien? Ahora bien, esto suele suceder cuando un componente que necesita los datos está profundamente anidado Entonces C tres de aquí está profundamente anidado dentro del árbol de componentes Y los datos deben pasarse a través de cada capa de componentes, incluso si esos componentes intermediarios necesitan los datos para su propio uso ellos mismos, ¿verdad? Entonces C de dos vías podría no necesitar los datos. Pero como C tres está necesitando los datos y C uno los ha pasado a C dos, C dos necesita pasarlo a C tres también. ¿Bien? Por lo que C dos también tendrá acceso a los datos. A pesar de que no lo necesita. ¿Bien? Entonces déjame probar esto o déjanos ver esto con la ayuda de un ejemplo. Entonces lo que vamos a hacer es que vamos a crear este tipo de jerarquía de componentes, bien. Tendremos algunos componentes como el componente A, B, y luego tendremos un componente al final, que realmente necesitará los datos. ¿Bien? Y enviaremos los datos del componente superior al componente inferior, ¿de acuerdo? O la profundamente anidada. Todo bien. Entonces eso es lo que vamos a hacer, ¿de acuerdo? Y para empezar, lo que voy a hacer aquí es que lo haré aquí en la app, bien, primero comenzaré creando una variable. Bien. Entonces voy a decir const por aquí Bien, entonces estos son datos que tenemos que pasar. Diré valor de tema, y voy a decir Tako digamos que tenemos estos datos, algunos datos en alguna variable, y este es el tema que queremos tener, ok. Y necesitamos pasar estos datos al último componente de la jerarquía. Todo bien. Y aquí estamos regresando este JSX, bien. Pero lo que vamos a hacer aquí es, digamos que tengo un componente más, ¿bien? Entonces crearemos algunos componentes, así me desharé de esto por aquí. Bien. Y voy a recortar el JSX por aquí ¿Bien? Digamos que tengo un componente más, bien, tengo función. Bien. Y este es el componente A de aquí. Digamos, ¿de acuerdo? Y aquí, estoy haciendo uso de la desestructuración y voy a decir tema por aquí Bien. Y voy a volver por aquí. ¿Qué estoy regresando? Estoy devolviendo el componente B. Bien. ¿Qué es el componente B? Tenemos que definir eso. ¿Bien? Y estoy pasando esto como utilería, este tema que recibí del componente superior. ¿Bien? Eso es lo que estoy haciendo. Bien. Ahora tengo el componente B por aquí en la parte inferior, ¿de acuerdo? Entonces voy a decir función. Bien, componente B, y voy a tener desestructuración Diré tema por aquí. Bien. Y por aquí, diré componente temático de regreso, ¿de acuerdo? Bien. Este es nuestro componente que realmente necesita los datos, y lo estoy pasando al componente con la ayuda de utilería Bien, voy a tener un último componente más, que es componente temático. Bien. Los aceptaré por aquí. Bien, algo como esto. Y por aquí, voy a decir regreso, div, ¿de acuerdo? Diré que el tema actual es, bien y el valor del tema, algo así. ¿Correcto? Esto está hecho. Bien, entonces lo que estamos haciendo es que estamos teniendo componente dentro del componente dentro del componente, y aquí en la parte superior, bien, necesito agregar el componente A, ¿verdad? Entonces aquí, lo que voy a hacer es voy a decir componente A. Bien, componente A, y voy a pasar en la theta Diré tema, tema por aquí. Bien. Y voy a decir el cierre por aquí. ¿Bien? Entonces esto está hecho, y se puede ver que el tema actual es oscuro por aquí. Ahora aquí, cómo se organiza esto es que tenemos el componente A, ¿de acuerdo? O tenemos app por aquí en la parte superior, ¿verdad? App por aquí. Bien. Entonces tenemos el componente A, así que voy a agregar el componente A por aquí, entenderemos la jerarquía, básicamente. Tenemos componente B. Bien, este es el componente B. Bajaré, agregaré un comentario. Bien. Y este es el componente C. Entonces, ¿hay componente C 1 segundo? No. Entonces en vez de eso, tenemos componente temático. Todo bien. Luego agregamos C por aquí. Bien, entonces así es como se ve la jerarquía. Tiene el componente de la aplicación en la parte superior, componente A, el componente B y el componente son componentes temáticos. Ahora bien, este componente temático necesita los datos, ¿de acuerdo? Necesita tema por aquí. Entonces necesita acceso al tema para cualquier tipo de procesamiento, ¿de acuerdo? Y los datos existen por aquí, ¿de acuerdo? Estos son los datos donde tienes los datos. App, ¿verdad? Para que puedas ver app por aquí tiene el valor del tema. ¿Correcto? Y puede obtenerlo del usuario o de donde sea. Bien. Pero ahora mismo solo estamos teniendo los datos creados por asignación predeterminada usando una variable. Bien. Y los necesitamos componente necesita acceso a estos datos. Entonces lo que hará es pasar estos datos a través las capas o por los componentes con la ayuda de props por aquí Para que veas, me estoy envolviendo. Estoy teniendo este componente A por aquí, y estoy pasando el tema al componente A, luego al componente B. El componente A lo está aceptando y pasando al componente B. Entonces el componente B lo está aceptando y pasando a C, y el componente C lo está pasando o lo siento, componente B se lo está pasando al componente, no al componente C, y el componente temático es aceptarlo y mostrarlo. ¿Bien? Así que en realidad está mostrándolo puede hacer cualquier tipo de procesamiento que necesite, ¿de acuerdo? Y se puede ver que los datos se están pasando de la manera correcta. ¿Bien? Incluso puedo agregar algún tipo de CSS, correcto, para que puedas ver cómo se hace realmente esta estratificación por aquí ¿Bien? Ahora, por aquí, voy a añadir TIF por aquí. Bien. Y yo sólo voy a envolver todo esto dentro este rígido o, algo así. Bien. Y por aquí, voy a decir estilo. Bien. Y podemos tener un estilo para la frontera. Entonces voy a decir frontera, genial en dos pixeles por aquí. Bien, dos pixeles, sólidos y negros, algo así. Y voy a tener relleno por aquí. Y el relleno es de 20 pixeles. Eh. Algo como esto, ¡Uy! Entonces hay algún problema. ¿Bien? Así que he agregado estilos. Entonces problema por aquí. Bien. Déjame ver cuál es el problema. Bien, entonces dice que no hay etiqueta de cierre para Dev. Así que mejor voy a agregar una etiqueta de cierre, y voy a guardar esto. Ya ves que este es el componente del que estamos hablando, ¿no? Entonces, si amplío esto un poco, se puede ver que el equipo actual está oscuro por aquí. Bien. Lo que haría es que en realidad también agregaría una cosa más por aquí. ¿Bien? Podemos agregar h2h2 por aquí Uy. Oh, solo voy a agregar una fresca H dos, ok y algo como esto. ¿Bien? Entonces voy a decir app compoont app o puedo decir padre por aquí Bien. Entonces esto nos dice que este es padre de familia. ¿Bien? Se puede ver cómo se está visualizando esto. Bien. Ahora lo que podemos hacer aquí es que voy a copiar estas cosas por aquí. Bien. Los agregaré o 1 segundo. Déjame copiar todo esto, y eso va a ser fácil. Y agregaré todo por aquí o dejaré que me devuelva también. Bien. Así que voy a conseguir todo esto. Bien. Entonces estamos renderizando componente B. Recuerda eso. Aquí, voy a cambiar esto al componente B. Bien. Y esto no es app ahora, esto es componente A. Bien, componente A, y voy a deshacerme de esto. O se puede decir niño por aquí. Bien, se puede ver que un padre tiene el componente A, que es el niño, ¿verdad? Y de hecho puedo copiar esto por aquí. Puedo venir aquí al componente temático y puedo reemplazar todo el retorno por aquí. Bien. Y por aquí, voy a decir componente temático, o lo siento, componente a B. Bien así, y aquí puedo tener componente temático, algo así. Voy a guardar esto. Puedes ver el componente A componente B de la aplicación, y luego tienes el último componente, que en realidad está mostrando el tema por aquí. Bien. Entonces para eso, lo que haría es que en realidad volvería, en realidad agregaría este retorno por aquí. ¿Bien? Esto se agrega. Y lo que voy a hacer es que voy a tener este div cortado por aquí. Bien. Y aquí no estamos agregando ningún tipo de componente, así que solo voy a agregar esta o y me desharé de esta devolución aquí. ¿Bien? Y esto está hecho. Creo que este es un componente temático, ¿verdad? Entonces voy a agregar esto por aquí. Bien. Así que esto es genial, voy a decir nieto por aquí, ¿verdad? Y luego aquí, éste está en un segundo. Voy a copiar a este nieto. Este es nieto, ¿de acuerdo? Y esto es padre e hijo. ¿Puedes ver? Bien. Entonces así es como se está cruzando, bien, y mejor, déjame pasar a una vista de pantalla completa por aquí. Bien, para que puedas ver la vista de pantalla completa aquí. Bien, tienes componente app, luego tienes componente hijo. Tienes el componente B y dentro del componente B, tienes el componente temático, que es el bisnieto, ¿verdad Y este es el tema que se está mostrando. Ahora bien, esta cosa de aquí se conoce como perforación de utilería por aquí, ¿verdad? Lo que estamos haciendo aquí es que estamos pasando algunos datos a través de diferentes componentes, bien, al componente hijo de aquí, el componente nieto de aquí, que está profundamente anidado dentro del árbol de componentes, y los datos se pasan a través de cada capa de componentes Por lo que se está pasando a través del componente A componente B. Ahora el componente A y el componente B no necesitan estos datos. Bien, aún así, tienen que acceder a estos datos y pasarlos más porque de lo contrario romperá la cadena, ¿de acuerdo? Ahora bien, esta cosa se conoce como perforación de utilería, y una cosa sobre la perforación de utilería es, por supuesto, esto es factible, pero esto hace que su código sea más difícil de administrar y mantener, especialmente a medida que la aplicación crece en complejidad Entonces app es simple en este momento, así que podría parecer fácil. Pero cuando la app crece en complejidad, puede llegar a ser realmente difícil, sí, no es recomendable. Se recomienda hasta cierto nivel, pero no más allá de eso, ¿verdad? Entonces sí, se trata de la perforación de utilería, y espero que tengas una buena claridad sobre lo que es la perforación de utilería. 18. Aprovecha el usoContext: simplifica el uso compartido de estados como un profesional: Bien. Entonces aquí, lo que estamos haciendo en este momento es que ya he configurado una app que tiene múltiples componentes anidados juntos, y tenemos este valor o algunos datos que estamos pasando con la ayuda de la perforación de utilería Bien, entonces lo estamos pasando al componente A, ¿de acuerdo? Este es el componente dentro de la aplicación. Y luego este componente lo pasa al árbol y el componente, que es componente temático, que está profundamente anidado dentro del árbol está mostrando el valor del tema por aquí ¿Bien? Ahora, se está mostrando oscuro por aquí. Si cambio esta oscuridad a luz, algo así, actualizará el valor a luz. ¿Bien? Entonces esto es prob perforando por aquí Ahora, la perforación prob como concepto se vuelve problemática cuando se necesita pasar datos a través de muchas capas de componentes, ¿de acuerdo? Y ahora mismo, lo que está pasando por aquí es que si me desplazo hacia arriba, bien. Entonces aquí puedes ver así es como se ve la jerarquía, ¿verdad? El componente temático necesita un tema aquí, y el componente de la aplicación tiene los datos, ese componente temático necesita. ¿Bien? Así que solo lo agregaré por aquí. Diré que tiene tema. ¿Bien? Ahora bien, lo que está pasando aquí es componente A y el componente B solo están haciendo el trabajo de pasar los datos, ¿verdad? Ahora, hay bastantes problemas por aquí, ¿de acuerdo? Una es que estás pasando los datos a través de capas innecesarias, ¿de acuerdo? Al igual que, tienes el componente A y el componente B que no necesitan los datos, pero solo están haciendo el trabajo de pasar, ¿verdad? Carga de mantenimiento. Entonces mañana si tu jerarquía de componentes cambia, digamos que insertas un nuevo componente en el medio o eliminas un componente intermedio , ¿de acuerdo? Entonces, cualquier tipo de cambio, hay que asegurarse de que el nuevo componente también pase el proc de ellos al componente de equipo, ¿de acuerdo? Para que la jerarquía no se rompa y el paso de datos no se rompa. De lo contrario, el componente del equipo no podrá mostrar los datos que está mostrando en este momento, y rompería la aplicación. ¿Bien? Entonces, si algún otro desarrollador está trabajando y si no es consciente de que se están pasando estos datos, podría dar lugar a errores, ¿verdad? Y hay una complejidad innecesaria en este momento en la que cuantas más capas tengamos, más estropeadas, debería decir, se vuelve la cadena de utilería, ¿verdad Y hace que un código más difícil de entender y mantener, ¿verdad? Y aquí es donde entra en imagen el concepto de uso context hook. ¿Bien? Entonces, ¿qué es use context hook? Esto es contexto de uso. ¿Bien? Entonces este es un gancho básicamente usando el cual puedes configurar el contexto del tema, y puedes acceder a ellos directamente desde el componente theme sin necesidad de que lo pase por el componente A y el componente B. Y esto simplifica el componente T, reduce la sobrecarga de mantenimiento, y Uh, la sobrecarga de mantenimiento se reduce porque los componentes intermedios que tenemos A y B no necesitan pasar o estar al tanto de este tema prop que no necesitan, ¿verdad? Ahora mismo, se les está dando cuenta de esto, bien, porque necesita pasarse al componente temático, a través de la perforación de utilería. ¿Bien? Entonces aquí es donde entra en imagen el contexto de uso, ¿de acuerdo? Ahora bien, ¿cómo funciona el uso de Contexto? Entonces hay un par de partes por aquí. Bien. Primero es crear un contexto. ¿Bien? Ahora, el contexto esencialmente crea un objeto de contexto, y esta es una sintaxis por aquí. Entonces este es objeto de contexto que estamos creando, estamos diciendo const, mi contexto, ¿bien? Y estamos haciendo uso de Create context, y estamos pasando algún valor predeterminado por aquí. ¿Bien? Ahora bien, este valor predeterminado es opcional aquí. No es necesario, no obligatorio. Pero si deseas pasar, si deseas tener un valor predeterminado, puedes pasarlo por aquí. Una vez creado este objeto, se consume el contexto que se ha creado, ¿de acuerdo? Entonces, donde sea o cualquier componente que desee hacer uso de este contexto puede usarlo en cualquier componente, ¿de acuerdo? Y básicamente esto se puede usar allá. ¿Bien? Ahora bien, también hay un concepto de proveedor, bien, en el que puedes envolver el componente que necesita acceder al valor de contexto, ¿de acuerdo? Y el componente en ese árbol, cualquier árbol de componentes puede acceder al valor de contexto allá. ¿Bien? Pero proveedor es algo que estacionamos por ahora. Simplemente entenderemos cómo puedes crear el contexto y cómo puedes consumirlo. Bien, vamos a mantener las cosas simples Bien. Entonces lo que haremos es copiar la sintaxis por aquí. ¿Bien? Voy a tomar la sintaxis por aquí. Y lo que voy a hacer es desplazarme hacia abajo por aquí. Uh, lo que tenemos ahora es que tenemos tema, ¿verdad? Lo que voy a hacer es deshacerme de este tema, y voy a decir mi contexto, o puedo decir contexto del tema por aquí. ¿Bien? Diré crear contexto, y no voy a tener ningún tipo de valor predeterminado por aquí. ¿Bien? Entonces esto es lo que estoy haciendo. Ahora he creado un contexto, ¿de acuerdo? Ahora si me desplazo hacia abajo por aquí, voy a deshacerme de ellos por aquí, el tema que estoy pasando. ¿Bien? Esto tampoco es necesario por aquí, ¿de acuerdo? Como no estamos pasando el tema, esto tampoco es necesario. Así que en realidad me estoy deshaciendo de todos los accesorios que estoy pasando por aquí y estoy simplificando las cosas, pasando por aquí y estoy simplificando las cosas, ¿verdad? Ahora, esto está hecho. Esto también se elimina, y sí, esto está hecho. Bien. Ahora estamos mostrando tema por aquí. Por supuesto, el equipo no va a trabajar porque el equipo no existe. Entonces en el momento en que guardo esto, no veo ninguna salida porque hay un error en la consola. ¿Bien? Eso se entiende. Ahora la cosa es que tenemos que mostrar el tema por aquí. ¿Bien? Entonces, ¿cómo mostramos? Necesitamos consumir el contexto, ¿verdad? Entonces necesitamos consumir el contexto en ellos componente. ¿Bien? Entonces voy a venir aquí a ellos componente. Bien. Y aquí en alguna parte, voy a hacer uso de ellos por aquí. Diré que el tema es igual a usar contexto, y el nombre del contexto que tenemos es tema Bien, no es componente de equipo, sino que son ellos contexto de aquí. Bien. Y luego voy a guardar esto. Bien. Y aún no estoy viendo la salida. ¿Bien? Entonces al verificar el error, aprendí que crear Contexto no está definido, entonces hay un problema con las entradas, ¿de acuerdo? Entonces, si te desplazas hacia arriba por aquí. ¿Bien? Literalmente no hay entrada para importar, crear contexto y usar contexto. Diré Control y Shift Control y espacio por aquí y sacarás esto de lo sugerido, ¿ de acuerdo? Entonces seleccionaré esto y esto probablemente se importará en la parte superior. Si no se imputa, solo agrega esto si no sucede automáticamente para ti. ¿Bien? Y me desplazaré hacia abajo. También se supone que usar Contexto debe ser importado, así que voy a decir control y espacio por aquí al final del uso Contexto, y seleccionaré esto. Si te desplazas hacia arriba, puedes ver también se está agregando Contexto. Yo guardo esto, ¿ok? ¿Cuál es el error ahora que estamos recibiendo? ¿Bien? Por lo tanto, el error no detectado en el contexto de referencia ellos no está definido en el componente de tema Bien, entonces es que está diciendo que no está definido porque esto está dentro de esta aplicación componente, ¿verdad? Entonces tenemos que mover esto afuera, ¿verdad? Entonces lo que voy a hacer es venir aquí y lo crearé por aquí. Y ya puedes ver la salida, ¿de acuerdo? Entonces sí, esto debería funcionar bien ahora. Bien. Entonces, lo que estaba pasando es que tenía el contexto creado dentro del componente de la aplicación, y estaba tratando de acceder a él desde otro componente. Entonces eso no funcionó, claro. Bien. Así que he creado el contexto, ¿verdad? Está creado, pero puedes ver no hay valor por aquí, así que puedo proporcionar un valor predeterminado aquí. Puedo decir luz, por ejemplo, puedo guardar esto y se puede ver el tema actual es luz por aquí. Bien. Entonces esto es lo que es el contexto de uso. Básicamente es mostrar el valor predeterminado que estamos teniendo por aquí. Se está creando un contexto, y este contexto se está consumiendo en el componente temático. ¿Bien? Entonces así es como puedes en lugar de hacer uso del trolling de utilería, bien, puedes hacer uso del contexto aquí y puedes hacer uso de los datos a través de los componentes Bien. Entonces espero que esto tenga sentido, y espero que hayan podido seguirlo. 19. Crea e implementa un proveedor de contexto en React: Ahora use Contexto tiene este concepto de proveedores, bien, que se utiliza para proporcionar un contexto. Ahora, por aquí, tienes que usar Contexto, ¿de acuerdo? Esta es la jerarquía con la que trabajaremos, ¿de acuerdo? Tenemos el componente A de la aplicación, componente B, y el componente está anidado Este componente de equipo necesita equipo y la aplicación tiene el tema. ¿Todo bien? Ahora por aquí, necesitamos hacer uso de proveedor, ¿verdad? Entonces esta es una sintaxis para hacer uso del proveedor. Entonces puedes decir mi contexto, que es el nombre del contexto punto proveedor y pasar en el valor, y esto debe envolverse alrededor del componente, como puedes ver, donde quieres proporcionar el contexto. ¿Bien? Ahora bien, ¿por qué quieres proporcionar el contexto? ¿Bien? Entonces aquí, hemos creado el contexto, y estamos consumiendo el contexto en el componente temático de aquí. ¿Bien? Es un componente diferente. Ahora lo que pasa por aquí es que si estos componentes están todos en el mismo archivo, si estos componentes se descomponen en archivos individuales, entonces esto no funcionará, porque entonces tendrás que exportar el contexto del tema de un archivo y obtenerlo ingresado en el otro archivo para que funcione, ¿verdad ? el contexto del tema de un archivo y obtenerlo ingresado en el otro archivo para que funcione, Y también, un problema por aquí es que el contexto del tema es que ahora mismo tiene un valor predeterminado que está siendo utilizado por el componente theme. Entonces mañana si quieres pasar el mismo contexto a algún otro componente con un valor diferente, no puedes hacerlo. Y para eso, necesitas proveedor, ¿de acuerdo? Entonces, ¿qué es proveedor? Proveedor básicamente envuelve el componente que necesita acceso al contexto o valor, ¿de acuerdo? Y el valor que se está aportando. Entonces este valor es el valor que se proporciona para el contexto aquí, ¿de acuerdo? Entonces este contexto estará disponible con este valor para este componente. Eso se está envolviendo y también todos los componentes anidados que se envolverán dentro de este componente en particular ¿Bien? Entonces déjame demostrarte esto. Todo bien. Entonces lo que vamos a hacer es que ahora vamos a hacer uso del proveer por aquí. Entonces voy a copiar la sintaxis por aquí. Bien. Y vengamos aquí al componente A por aquí, y después de H dos, o digamos que en la parte superior por aquí, bien, antes de TIF voy a agregar esto, y aquí se agrega el cierre automático. Voy a cortar esto, bien, y me lo llevaré aquí. Bien. Ahora mismo, esto está envuelto y necesito agregar el valor por algún valor por aquí, ¿de acuerdo? Y lo que voy a hacer es decir oscuro por aquí. ¿Bien? Entonces digamos que estoy pasando en el mismo contexto con el valor que de la oscuridad. Y si guardo esto, bien, me sale un error. Déjame ver cuál es el error. Bien, el error es obvio. Mi contexto no está definido, ¿bien? Entonces cometí un pequeño error aquí. Estoy haciendo uso de mi contexto. Debe ser el nombre del contexto, que es el contexto del tema. Yo sólo reemplazaré esto por aquí. Entonces tema contexto punto proveedor, valor es igual a oscuro. Y si guardo esto, verás que el tema actual es oscuro por aquí. ¿Bien? Entonces así es como puedes hacer uso de proveedores en el código, bien, o junto con Context. Ahora bien, esto es muy útil porque sea cual sea el contexto que esté proporcionando aquí con la ayuda de los proveedores, está disponible en todo el árbol de componentes, bien. Y básicamente, también se puede acceder a él desde el componente anidado, ¿verdad Ahora el beneficio aquí es que, aunque el componente en el futuro, aunque el componente en el futuro, separe el componente en archivos individuales, entonces el contexto estaría disponible para componente de tema porque se están pasando a través de un proveedor. Bien. Si no estás haciendo uso de proveedor, entonces tienes que exportar e importar el contexto. No es bueno, y también tienes el valor predeterminado y no el valor modificado. ¿Bien? Así que mañana si quieres reutilizar el contexto para algunos otros componentes, ya sabes, puedes modificar este valor predeterminado y pasarlo de la manera que estamos haciendo por aquí, ¿de acuerdo? Entonces aquí sólo estamos modificando el valor por defecto. El valor predeterminado es light, y estamos pasando en la oscuridad por aquí porque queremos dark, y estamos viendo la salida por aquí. ¿Bien? Entonces sí, espero que tengas claro qué son los proveedores y la importancia del proveedor y cómo puedes aprovecharlo. 20. Actualización dinámica de valores de contexto: Entonces ahora hablemos de cómo se puede actualizar el valor del contexto, ¿de acuerdo? Y lo que vamos a hacer es aquí, tenemos este contexto particular llamado contexto temático. ¿Bien? Nos está dando el valor del tema, ya sea claro u oscuro. Y estamos pasando en la oscuridad por aquí a través del proveedor de temas, ¿de acuerdo? Proveedor de contexto de tema, debería decir, bien, o proveedor de contexto. Y entonces estamos accediendo a este contexto aquí en el componente anidado, ¿bien? Y lo estamos mostrando como oscuro. Bien, puedes verlo por aquí. Bien. Ahora bien, lo que haría es tener un patrón por aquí, ¿de acuerdo? Eso dirá alternar el tema, y alternaría el tema a través de la aplicación. ¿Todo bien? Eso es lo que vamos a implementar. Y haciendo esto haciendo esto, aprendemos cómo se puede actualizar el valor del contexto dinámicamente, en un evento. ¿Bien? Entonces, lo que primero voy a hacer aquí es que voy a introducir un estado dentro del componente. ¿Bien? Entonces por aquí, voy a decir const o, y voy a llamar a esto como tema por aquí. ¿Bien? Y voy a decir ponerlos esto es Esto es estado de uso. Vamos a hacer uso del gancho estatal de uso por aquí. Voy a decir use state, y voy a pasar el valor por defecto como light. Bien. Ahora bien, a la hora de aportar el valor al contexto, lo que voy a hacer es que me voy a deshacer de esto y voy a decir tema por aquí. Bien. Entonces, cualquier valor que tenga este equipo se está pasando al proporcionar aquí o al proveedor de Context, ¿de acuerdo? O o en el contexto, a través del proveedor, debería decir. ¿Todo bien? Ahora, lo que tengo que hacer es introducir un botón. Entonces al hacer clic del botón, lo que sucederá es activará una función que actualizará el valor de ellos a la luz. Entonces, si es claro, lo convertirá en oscuro y si es oscuro, lo cambiará a luz, algo así. Entonces voy a decir const toggle theme. Eso es lo que voy a llamar a esta función y voy a hacer uso de las funciones de flecha en JavaScript por aquí. Y aquí, voy a decir set theme Bien. Así que set theme es básicamente el conjunto de funciones para este estado, ¿de acuerdo? Establecer tema, diré equipo anterior. Bien. Y voy a decir equipo anterior. Entonces si el equipo anterior es igual a la luz por aquí. Yo equipo anterior es igual a la luz, estoy haciendo uso del operador ternario por aquí Voy a decir que el equipo anterior es ligero, luego asignarlo oscuro de lo contrario asignar luz. Entonces, si no es ligero, entonces lo mantendrá ligero, ¿de acuerdo? Algo así. ¿Bien? Entonces Ti es el este es el código completo de aquí. Bien. Así que sólo voy a cambiar. Yo sólo tomaré estas dos líneas anteriores. Y voy a guardar esto. ¿Bien? Ahora, esto está hecho. Bien. Voy a alinear esto con un punto y coma por aquí Solo estoy haciendo uso de un operador ternario para alternar el tema por aquí, basado en la comparación ¿Bien? Y voy a tomar este tema de toggle, y lo que voy a hacer es aquí en este componente en particular, voy a añadir un click de botón. ¿Bien? Así que justo antes de que se agregue el componente, voy a decir botón por aquí, algo como esto, y voy a decir toggle theme por aquí. Bien. Y voy a decir al click. Vaya, no en Puede jugar al hacer clic por aquí, voy a decir Toggle theme, y voy a guardar esto Así que ya ves, tengo este botón de alternar por aquí, ¿de acuerdo? El tema actual es ligero por aquí. ¿Bien? Puedo alternar esto para hablar y encender. Se puede ver. Entonces se está actualizando el contexto, el valor dentro del contexto. ¿Cómo se está actualizando? Se está actualizando con la ayuda de la variable de estado por aquí. Entonces hemos vinculado esta variable de estado con el valor en el contexto. Entonces, lo que sea que tenga la variable de estado, ¿de acuerdo? Eso es lo que se va a exhibir y pasar a los componentes. Ahora bien, una cosa más me gustaría mencionar si está haciendo uso de este contexto a través de múltiples componentes. Entonces aquí, lo estoy pasando a este árbol de componentes componentes, quiero decir, estoy pasando este contexto particular a este árbol de componentes. A través de este proveedor de equipo o el proveedor de contexto, ¿verdad? Ahora bien, si tengo un componente más tres, y estoy pasando en el mismo contexto a ese árbol de componentes también. ¿Bien? Entonces si estás cambiando el valor por aquí, cualquier cambio que estés haciendo aquí con la ayuda de este botón. Para que ese árbol de componentes no se vea impactado porque eso está completamente separado. Y aunque estés pasando en el mismo contexto, ¿de acuerdo? Pero estás haciendo uso de proveedores, aquí mismo. Entonces esos dos árboles están separados. Entonces este árbol está separado. Y si creas un árbol más pasando por ahí en el mismo contexto, ¿de acuerdo? Los cambios aquí en este contexto en particular no afectarán al de allí porque estás pasando los valores a través de un proveedor. ¿Bien? Espero que esto tenga sentido por aquí. Bien, entonces se puede hacer la reutilización o el contexto puede ser reutilizable, ¿de acuerdo? Y hay que hacer uso de proveedor para envolver el árbol dentro de un proveedor. ¿Bien? Entonces sí, espero que esto tenga sentido en cuanto a cómo funciona esto. Bien, te mostraré esto en una vista de pantalla completa también por aquí. Bien, para que puedas ver el tema de Togo, Light tak. Puedes agregar algún tipo de márgenes o relleno al botón de aquí. Así que en app dot CSS, puedo decir botón por aquí. Botón, y voy a decir relleno o voy a decir margen, y voy a decir cinco píxeles. Bien, algo así. Veamos qué sucede esto. Bien. Ahora hay cierta brecha, y esto se está alternando muy bien. Bien, puedes ver, ¿verdad? Entonces esto es lo que Así es como puedes hacer uso de estados con contexto, y puedes obtener el valor actualizado en un contexto basado en el valor en el cambio de estado. ¿Bien? Espero que hayas podido seguirlo, y espero que esto sea útil. 21. El alcance es importante: explora el comportamiento contextual dentro y fuera de los proveedores: Ahora, déjame decirte una cosa importante sobre los proveedores de contexto, ¿verdad? Entonces se usa un proveedor de contexto para proporcionar un valor modificado al componente dentro de su árbol, ¿de acuerdo? Ahora bien, lo que está modificando, es modificar el valor de contexto predeterminado. Entonces aquí tenemos luz, por ejemplo, estamos creando el contexto con el valor predeterminado de light, pero al pasarlo al proveedor, podemos modificar el valor a dark y pasarlo, ¿bien? Por lo tanto, el proveedor de contexto se utiliza para proporcionar el valor modificado a los componentes dentro de su árbol. ¿Todo bien? Ahora bien, este valor solo es accesible para los componentes envueltos por el proveedor y no fuera de eso. ¿Bien? Entonces, si modificas un valor usando un proveedor y lo pasas por el árbol de componentes como lo estamos haciendo aquí en nuestro caso, ese valor modificado no está automáticamente disponible globalmente o fuera del árbol donde se usa el proveedor. Los componentes fuera del árbol utilizarán el valor de contexto diferido o el valor de proveedor diferente si lo envuelve otro proveedor ¿Bien? Déjame mostrarte esto. Todo bien. Entonces lo que voy a hacer aquí es demostrar esto que este proveedor de contexto se usa para pasar el valor dentro ese árbol de componentes y no fuera de eso. Lo que vamos a hacer es que vamos a tener un componente más, ¿bien? Y voy a crear un componente, se va a llamar un componente global. Así que voy a llegar al fondo por aquí. Déjame duplicar esta cosa de aquí. Y en la parte inferior, voy a agregar un componente más. Voy a llamar a esto como componente global. Algo como esto. Componente global, bien. Descansar todo es igual, ¿de acuerdo? Es solo un componente diferente, componente global, y estoy llamando a esto como componente global. Y aquí, voy a decir proveedor externo. Bien. Lado, proporcionar, algo como esto. ¿Bien? Entonces esto es lo que estoy haciendo. Yo no voy a añadir alguna otra agua por aquí, púrpura, por ejemplo, y voy a ver esto. ¿Bien? Entonces este es un componente global que se ha creado. Ahora me desplazaré hacia arriba por aquí. ¿Bien? Y lo que voy a hacer es agregar este renderizado de componentes globales por aquí, al renderizar el GSX por aquí ¿Bien? Entonces, lo que haría es por aquí justo antes del proveedor de contexto temático. Yo primero, primero tendré que asegurarme de envolver todo esto en un div, porque la raíz tiene que estar ahí tiene que haber una raíz, ¿verdad? Envuelvo todo esto en este div. ¿Bien? Ahora, dentro de este div, lo que voy a hacer es que voy a tener un componente global, algo así. Componente global, voy a tener una etiqueta de cierre automático. Voy a ver si esto. Bien. Se puede ver este componente global aquí arriba por aquí. ¿Bien? Ahora bien, si ves si alterno el tema, puedes ver que el tema actual dentro del componente global es ligero. Bien. Y dentro de la app aquí o dentro de la jerarquía de app app component hierarchy, que ahí también es ligero, o Pero el componente global está fuera de la jerarquía. Puedes ver que está fuera del proveedor por aquí. ¿Bien? Por lo que no se ve impactado por el proveedor. Ahora si cambio, si cambio el tema, vamos a ver, se puede ver que el valor del tema actual se está actualizando sólo dentro del componente de tema o dentro de este árbol es lo que debería decir, ok este árbol que tenemos, pero no fuera. A pesar de que está haciendo uso del mismo contexto, el valor no se está actualizando . Ese es el punto que quiero hacer. ¿Bien? Ahora, mañana, puedo reutilizar este componente, componente global, y fuera de este proveedor al final, puedo pasarlo de nuevo y esta vez, puedo envolverlo en una provisión separada por aquí. Lo que voy a hacer es que voy a hacer un poco de envoltura por aquí, y voy a cortar este componente global. Voy a mover esto dentro de una oferta diferente por aquí. Ahora es un proveedor diferente, presentador. Bien. Ahora es un proveedor diferente, y por aquí, el valor que estoy aportando es oscuro. Digamos, por ejemplo. Bien. Diré Dak por aquí. Voy a guardar esto. Puedes ver que este proveedor es diferente. Es tener algún otro valor. ¿Bien? Así que quería modificar el valor por defecto. Entonces lo que hice es, agregué proporcionar por aquí y modifiqué el valor predeterminado a DAC. ¿Bien? Este está usando el valor predeterminado. ¿Bien? Este en la parte superior está usando el valor predeterminado. No hay proveedor envuelto en, y este está vinculado a una calle. Entonces esta cosa de aquí está ligada a una calle. Bien. Entonces hay tres usos del contexto como puedes ver, ¿de acuerdo? Ahora bien, si alternas el tema por aquí, verás que solo se está alternando en la jerarquía y no fuera de la jerarquía ¿Bien? Este es el punto que quiero hacer por aquí. ¿Bien? Y esto es muy, muy importante si quieres hacer uso de los proveedores y quieres entender cómo funcionan los proveedores o cuál es la importancia de tener un proveedor, ¿de acuerdo? Entonces, dentro del proveedor, el valor de contexto se controla y se puede modificar. ¿Bien? Entonces aquí, se puede ver que esta cosa es tener un proveedor. Está controlado, correcto, y se puede modificar, ¿verdad? El valor de contexto puede ser modificado. Y fuera del proveedor, fuera de este proveedor de aquí, por ejemplo, éste, bien, el contexto retrocede al valor predeterminado o al valor de otro proveedor, envolviéndolo en el árbol de componentes. ¿Bien? Entonces por defecto es fuera de este proveedor, por defecto será el valor por defecto de aquí, como se puede ver, actual ellos es luz y el valor por defecto es luz por aquí, ¿verdad Entonces el valor predeterminado o si no quieres el valor predeterminado, creas otro proveedor y pasas cualquier valor que quieras tener. ¿Correcto? Entonces así es como funciona. Y la alternancia dentro este proveedor no se ve afectada porque el componente global de aquí no es parte de este componentry y tampoco está envuelto dentro de este ¿Bien? Espero poder hacer un punto por aquí y espero que tenga claro lo que está sucediendo. ¿Bien? Entonces, si estás modificando un valor usando proveedor y pasándolo por los componentry, ese valor modificado no está automáticamente disponible globalmente o fuera del árbol donde se usa el proveedor, ¿de acuerdo? Los componentes fuera del árbol usarán el valor de contexto predeterminado como estamos usando aquí, el componente global, o usarán un valor de proveedor diferente si se envuelven pi bajo el proveedor como lo estamos haciendo aquí. ¿Bien? Pero el valor dentro este árbol no está disponible afuera, ¿verdad? Espero que esto quede claro y espero que ustedes sean capaces de entender este punto. 22. Hooks personalizados 101: crea lógica reutilizable en React: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de ganchos personalizados en react. Ahora bien, ¿qué es un gancho personalizado? Así que el hook in react personalizado son funciones que te permiten reutilizar la lógica en múltiples componentes. Todo bien. Ahora, cuando estás construyendo aplicaciones con react, hay componentes, ¿verdad? Así que aquí tenemos un componente, ¿de acuerdo? Entonces es un componente muy simple que está devolviendo ganchos personalizados en el encabezado o usando la etiqueta H one, ¿verdad? Ahora bien, este es un componente, pero en la aplicación real, posible que tenga múltiples componentes y podría estar haciendo uso de mucha lógica a través de diferentes componentes. Ahora bien, si existe algún tipo de lógica común en su componente, lo que puede hacer es convertir esa lógica o encapsular esa lógica en un gancho personalizado, y puede reutilizar ese gancho y puede reutilizar ese gancho a través de los componentes en su aplicación de reacción ¿Bien? Ahora, también tienes anzuelos inbilt, Y aquí sí tengo un par de declaraciones de entrada en la parte superior, usar contexto, usar estado, usar efecto, ¿de acuerdo? Estos son todos los ganchos incorporados que tienes, ¿de acuerdo? Y estos están diseñados para dar componentes funcionales. Entonces, los componentes funcionales son los componentes que estamos definiendo usando funciones, ¿de acuerdo? Entonces estos se definen para dar a los componentes funcionales, el acceso a características como eventos de ciclo de vida de estado en contexto, ¿verdad? Y están estandarizados, definidos por react, y están optimizados para un conjunto común de tareas, ¿verdad? Así que estos están integrados que estás importando y reutilizando en tus componentes, ¿de acuerdo? Pero mañana si quieres reutilizar algún tipo de lógica, incluso puedes crear tu propio gancho personalizado, lo que significa que es un gancho definido por el usuario, ¿de acuerdo? Y siempre que estés definiendo, la sintaxis básicamente es que debería comenzar con este uso por aquí. Bien, debería comenzar con el uso. Entonces se puede usar componente o usar EPI o algo así, como quieras llamarlo Bien, use contador Bien, entonces debería comenzar la convención normal es básicamente comienza con el uso. ¿Bien? Entonces, ¿qué son los ganchos personalizados? Estas son funciones que tú mismo creas para reutilizar la lógica a través de los componentes, ¿de acuerdo? Y eso es lo que es. puede pensar en ello como una receta, bien, que no es más que un conjunto de tareas comunes o conjunto específico de operaciones que se desea realizar. Y no quieres repetir el código a través de múltiples componentes, así que solo lo definas una vez y lo reutilizas en todas partes. ¿Bien? ¿Por qué se necesitan estos? Entonces, por supuesto, una razón importante que podrías obtener de la definición es la reutilización ¿Bien? Por lo que te permite reutilizar mucha lógica. Te permite eliminar mucha repetición y te ayuda a organizar tu código de una mejor manera. ¿Bien? Hay muchos anzuelos incorporados también de los que ya conocemos Debes estar al tanto si estás construyendo con reaccionar. Entonces estos son todos los ganchos incorporados. Al igual que, algunos de los ganchos que he agregado en la parte superior, crean contextos, usan contexto, usan estado. ¿Bien? Entonces estos son ganchos inbilt, y los ganchos personalizados son los ganchos que están definidos por el usuario ¿Bien? Ahora, una pregunta que podrías pensar ahora mismo, o? Entonces, al mirar esta definición, ¿en qué se diferencian estas de las funciones normales de Ja Script? Las funciones también son bloques que puedes definir una vez y reutilizar en tu aplicación. ¿Por qué no simplemente crear funciones en lugar de ganchos? ¿Por qué existe en primer lugar este concepto de ganchos? Los ganchos son diferentes cuando lo comparas de las funciones de aquí. Ahora bien, ¿en qué se diferencian? Ahora, los ganchos personalizados pueden hacer uso de las funciones de reacción. Ahora, cuando digo características de reacción significa ganchos personalizados pueden usar la administración de estado, como usar el gancho de estado para administrar el estado del componente, lo que las funciones JS normales no pueden. ¿Bien? Los ganchos personalizados también tienen control de ciclo de vida, por lo que pueden hacer uso del gancho de efecto para manejar los efectos secundarios como la obtención de datos, y las funciones JS normales no pueden ¿Bien? Hay mucha reutilización involucrada por allá también. Sí, los ganchos personalizados básicamente siguen las reglas de reacción para los ganchos y aseguran un comportamiento consistente. Entonces esa es la razón por la que este concepto de ganchos es diferente. Al igual que este concepto de ganchos personalizados, esencialmente es diferente al de las funciones normales de Jascript Ja Las funciones de script son limitadas, ¿de acuerdo? Pero cuando quieres tener un conjunto específico de reusabilidad de reaccionar , llegas a ganchos personalizados. Todo bien. Entonces espero que esto tenga sentido. Ahora bien, lo que haría es deshacerme de estos insumos en la parte superior. ¿Bien? Estos no son realmente necesarios en este momento. Ahora, lo que haremos es ir un poco manos a la obra y crear nuestros propios ganchos personalizados. ¿Bien? Entonces lo que haremos es crear primero un componente de contador. Este es un componente que nos ayudará a mostrar en contador normal con dos botones de incremento y decremento y se puede decrementar el valor del contador así como ¿Bien? Entonces este es el componente que vamos a crear uno muy simple, y luego vamos a extraer la lógica del contador en un gancho personalizado, y eso nos permitirá reutilizar el contador a través múltiples componentes en múltiples lugares. Entonces eso es algo que vamos a explorar. Entonces, comencemos con esto. Es aquí lo que tengo es un proyecto simple de reaccionar, proyecto reacción de trigo, diría yo. Tengo main.j6, como pueden ver, que es la aplicación de renderizado Y aquí, si vienes, esta es app dot JSX Bien. Ahora lo que voy a hacer aquí es comenzar con lo del contador, voy a tener un estado por aquí. Entonces primero lo primero estado, voy a tener conteo por aquí, set count, algo así, y voy a decir use State Okay. Y voy a añadir cero por aquí. Bien. Entonces este es nuestro estado de aquí. Voy a añadir dos funciones. Diré incremento. Esta es una función. Es una función de flecha que estoy creando por aquí. Y en realidad, no necesito agregar llaves porque solo hay una línea de recuento de conjuntos de códigos. ¿Bien? Y voy a decir contar más uno. Bien, cuenta más uno, algo así. Bien. Y voy a tener un decremento también, función decremento. Entonces esto es incremento, decremento. Bien. Y en vez de incrementar por aquí, sólo voy a decrementar este menos uno Vaya, no en, es menos. Todo bien. Entonces esto está hecho. Y ahora por aquí, estoy en cabecera. Aquí sólo voy a decir contar, y voy a mostrar conteo a algo así. Bien. Y algo así como H uno, me quedaré con esto como H dos. Y voy a ver si esto se puede ver cuenta de cero, y por aquí, voy a tener un par de botones. Bien. Entonces la etiqueta del botón, necesito agregar botón. Diré que esto es botón de incremento. Bien, y al hacer click, voy a decir incremento aquí, así Bien, este es un botón. Voy a añadir un botón más aquí. Entonces esto es, y voy a decir decremento. Bien. Decremento, algo así Entonces sí, este es el contador que tenemos ahora. Si aumentas el contador, verás que aumenta, puedes disminuirlo también. También irá a negativo. ¿Bien? Un contador muy sencillo es lo que hemos creado. ¿Bien? Ahora, lo que haremos es extraer una lógica de contador en un gancho personalizado y haremos uso del gancho personalizado en nuestra aplicación. ¿Bien? Entonces hagámoslo. Entonces primero lo primero, lo extraeré en un archivo separado. Bien. Así que voy a tener un archivo por aquí bajo SRC Voy a llamar a este archivo como podemos llamarlo como usar contador punto JSX, algo así Bien. Y por aquí, sólo voy a replicar mucho código que ya tenemos Así que voy a copiar todo esto de la función por aquí. Bien. Esto y lo pegaré por aquí. Bien. Ahora vamos a recortarlo. Bien, necesito agregar una importación, que es el estado de uso en la parte superior. Bien, el estado de uso ha sido importado. Y aquí, en vez de función, esto es use counter, y necesito exportar use counter, así que voy a decir export, default, use counter. Esto está hecho. Bien. Y lo que tenemos que hacer es que estamos haciendo uso del Estado por aquí. Estamos haciendo uso del incremento, y al regresar, no necesitamos devolver el JSX, este JSX Esto no es algo que vamos a devolver, pero lo que vamos a devolver es que vamos a devolver el conteo. Bien, entonces volveremos a contar. Volveremos incremento, y volveremos decremento, algo así Y esto no va a ser un soporte redondo. Esto será igualmente corchete. Entonces sí, esto está hecho. Bien, entonces creo que estamos todos ordenados. Bien, estamos creando estado. Estamos creando incremento, decremento, estamos teniendo conteo, y estamos exportando contador de uso Así que este es un gancho personalizado que hemos creado donde en realidad estamos teniendo algo de lógica, y estamos haciendo uso de características relacionadas con reaccionar, puedes ver. Estamos haciendo uso de los estados y todo, ¿no? Y eso es algo que estamos regresando también. Ahora, por aquí, si vienes a app dot Jx, lo que tenemos que hacer es aquí necesitamos hacer uso del gancho que hemos creado ¿Bien? Porque usa contador, si le echas un vistazo, es nuestro gancho personalizado el que está manejando la lógica del conteo. Está administrando el estado, y está devolviendo el conteo actual junto con las funciones de incremento y decremento por aquí ¿Bien? Entonces necesitamos actualizar el componente contador de aquí que estamos teniendo en la app. El nombre del componente es app. Y está representando contador. Por lo que necesitamos actualizar esto para hacer uso de gancho personalizado. Entonces lo que vamos a hacer es que me desharé de todo esto. No necesitamos esto. Esto es pasar al gancho personalizado, y en su lugar voy a decir const voy a decir contar Diré incremento, voy a decir decremento, algo así Diré igual a, voy a decir usar contador. Así. Bien. Y si, esto es todo. Estamos haciendo uso del gancho de mostrador de uso. No necesito usar Estado ahora en mi aplicación. Para que puedan ver el momento en que dije usar contador por aquí, bien, la declaración de entrada se agregó en la parte superior por aquí. Puedes ver esta declaración de entrada. Bien. Entonces puedes ver cómo ahora este código se ha vuelto mucho más fácil de administrar. ¿Bien? Puedo guardar este archivo. Puedo refrescar esto, y no se ve nada cambia en la salida. Funciona absolutamente bien. ¿Bien? Entonces, lo que hicimos fue reemplazar la gestión interna de stet del componente de contador con nuestro gancho de uso Y esto hace que nuestro contador de componentes sea más limpio. Y reutilizable para cualquier tipo de lógica relacionada con el conteo. ¿Bien? Mañana, digamos si quieres hacer uso de este componente a través de múltiples o mañana si quieres hacer uso de esta funcionalidad de contador a través de múltiples componentes. Lo que puedes hacer es tener un contador creado como este contador de uso. Bien, hay un gancho, que es hacer la gestión de contar las cosas, ¿verdad? Y puede importar esto en varios lugares y usarlo en diferentes componentes. Mañana, si tienes que actualizar esta lógica de conteo, no tienes que ir a averiguar, oh, qué componentes están usando esto, déjame revisar. Sólo hay que actualizarlo de inmediato en este archivo en particular. En el momento en que lo actualizas en un archivo, los cambios se reflejan en todas partes. Entonces esa es una magia de reutilización, como te puedes imaginar. ¿Bien? Entonces, ¿qué son los ganchos personalizados? Los ganchos personalizados en react son funciones que le permiten usar la lógica en múltiples componentes, y comienzan con el uso aquí. Eso es una convención. ¿Todo bien? Espero que esto haya sido útil y espero que hayan podido seguirlo. 23. Mejora la funcionalidad: actualiza y refactoriza los hooks personalizados: Oye, ahí. Entonces ahora lo que vamos a hacer es que tenemos este gancho personalizado que estamos haciendo uso de por aquí que creamos. Se trata de un gancho de contador de uso, que nos está ayudando a administrar el conteo y la funcionalidad para el mostrador. Y estamos haciendo uso de esto para exhibir por aquí, ¿verdad? Y puedes reutilizar esto en tantos componentes como quieras, este usa gancho de mostrador. Lo que te voy a mostrar es cómo puedes actualizar tu gancho personalizado para agregar más funciones y cómo se refleja a lo largo de todo. Todo bien. Entonces aquí en este contador, lo que vamos a hacer es que vamos a agregar un botón más, que será el botón de reinicio que va a restablecer el conteo a un valor inicial. Todo bien. Entonces por aquí, lo que voy a hacer es que vamos a tener valor inicial. Entonces aquí en este gancho en particular, voy a aceptar valor inicial. ¿Bien? Entonces voy a decir valor inicial y vaya, valor inicial, y va a tener este cero como valor predeterminado por aquí, y por aquí, voy a tener reset ¿Bien? Entonces voy a decir const, voy a decir reset, Bien. Y voy a tener una función de flecha. Bien, no necesitamos llaves, así que voy a decir set count por aquí y restableceré esto al valor inicial, bien, sea lo que sea Bien. Y en vez de inicializar el estado de aquí a cero, lo inicializaré a valor inicial porque ahora estamos obteniendo el valor inicial como parámetro. ¿Bien? Y, bien, puedo quedarme igual por aquí. Todo bien. Esto es reset, y lo que también haríamos es devolveríamos este reset por aquí. Así que voy a decir resetear aquí, algo como esto. Bien. Esto está hecho. Ahora la función Reset se ha agregado por aquí en la vuelta, y lo que puedes hacer aquí es que puedes agregar un botón. Bien, entonces voy a agregar botón. Y este botón será botón de reinicio, y voy a tener función de reinicio. Pero el problema es que la función de reinicio no se está declarando por aquí, así que voy a decir reset, algo así. ¿Bien? Entonces sí, esto es todo. Todos estamos establecidos y también pasaremos un valor inicial ya que ahora acepta el valor inicial. Por lo que el valor inicial será cero en este momento. Voy a guardar esto, y puedes ver que se ha agregado el botón de reinicio, ¿de acuerdo? Ahora puedo incrementar, puedo decrementar, y puedo ver reset ¿Bien? Para que puedas ver cómo está funcionando bien la funcionalidad. ¿Bien? Ahora, cualquiera que sea el valor inicial que establezca, el contador comenzará a partir de ese valor inicial. Entonces, si pongo el valor inicial a datos de diez, el contador comenzará a partir de diez. Se puede ver que el conteo es de diez. Bien. Y puedes incrementar, puedes decrementar, y se restablecerá al valor inicial con el que pasaste Derecha. Entonces así es como puedes actualizar el gancho básicamente para agregar más funciones, y cualquier actualización a la que se refleje donde sea que se use ese gancho en particular. ¿Bien? Así que esa es la belleza de hacer uso de ganchos personalizados. Espero que esto quede claro y espero que hayan podido seguirlo. 24. Conclusión del curso: Y eso nos lleva al final de este emocionante viaje al mundo de los ganchos de reacción. Hemos explorado cómo los ganchos han revolucionado el desarrollo de React, permitiéndonos escribir código mucho más limpio y funcional Entonces, desde dominar los conceptos básicos del estado de uso y el efecto de uso hasta sumergirse en temas avanzados como usar contexto, usar ref y ganchos personalizados, hemos construido una base sólida para el desarrollo moderno de reaccionar En el camino, también hemos creado proyectos del mundo real como el recogedor de color, el rastreador de mouse y el reloj digital Y estos proyectos nos han ayudado a mostrar cómo estos conceptos cobran vida en aplicaciones prácticas. Pero recuerden, esto es solo el comienzo. El poder de los ganchos de reacción radica en su versatilidad y adaptabilidad Te animo a que sigas explorando más a fondo experimentando y construyendo nuevos proyectos con los conocimientos que has adquirido en esta clase Así que esto te ayudará a explorar la forma innovadora usar los ganchos de reacción en tus futuros proyectos y aplicaciones. Estoy muy emocionada de ver cómo vas a aplicar estas habilidades para crear aplicaciones dinámicas y receptivas. Recuerde, el aprendizaje es un proceso continuo y reaccionar brinda infinitas oportunidades de crecimiento y creatividad. No olvides completar los proyectos del curso que obtengas con esta clase en particular y compartirlo con toda la clase en la sección de proyectos. Tus proyectos no solo solidificarán tu aprendizaje y comprensión, sino que también inspirarán a otros en nuestra comunidad de aprendizaje a hacerlo Gracias por ser un grupo de aprendiz tan comprometido y entusiasta Espero que este curso no solo haya mejorado tus conocimientos, sino que también te haya inspirado a empujar los límites de lo que puedes lograr junto con reaccionar. Feliz codificación, y me gustaría desearle todo lo mejor en su viaje de desarrollo de reaccionar.