Hoy, a ver si soy capaz de mover esto por aquí,
si es la primera vez que vienes a una midu clase,
me gustaría decirte que este vídeo, esta clase que vamos a hacer hoy,
es una serie de clases que estamos haciendo para aprender React desde cero.
Y tenemos un repositorio donde puedes encontrar todo el código que hemos ido haciendo
y además cada una de las clases en vídeo.
Este repositorio lo tienes en GitHub, es midudev barra React Live Coding,
lo tenemos aquí, midudev barra React Live Coding.
Si no, pues te recomiendo que me busques a mí, midudev, me sigues,
ves los repositorios y vas a encontrar este.
Mira, este chico tan majo, este soy yo.
Este chico, qué rulos tenía aquí, qué peinado.
Vale, pues aquí puedes encontrar, bueno, tengo diferentes repositorios,
pues es este, este de aquí, React Live Coding, que tiene 41 estrellitas.
A ver si le damos estrellitas, le damos cariño y amor, ¿vale?
Vale, eso si te acabas de incorporar a esta clase
y no sabes por dónde va esto, hoy vamos a hablar de algo en concreto,
pero tenemos un montón de clases anteriores que puedes disfrutar.
Entonces, ¿de qué vamos a hablar hoy?
Hoy básicamente vamos a hablar de dos cositas, dos cositas.
A ver si tengo por aquí ya preparado, así, tengo aquí preparadas unas cuantas cosas.
Vamos a ver esto.
Uh, tengo el servidor, voy a ver dónde lo tengo.
Por aquí, vale.
Entonces, voy a levantar el entorno de desarrollo, voy a quitar todo esto,
este es nuestro proyecto, y voy a hablaros un poco de lo que vamos a hacer hoy.
Porque hoy, lo que me gustaría, voy a ponerme en primera persona para decirlo, ¿vale?
Hoy vamos a hacer básicamente dos cositas para nuestro proyecto,
nuestra aplicación de buscador de GIF.
Una va a ser ver cómo podemos utilizar el método del React DOM Create Portal
para crear portales en nuestra aplicación.
Veremos qué es un portal, por qué es interesante dominarlo,
por qué es importante.
Estoy muy seguro de que le vas a encontrar una utilidad.
Tiene una utilidad muy importante que vamos a ver en esta aplicación,
que es para las modales, porque vamos a ver que me gustaría que al hacer login,
en lugar de ir a la página de login, mostrase una modal.
Y esto ayuda al usuario a no perderse entre navegaciones.
Entonces, veremos que las modales tienen cierto problema en React,
o tienen, digamos, un reto que vamos a solucionar con Create Portal.
Y además, también vamos a ver cómo utilizar Formic para la gestión de los formularios.
Vamos a ver cómo hacemos el formulario con el register, el de registrarse.
Lo vamos a hacer con Formic.
Y también vamos a ver otra solución, otra alternativa,
que ahora está más de moda porque es más chiquitito,
porque parece ser que tiene mejor rendimiento, que es React Hook Form,
que es una alternativa.
Vamos a ver las dos y decide el que tú quieras,
el que más te guste es el que utilizas.
Pero vamos a ver los dos.
Entonces, voy a levantar el entorno de desarrollo.
Creo que se empieza un run start.
Levantamos esto por aquí.
Vale.
Y esto me lo deja en el puerto 3000 si todo ha ido bien.
Pues está en nuestra aplicación.
No sé qué te parece, pero a mí me gusta mucho.
Lo que hicimos en la última clase es este login.
Aquí habíamos puesto login y, bueno, pues podías loggearte.
Teníamos este login.
Lo vamos a arreglar un poquito en esta clase porque queda bastante triste.
Pero poníamos el usuario, el password, le dábamos a login.
Y esto ahora tarda, tarda un poquito porque ya no es localhost.
Ahora esto realmente ya lo he deployado.
Si te gustaría saber cómo lo he deployado, porque era una API de Dino,
por si no sabía, lo dijimos en la anterior clase.
Si te gustaría saber cómo lo he deployado, cómo lo he utilizado y tal,
pues te recomiendo que, pues nada, que me lo digas en los comentarios.
Y a ver, bueno, veo que ahora no está funcionando.
No sé si es que ha pasado alguna cosilla o es que de verdad está tardando un montón.
Estaba tardando un montón.
¿Por qué?
Porque lo he deployado en Heroku.
Y en Heroku, cuando pasa un tiempo que no estás utilizando ese servicio, se apaga.
Entonces lo tienes que deployar cuando lo utilizas.
Normalmente no debería tardar tanto.
De hecho, a lo mejor ahora si doy logout y vuelvo a hacer el login, no tarda tanto.
Entonces lo que estaba pasando es eso, que se está deployando el servicio
porque no se está utilizando y no lo deja abierto.
Y está bien porque así podemos utilizar la versión gratuita.
Aquí en API es donde teníamos toda la API con Dino y la he deployado con Heroku.
Y me ha gustado mucho y no sé, si os interesa, puedo hacer un vídeo sobre ello
para ver cómo se deployan servicios de Dino en Heroku.
Totalmente gratis, además, sobre todo al principio.
Pero bueno, eso es lo que habíamos hecho, el login.
También habíamos hecho esto, ¿no?
De tener los favoritos, que le podíamos dar un favorito y esto se guardaba.
Cuando le dábamos, pues esto se guardaba los favoritos y si refrescamos, pues seguíamos logueados
y seguíamos con nuestros favoritos.
Esto ya está en la API y ya está funcionando correctamente.
Entonces, a ver, ¿qué me dice William?
William me dice que si puedo subir el volumen del micrófono.
Vale, pues no lo sé.
Yo creo que está bastante bien.
O sea, o si me comentáis, si alguien me dice que lo estoy subiendo un pelín, ¿vale?
Porque ya está en amarillo, ¿eh?
Ahí os dijo.
Vale, me dice Ángel que sí, por favor, que un vídeo, vale, pues lo haré.
Que a mí me gustó, me gustó.
Y la verdad es que no he encontrado mucha documentación de cómo hacer un despliegue de Dino a Heroku
y creo que puede ser muy interesante.
Hola, Buenos Aires.
Hola, genio.
Dice Eliana Livingstone.
Muchas gracias, Eliana.
Vale, pues vamos a continuar con esto, si os parece, ¿vale?
Lo que vamos a ver es primero lo de la modal.
Porque lo que me gustaría es que cuando el usuario, aquí en el logout, vamos a cerrar la sesión,
cuando el usuario le da al favorito, lo que estábamos haciendo aquí era llevarlo directamente a la página de login.
Además, horrible la página de login.
Entonces, he pensado que lo mejor sería que le mostrásemos una modal, ¿vale?
Así que vamos a empezar por ahí.
Vamos a intentar conseguir mostrar una modal para hacer el favorito
y vamos a intentar arreglar un poco los estilos del formulario.
De hecho, creo que vamos a empezar por ahí.
Vamos a empezar por aquí para estilarlo un poco, ¿eh?
No soy ningún artista, no soy un UX, pero bueno, creo que puede estar interesante.
Antes, una cosa.
El login que tenemos, lo voy a poner aquí, vale.
Lo teníamos aquí.
Era una página, ¿vale?
Lo que vamos a tener que hacer, vamos a hacer esto más pequeñito por aquí.
Y esto lo vamos a poner por aquí, ¿vale?
Perfecto.
El login es la página entera y aquí ya tenemos todo el componente y todo.
Lo que voy a hacer antes es separarlo en un componente.
Voy a separar la página de login a un componente que se va a llamar también login.
¿Por qué?
Pues porque esto nos va a facilitar la vida a la hora de reutilizarlo como un componente dentro de la modal.
Entonces, podemos empezar por aquí.
Me lo voy a copiar todo a fuego dentro del componente este.
Lo único que va a cambiar es que este componente no debería tener el título.
El título se lo quitamos, ¿vale?
El título fuera.
Y lo demás, por ahora, yo creo que tiene sentido.
Entonces, lo que vamos a hacer en la página es simplemente importamos React.
Ah, bueno, voy a hacer el truquito este de esto, ¿vale?
Lo que vamos a hacer es que esta página se va a llamar login page.
No recibe nada por props.
Y lo único que tiene que renderizar es el componente de login.
Esto lo vamos a importar de components barra login.
Así de sencillo.
No es nada del otro mundo.
Esto debería seguir funcionando bien.
Perfecto.
Y ahora sí, vamos a poner los estilos, si os parece, del login.
Vamos a poner un login CSS.
Y vamos a importar estos estilos de login.css.
Que no se me olvide el punto barra, que esto siempre la lío, barra.
Vale, ya está.
Muy bien.
Entonces, ahora, una cosa.
Este login, lo he hecho el estilo en las páginas.
Esto no lo queremos poner aquí.
Esto lo voy a mover, lo voy a mover, este login, al componente.
Perdón.
Vamos a moverlo aquí.
¿Vale?
Y en las páginas, esto no lo vamos a tener aquí.
Quiero controlarlo desde el componente.
¿Vale?
Esto aquí.
Sí.
Aquí sí.
Vamos a necesitar, bueno, vamos a ponerle una clase aquí, form.
Que sea el formulario.
Y a partir del punto form, pues bueno, vamos a hacer cositas, ¿vale?
Si os parece, más o menos, que tenga sentido.
Vamos a poner que ocupe todo el ancho, pero que como máximo sean 320 píxeles.
Y esto ya, vale.
Ahora salta, pero bueno, ya lo arreglaremos.
Además, aprovecharemos y arreglaremos también un poco la accesibilidad.
Por ejemplo, aquí podríamos ponerle un label, que esto sea el username.
Y dentro le ponemos el input para que tenga directamente esta funcionalidad de poder darle.
¿No?
Ah, vale, vale.
Digo que no funciona.
Vale, ahora le damos un clic al username y entonces directamente pasa al input, que es justamente lo que queríamos.
¿Vale?
Entonces, esto lo mismo con el password.
Aquí vamos a poner un password.
Y dentro ponemos el input.
Y, hombre, esto nos va a ayudar, además, a estilarlo luego un pelín.
Vale.
Más o menos, ¿eh?
No prometo cosas, no prometo estilos que sean muy brutales, ¿vale?
¿Qué tal?
Llegando y gracias por la retro, dice Gadi.
Pues nada, bienvenido.
Aquí tienes tu sitio.
Saludos desde Buenos Aires, Argentina, dice Eli.
Pues saludos para ti también.
Vamos con el label.
Label, lo que vamos a hacer por ahora, pues nada,
que ocupe todo el espacio para que no estén en la misma línea.
Y a lo mejor lo que podríamos hacer es que tenga un margen.
O por ahora, sí, vamos a ponerle un margen, aunque sea chiquitito, para que, vale, al menos,
ahora el input también vamos a hacer que también se vaya.
Claro, el label, como el input está dentro del label, por eso se ha quedado en la misma línea.
Pero ahora lo que podemos hacer en el input es que tenga el display block.
Y esto ahora sí que nos va, nos debería, pum, lo tira para ojo.
Luego vamos a hacer que tenga un margen también.
Sí, mira, Esteban también habla de esta forma de hacerlo, ¿eh?
A mí personalmente me gustan cualquiera de las dos.
Pero bueno, para hacerlo rápido, esta es tan correcta como la que comenta Esteban, ¿eh?
O sea, al final, si un label está envolviendo un input, al final, como que ya entiende que ese label es de ese input.
Pero también puedes utilizarlo con los for, es decir, el input le pones una id o le pones el name,
bueno, le tienes que poner el id, y le dices label for tal.
Bueno, el que prefiráis, ¿eh?
Si os gusta más el otro, pues perfecto, no hay ningún tipo de problema, es una alternativa.
Vamos a hacer que este label sea un pelín más chiquitito, ¿vale?
Para que no salte tanto a la vista.
Y aquí, pues nada, vamos a darle un color.
El borde yo creo que ya está quitado, pero bueno.
Y a esto vamos a darle más...
¿Esto debería ser 100%?
Pues igual sí, ¿no?
Lo que...
Este botón, lo vamos a poner, el botón, también lo vamos a poner con el estilo que tenemos en la home.
Mira, el estilo que tenemos en la home es este botón que es como este, este de aquí.
Pues esto es porque tiene la clase btn, entonces vamos a utilizarlo aquí y que tome la misma clase.
Y así también, pues si hace falta, pues lo estilamos de alguna forma aquí y coloca falta.
También podríamos ponerle que tenga todo el width, este, y que se vaya poniendo.
Aquí esto me extraña porque quiero que tenga un poquito...
Ah, claro, porque el label, vale.
Esto lo vamos a quitar de aquí.
Lo que vamos a hacer es que sea el input, que tenga el margin top un poquito, un poquito, vale.
Sí, que tenga un poquito de espacio ahí.
Y nada, ya pues un line high 1.5 o más, de 2.
De 2, vale.
Y nada, le damos un poco de padding, que esto, el padding, pues sea arriba, abajo, esto ya está así, y esto pues que sea de 4.
Y bueno, que tome un poquito de...
Igual un poquito más.
Bueno, ya está.
Si quieren arreglarlo, ya saben que yo os dejo que hagáis todas las PRs que quieran y mucho más.
Creo que la fuente sí que la podríamos arreglar, ¿no?
Vale, más o menos, ¿vale?
Tampoco hace falta que nos volvamos locos.
Entonces, la página, vamos a hacer que la página sea la que tiene el título, ¿vale?
Para que aquí pongamos lo que antes he quitado y pongamos que esto sea el login.
Así que esto lo empujamos, vale.
Más o menos, ¿vale?
Ya tenemos el login un poquito más estilizado.
Ahora lo que vamos a hacer, si os parece, es utilizar el componente para la modal.
O vamos a crear la modal directamente.
Vamos a crear aquí una modal.
Modal.
Y vamos a poner aquí un index.js.
Y vamos a crear el componente de React.
Esto es la modal.
La modal va a recibir primero un children, que va a ser el contenido de la modal.
Y luego vamos a hacer una forma para cerrarla desde fuera.
Que la podamos cerrar, ¿vale?
Así que un children, que es lo que envuelve la modal, lo que va a mostrar.
Y un onClose, para cuando le demos a la X.
¿Vale?
Entonces, vamos a ver.
Esto vamos a poner un dip, que sea la modal.
Vamos a hacer una modal desde cero.
Por lo tanto, espero que no esperéis que sea una modal con superanimaciones, ni nada raro.
¿Vale?
Vamos a hacer una modal muy sencillita, pero que nos va a servir para cerrarla, para ver lo que tenemos que hacer.
¿Vale?
Button onClick.
Vale.
Aquí, en el onClick, vamos a buscar a ver si tenemos una X que nos sirva.
Ay, pues a mí esta me gusta, ¿eh?
Pues igual vamos a usar esta.
Bueno, no sé cómo quedará, pero...
Y el botón este, sobre todo que tenga el estilo del botón que tenemos por ahí.
Este, esto va a renderizar el children y esto sería nuestra modal por ahora.
Creo que no se me ha olvidado nada.
Vámonos a la home y vamos a utilizar esta modal, ¿vale?
Entonces, como lo que queremos es que al hacer FAP, a ver, aquí, al hacer FAP,
¿qué es lo que estaba haciendo ahora?
Primero vamos a explicar un poco lo que estaba haciendo ahora y a ver qué os parecía, ¿no?
Aquí es que si no estaba logueado, lo que hacíamos era navegar al login.
Y claro, esto es lo que yo digo que no me convence mucho, ¿no?
Porque le damos y pum, te lleva a la página.
Y hombre, yo creo que estaría mejor si aparece una modal y ahí le permite al usuario loguearse
y ahí pues hacemos lo que veamos que desea, incluso navegar, ¿no?
Pero al menos que no rompa ahí totalmente la navegación, igual cambia idea y cierra y ya está.
Entonces, lo que voy a hacer aquí es crearle un estado, ¿no?
Que sea show modal y set show modal.
Y este estado, pues tiene un valor por defecto de false.
Por ahora es false.
No mostramos la modal por defecto.
Y lo que hacemos es que cuando le damos clic y no estamos logueados,
pues vamos a hacer un return porque no vamos a querer seguir ejecutando el código que hay justo debajo.
Entonces, aquí lo que vamos a hacer es un set show modal true.
Le enseñamos la modal.
Y tenemos que hacer este handle close de la modal, ¿vale?
Que no se nos olvide.
Y aquí lo que hacemos es, pues, cerrar la modal.
Este handle close es lo que le vamos a pasar por props a la modal, ¿vale?
Así que ahora nos toca utilizar la modal.
Vamos a utilizarla.
Nuestra modal espartana.
La tomamos de components, modal, ¿vale?
Esta es la modal que hemos creado.
Y...
Ah, una cosa.
Vale, no tiene estilos ahora.
Bueno, deberíamos hacer los estilos antes de ponernos, ¿no?
Porque si no, no sé si va a funcionar muy bien.
Va a ser un poco raro.
Vamos a hacer los estilos de la modal.
Bueno, voy a enseñarla.
Total, no pasa nada.
La podemos poner.
Vamos a primero ponerla y ahora arreglaremos los estilos.
La modal no la podemos poner dentro del botón.
La vamos a poner fuera.
¿Por qué?
Porque dentro del botón no puede ir porque la propia modal tiene un botón.
Entonces, si ponemos la modal dentro del botón,
nos va a decir que estamos poniendo un botón dentro de un botón y que eso no le gusta.
No podemos poner cosas clicables dentro de algo clicable porque se volvería loco.
Entonces, aquí lo que vamos a hacer es show...
Ay, esto con las llaves.
Enseñamos la modal.
Si enseñamos la modal, pues ponemos la modal.
Y aquí lo que vamos a querer...
Bueno, por ahora voy a poner hola, ¿vale?
Pero luego lo que querremos es utilizar el login.
Guardo los cambios.
Vale.
El useState lo tengo que importar de aquí.
Que no se nos pase.
Esto ya está.
Y ahora lo que vamos a hacer es darle aquí.
¡Pam!
Bueno, esta es la modal más triste del mundo ahora mismo.
Pero bueno, mira, al menos vamos a poder ver si se puede cerrar.
Para cerrarla tenemos que pasar la prop de handleClose, ¿vale?
Porque este método handleClose es el que se ejecutará cuando cliquemos en la X para cerrarla.
Entonces, cuando se ejecute, hará un setShowModel y así dejará de mostrarse.
Y ya la tendremos ahí.
Así que onClose y le pasamos el handleClose.
¿Vale?
Ahí está.
Vale.
Que no tape el código.
Entonces le damos aquí.
Vale.
Al menos lo que es la funcionalidad más básica funciona.
Lo que no funciona muy bien son los estilos.
Así que ahora antes de empezar con los estilos voy a ver qué me estáis comentando en el chat.
¿Vale?
Y ahora le damos a los estilos.
Muy bien.
A ver, a ver.
Es que como veo ahí un poco en diagonal, tengo que ir un poco para arriba para ver qué me vais comentando.
Vale.
¿Se puede poner que no muestre el login arriba a la derecha en esa página?
Ahora, ¿se puede poner que no muestre el login arriba a la derecha en esa página?
Sí, lo podríamos hacer.
Podríamos hacer detectar si estamos en una página de login y entonces que no aparezca.
Por ejemplo, ahora mismo no sé si sería capaz de hacerlo así de primeras.
Pero vamos a ver.
Podríamos detectar aquí el UseLocation.
Aquí estamos utilizando Guter.
Guter es una alternativa a ReactRouterDom.
¿Vale?
Entonces, Guter, Github.
Estoy seguro que Guter nos va a dar...
Tiene que tener un UseLocation o UseRoot.
Vamos a ver cuál de las dos.
Igual es UseRoot.
Esto no.
UseRootMatch.
Ah, mira, pues sí, pues perfecto.
Mira, esto es justamente lo que necesitamos.
Lo que podríamos hacer es decirle que si machea con esa ruta, por ejemplo, este es el header, ¿no?
Vale, pues hacemos esto.
El params no lo necesitamos.
Y le decimos UseRoot.
Login.
Ahora, este UseRoot lo vamos a importar de aquí.
UseRoot.
Y este match, esto es un boleano que nos va a decir si ha hecho match o no.
Entonces, lo que podemos hacer básicamente sería, esto ya está suficientemente complicado.
Lo podríamos sacar de aquí y decir, match, esto es, bueno, content is match.
Bueno, match.
Vale, si hacemos match es que estamos en el login.
Por lo tanto, no debería mostrar nada.
Y si no, pues tendríamos que mostrar todo lo demás.
Si está logueado, pues hacemos esto y tal.
No es la forma más impresionante.
Así que, bueno, voy a guardar los cambios por ahora para ver si funciona o está petando por algún lado.
Vale, veo que ha petado, pero, o sea, no está haciendo justo lo que queríamos.
Login.
No.
Este match está siendo siempre false.
Pues pensaba que nos iba a funcionar esto bien de primeras, ¿eh?
Este UseRoot pensaba que nos iba a hacer el match.
Mira, nos está dando false.
Y cuando le doy a barra al login.
Ah, ahora me está dando true.
Vale, o sea, que lo que está mal es nuestra lógica.
Perfecto.
Ah, no, no.
Qué lógica.
Lo que pasa es que no he utilizado el content.
Anda, anda.
Vale, ya está, mira.
Aquí, esto sería la home.
Tendríamos el login y dentro del login, pues ya no tendríamos el botón.
Y ya lo tendríamos.
Esto sería una forma, ¿no?
De hacer justamente esto de un renderizado condicional por páginas.
Detectar en qué página estamos.
Esto podría ser.
Esto podríamos sacar un hook para saber cuándo está la página de login, por ejemplo,
para no tener que poner eso manualmente, constantemente.
Pero, bueno.
Podríamos hacer también este render login buttons, ¿no?
Para sacarlo.
Y esto dependería de si está lo que hago.
Yo os recomendaría hacerlo así, más que nada, porque esto es muy difícil de leer, ¿no?
Entonces, yo esto lo sacaría aquí y al menos lo simplificaríamos un poquito, ¿no?
Para evitar tanta anidación y tanta cosa.
Entonces, esto lo tendríamos aquí.
Esto se lo pasaríamos, ¿no?
Si está logueado, pues haríamos esto.
Y esto, bueno, así, ¿no?
Si es match, uy, perdón.
Si se ha hecho match, pues nada, no rendices nada.
Y si tal, aquí podríamos poner otras cosas, ¿vale?
Como volver a la home y cosas así.
Eso lo dejo para los deberes, ¿vale?
Entonces, ahora en la home lo tenemos y luego ya desaparece.
Bueno, me ha parecido muy buena pregunta y por eso he pensado que estaría interesante hacerlo, ¿vale?
Pero ya lo tenemos hecho en un momentito.
Bueno, vale, ¿qué más?
¿Recomiendas los style components para incluir los estilos en los componentes o consideran mejor archivos CSS como en este caso?
A mí me gustan mucho los style components.
Me gustan mucho.
Pero le veo alguna cosita, ¿vale?
A los style components.
Para proyectos chiquititos y así que tienen que ir rápido, pues seguramente sí que los utilizaría.
Pero para proyectos muy grandes y que tienen que perdurar mucho en el tiempo, yo siempre apostaría por la plataforma.
Intentaría evitar acoplarme lo máximo posible a tecnologías que no sean de la propia plataforma.
Por ejemplo, a lo mejor sí que utilizaría React, pero claro, si utilizo React, utilizo lo de style components, utilizo Redux, utilizo tal, me voy acoplando a la tecnología de React cada vez más, de forma que mucho de mi código luego va a ser difícil de utilizar.
Entonces, en un proyecto mío personal, en un proyecto chiquitito, en un proyecto que tengo que hacer rápido, tal, lo haría seguramente.
Para una multinacional, pues igual tendría más cuidado.
Es mi opinión, ¿eh?
Pero a mí personalmente me gustan bastantes.
Dice, ¿qué plugin usas para mostrar la lista de emojis en Visual Studio Code?
No utilizo ninguno.
Utilizo control, comando, espacio.
Es lo que utilizo, ¿vale?
¿Por qué no se utilizó?
Sí que lo vamos a utilizar, Oscar, lo he comentado antes.
Vamos a utilizar React Hookform.
Lo vamos a utilizar, ¿vale?
También sería guardar luego de loggearse.
También, claro, esto también lo podríamos hacer, ¿no?
Guardar en qué GIF estamos, en qué ruta estamos y de forma que al loggearnos se dirija a esa ruta.
Eso lo podríamos hacer más adelante, ¿vale?
¿El handle close no debería estar dentro de un use callback?
Pues sí, podría estar y seguramente debería estar.
En este caso parecía un callback menor que no lo veía problemático y lo he dejado,
porque espero que eso tampoco se renderice mucho.
Pero sí puede ser buena práctica para evitar que no se vuelva a crear, ¿vale?
Vale, ¿puedes explicar un poco cómo solventar los problemas de importación de GQuery?
¡Guau!
Bueno, pues ahora no, porque es bastante tela, pero no sé, me lo puedo mirar a ver si se me ocurre alguna cosa.
Me parece que no debe hacerse porque sea complicado, bla, bla, bla.
Bueno, es que hay un montón.
Muchas gracias por la respuesta.
De nada, de nada.
Vamos a seguir.
Vamos a hacer los estilos de la modal, ¿vale?
Entonces, paso esto por aquí y vamos con esto.
Voy a cerrar todo esto que tengo que no me está añadiendo mucho y voy a concentrarme en la modal.
En la modal lo que vamos a querer aquí es importar los estilos.
Que aquí los estamos haciendo con CSS y igual no descarto que hagamos algo con Emotion.
Si nos interesa, lo podemos mirar del siguiente live, pues hacerlo de esto.
Si os gusta, me lo decís y lo miramos, ¿vale?
Entonces, vamos a hacer aquí los estilos.
Vamos a poner modal.css.
De hecho, bueno, este contenido, vamos a poner content para que quede en inglés, ¿vale?
Y vamos a...
Ahora he apretado porque le falta el CSS, pero esto lo arreglamos ahora en un momento, ¿vale?
Entonces, ¿qué teníamos?
Es punto modal, eso uno.
Luego, el background color.
Como es todo negro, ¿no?
Todo lo de la página es oscuro.
Lo que vamos a hacer es que la modal...
Vamos a tener dos cosas, ¿no?
Esto es lo típico de las modales.
Por un lado, tenemos el fondo de la modal y por otro, la modal en sí.
Entonces, en el fondo, que es esto, lo que vamos a hacer es ponerle un color más blanquecino
con un poco de transparencia.
No sé.
Punto 8, por decir algo.
Luego lo vamos viendo.
Y esto lo que queremos es que justamente, bueno, necesitamos un position fix porque se tiene que quedar fijo
y para que tenga el truco este de que esté por todos los lados, ¿no?
Que sea todo, pues podemos hacer esto, ¿no?
Que el bottom, el top, el left y el right sea cero.
Esto creo que sería suficiente.
Si no, luego lo podemos arreglar.
Tengo el position fix, tengo el bottom...
Vale.
Ok.
Luego vamos a ver el contenido de la modal.
Para el contenido de la modal le vamos a poner un color...
Mira, este me gusta.
Vamos a probar este color.
Vamos a poner que tenga un ancho así de 300 píxeles para que no llegue justamente a los laterales
y cuando sea móvil, pues nunca llega a 320, que creo que es lo más pequeño que tenía un móvil.
Y vamos a darle un poquito de padding para que se ajuste.
Luego, la altura, que es lo que nos interesa, ¿no?
Que ocupe todo el espacio.
Por ahora voy a hacer que ocupe todo el espacio.
Que podría ser que no lo ocupase.
O sea, podríamos hacerlo de otra forma.
Podríamos hacer...
Voy a hacer 80 y le voy a poner un margen de 10 por arriba y por abajo.
Y luego que sea automáticamente horizontal.
No sé cómo funcionará esto.
Y le vamos a poner que sea relativo.
¿Vale?
Y luego el content del botón, el botón que es lo que tenemos, el botón debería ir arriba a la izquierda o no sé.
Bueno, por ahora vamos a ponerlo que no se solape con lo otro.
Le ponemos un margen.
Y si no, si esto así ya nos sirve, pues ya estaría bien.
Bueno, estos estilos deberían ya estar funcionando.
Vale.
Ya vemos los primeros problemas.
¿Vale?
El primer problema que tenemos es que nos está pasando esta barra, esta barra infostuosa por aquí encima.
Y esto es seguramente porque tiene un position sticky.
¿Ves?
Que se queda ahí, se queda fija.
Y bueno, queda bastante horrible.
De hecho, a mí me acaban de sangrar un poco los ojos.
Luego aquí tenemos estos corazones que también tienen un position fix.
Y entonces esto no le está gustando.
Porque, claro, tiene un z-index y esto está quedando por encima y tal.
A ver, al menos lo que estamos viendo...
Bueno, aquí tenemos un hola, pero al menos estamos viendo que esto tiene más o menos buena pinta.
Creo que el content igual debería ser oscuro.
O sea, hemos dicho que esto lo íbamos a hacer al revés.
O sea, debería ser así.
Vale.
Entonces, sé que es una modal un poco rara, pero es como todo es oscuro.
Lo voy a hacer así, ¿vale?
Que el fondo sea como blanquecino.
De hecho, podríamos hacer esto.
A ver qué os parece, ¿eh?
Pero esto es una maravilla.
Backdrop filter.
5 píxeles.
No me digáis que esto no es bonito.
Esto está para la verlo.
Mira qué bonito.
Mira qué bonito.
Mira qué bonito.
Ahí.
No, pero que se ve como con blur, con efecto blur.
¿Esto lo sabíais?
Si no lo sabíais, dadle un like.
Dadle un like si esto no lo sabíais.
Porque, vamos, esto es súper guay.
Aquí se ve, ¿no?
Como que el fondo que queda como difuminado.
Y le podéis poner tantos píxeles como queráis.
Y pues va quedando cada vez más difuminado.
Si le ponemos 4.
Creo que está bonito, ¿no?
Es el efecto este de iOS, ¿no?
Que tiene el iPhone.
Pero, bueno, lo importante.
Lo importante es que tenemos este hola.
Vamos a hacer que salga ahí el formulario, ¿vale?
Vamos a hacer que salga el formulario.
Y para eso nos vamos al componente de modal.
No.
¿A dónde tengo que ir?
¿A la página?
No.
Al de login.
Vale.
Ahí está.
Que aquí había puesto este hola.
Ay, en el de login, no.
¿Dónde está?
En el de fab.
En el de fab.
Ahora.
Ya tenemos tantos componentes que esto ya...
Tenemos un montón.
Bueno, vale.
Aquí vamos a importar el login, ¿vale?
Components.
Login.
Porque lo que queremos es que aparezca el login ahí dentro.
Entonces, en lugar de poner el hola, ponemos el login.
Y ya está.
A ver cómo queda esto.
Y ahora arreglamos el tema de Zeta Index.
Bueno, más o menos.
Esto se podría centrar, se podría hacer muchas cosas.
De hecho, para que no se vea tan horrible, ¿vale?
En este estilo, vamos a pensar que lo tenemos en móvil.
Y esto vamos a ponerlo al 100%, más o menos.
Entonces, vale.
Aquí vemos el problemita, ¿no?
Vemos el problema este del Zeta Index.
Uno podría decir, bueno, pues ponte aquí a arreglarlo con el Zeta Index, ¿no?
Porque al final, si esta modal, esta modal que tenemos aquí, le decimos que tenga un Zeta Index que alguien le ha puesto por aquí, ¿no?
De hecho, vamos a ver quién pone aquí.
Vea, pum.
Dice, este Zeta Index.
Pues vamos a poner este Zeta Index que nos ha dicho Edgar Nomina, ¿vale?
Vamos a poner un Zeta Index.
Uno, cero, cero, cero, cero, cero, cero, cero, cero, cero, cero, cero, cero, cero, cero.
Vale, pum.
Pues esto no lo arregla.
Mmm, esto no lo arregla.
Podemos ver que tengo un Zeta Index aquí, que es una locura, y no lo está arreglando.
Entonces, ¿cuál es el problema que hay aquí?
Y esto es un problema que es bastante típico, ¿no?
El problema es que como estamos, por muchos position fix y por muchas cosas que hagamos,
el problema es que estamos renderizando la modal dentro del árbol de elementos de React, ¿no?
Y entonces, la modal, aunque nosotros, como lo queremos visualmente, es que quede por encima de todo,
al final está dentro de esta estructura, ¿no?
List of GIFs, GIF, GIF buttons y modal.
Y esto es en el HTML.
Claro, esto no es lo que nos interesa.
¿Por qué?
Porque a nosotros lo que nos gustaría es que esta modal estuviese fuera de toda esta estructura.
En React sí que nos gustaría que se mantuviese dentro del árbol de elementos, ¿no?
Porque le queremos pasar las props, le queremos pasar cierta información desde ese componente,
pero no queremos que en el HTML se renderice aquí, ¿no?
Nos gustaría, voy a intentarlo, moverlo, ¿vale?
Voy a moverlo, a ver si esto...
Ah, mira, sí que se mueve.
Pero a lo mejor nos gustaría que estuviese aquí, ¿vale?
Y mira, aquí sí que lo hemos arreglado, ¿verdad?
Ya está.
Aquí sí que lo tenemos.
Tenemos el z-index y esto está funcionando bien.
Entonces, esto hay veces que hay gente...
He visto muchos desarrollos que lo solucionan con un estado global.
¿Por qué?
Porque con un estado global tú haces que este componente esté, digamos, casi en la raíz del árbol de elementos
y se renderiza.
En lugar de estar dentro, tú lo que haces es enviar el estado global y tal.
Pero hay veces que esto simplifica bastante el tema, ¿no?
El hecho de verlo así, de verlo dentro del componente y no tener que hacer ningún tipo de estado global.
Y que además sea la propia modal la que sepa dónde se tiene que renderizar para funcionar correctamente, ¿vale?
De hecho, voy a actualizar y vamos a ver que el problema, pues ahí está.
De hecho, voy a poner aquí la modal para que lo tengamos ya.
El z-index, ¿no?
El z-index 20...
Bueno, 10.000 millones que me han dicho por ahí.
Guardo los cambios.
Y si le doy, vemos que no...
O sea, que por mucho z-index que lo ponga, esto no funciona, ¿vale?
Esto es porque es una locura de cómo están montadas ahora mismo las capas y es muy difícil que lo podamos solucionar.
Lo podríamos solucionar, pero sería muy costoso.
Lo más fácil, en este caso, es que utilicemos una cosa que se llama React Create Portal.
Y lo vamos a hacer ahora y además es muy sencillo.
Vamos a ver.
A ver, mira, qué trucazo.
Ahí está, el Backdrop Filter.
No está soportado por muchos navegadores, ¿eh?
Esteban ya lo sabía.
Ahora, Enrique no lo sabía, pero bueno, algunos sí que lo sabían.
Alguien dice por aquí, wow, yo lié.
Dice, wow, con el Backdrop.
Está muy bien, es muy bonito.
Blur se podría traducir como difuminado.
Pues sí, me gusta, me gusta.
Vale, pues vamos a ver el...
Sí, lo que queríamos en la modal.
El Create Portal, básicamente lo que hace es crear un componente, renderizarlo,
fuera de la estructura de los elementos HTML que tenemos en ese momento.
Le podemos decir, mira, este componente quiero que lo renderices, pero fuera de este árbol de elementos, ¿vale?
Lo vamos a ver más claro usándolo.
Esta funcionalidad la tenemos que importar de React DOM.
Porque React DOM es el que renderiza, ¿no?
Tenemos React DOM.render y tenemos también React DOM.createPortal.
En este caso lo que vamos a hacer es dejar esta función de la modal, que es como nuestro componente,
y lo que vamos a hacer es crear una nueva que le vamos a llamar, ¿cómo le podemos llamar?
O modalPortal, ¿vale?
Que va a recibir lo mismo, el children y el onClose.
Las mismas props.
Y de hecho, lo que debería devolver este componente es renderizado, pero donde queremos que se renderice,
la misma modal, ¿no?
Solo que le pasamos este onClose, onClose, y lo que queremos que renderice es el children.
Si esto lo dejamos así, esto pues se va a ver exactamente igual, ¿no?
Está haciendo exactamente lo mismo.
Porque lo que queremos es que, como hemos visto, queremos que se renderice aquí, ¿no?
Fuera del root.
Queremos que se renderice fuera del root, porque así no vamos a tener ningún problema,
porque vamos a estar en la raíz de los elementos, y por lo tanto el z-index no va a ser tan difícil de manejarlo,
porque no va a estar dentro de una estructura del DOM y tal.
Va a ser mucho más fácil.
Entonces, lo que tenemos que hacer es hacer un React DOM.createPortal,
y el CreatePortal recibe dos parámetros.
El primero es lo que queremos renderizar.
En este caso, la modal.
Lo que queremos renderizar es la modal.
Y como segundo parámetro es, ¿dónde lo queremos renderizar?
¿Vale?
Pues, ¿dónde lo queremos renderizar?
Pues, hemos dicho que lo queremos...
Bueno, pues, voy a poner un interrogante por ahora.
¿Dónde lo queremos renderizar?
Hemos dicho que lo queremos renderizar aquí al lado del root.
Así que vamos a ir al index.html,
y aquí vamos a crear otro div, que le vamos a llamar modal root.
Guardamos estos cambios, y volvemos a nuestro componente modal.
Y ahora aquí, en el CreatePortal, le decimos que esto lo renderice en document.getElementById,
root, modal, o modal root, ¿cómo lo he llamado?
Modal root.
Ah, menos mal.
¿Vale?
Modal root.
Guardamos los cambios.
Vamos a ver si esto funciona bien.
Parece ser que funciona bien.
Y vamos a ver qué pasa ahora con nuestra modal.
Pum.
Ya está.
Ya la tenemos funcionando.
Si miramos aquí, donde está el html, podemos ver que ahora modal root, que está al lado de root,
tiene nuestra modal.
¿Vale?
Perfecto.
Tiene nuestra modal.
Pero si, por cualquier cosa, viésemos la estructura de los componentes de React,
podríamos ver que la modal en realidad sigue estando, en términos de estructura del árbol de elementos de React,
sigue siendo como una modal, o sea, un componente que es hijo del botón, bueno, del fab, ¿no?
Del componente favorito.
Entonces, en la estructura de React sigue siendo un hijo, este componente sigue estando en esa estructura,
pero donde lo renderizamos en el DOM es totalmente diferente.
A esto se le llama un portal.
Porque, claro, es que es como un portal, ¿no?
Es como si, no sé si habéis jugado al juego de portal de la gente de Valve,
pero básicamente es esto, ¿no?
Lo que estamos consiguiendo es, de alguna forma, vale, esto está aquí, pero se renderiza en otro sitio.
Y es la magia, ¿no?
Porque React está viendo que la estructura es de padre a hijo,
pero donde se está viendo en el DOM es totalmente distinto.
Y con esto nos hemos ahorrado una de problemas con el z-index que no os lo podéis ni imaginar.
De hecho, aunque hemos puesto este z-index del 28.000,
al final lo único que necesitamos ahora es que este z-index sea mayor al del search form,
que antes ni siquiera lo conseguíamos así.
Por lo tanto, ahora creo que el del search form es 22.
Si pongo 21, no.
Si pongo, vale, si pongo 1 o 2 o lo que sea, creo que es 20 a lo mejor, 21.
Vale, a lo mejor es 21.
Entonces, el del search form es 21.
Con que sea igual o mayor, ya va a estar por encima.
Entonces, es mucho más sencillo de explicarlo y de entenderlo así,
de mantenerlo así, ¿vale?
Entonces, los portales son súper útiles a la hora de utilizar modales en React.
Y con esto ya tendríamos nuestro login en una modal.
Así de esta forma, lo teníamos así, esto se vería así,
y ya podríamos hacer login aquí.
Haría un check-in dos credentials, no sé por qué no ha funcionado.
No sé si es que ha dado algún pete.
A ver, vamos a ver qué es lo que le pasa a la...
Que igual no estoy poniendo bien el login, ¿eh?
Como el otro día, y ya está.
Vamos a ver.
Si pongo aquí el login, a ver qué error da.
Login, check-in credentials.
Ah, igual estaba caída la API.
Un poco lo que comentaba antes.
Es que Heroku es esto, ¿eh?
Que es bajo demanda.
Entonces, igual la API está caída y por lo que sea, pues no funciona y tal.
Vamos a ver la response.
Es que es súper raro, porque esto me está dando...
Como que estoy haciendo el FAP en lugar del login.
Ah, no.
Aquí está el login, aquí está el login.
Login created.
Y aquí tenemos la respuesta.
Bueno, igual es porque lo que habré hecho en el login ahora no es que haga un navigate o lo que sea.
Luego lo miramos a ver qué estaba pasando.
Pero se está haciendo bien el login y tal, por detrás, ¿vale?
Vale, vamos a ver el login que he puesto en los componentes.
Slogin loading.
Pues no, a ver que aquí ya me hemos puesto esto, el islog.
Bueno, súper raro.
Bueno, si no, luego...
No sé si el login lo vas a tocar más, pero algo raro habrá ahí.
Ah, porque claro.
Ahora sí que estamos logados.
Ahora no lo vamos a ver.
Bueno.
Si no, luego le echamos un vistazo a esto, ¿vale?
Pero bueno, loggearse, se está loggeando, lo que no está haciendo bien es la navegación.
Debe ser algo que está pasando por ahí.
Vale, voy a cerrar un poquito esto, que ya no lo necesitamos, con todo lo que habéis dicho.
Y creo que me merezco el descanso de leeros a ver qué me estáis comentando, ¿vale?
Vamos a ver.
Ángelo Zambrano.
Te conocí por el curso avanzado de React.
Excelente curso.
Vale, pues muchas gracias, Ángelo.
Me alegro que te gustase.
Juan Pablo dice que mala práctica de los Z-Index.
Ciertamente, es mala práctica.
A veces es necesario, pero al menos de esa forma lo estamos controlando, ¿vale?
Y eso es lo que justamente queremos, que esté controlado de alguna forma.
Está posicionado portals, portals, hacía Adrián Navarro.
Podrían pasar el link de curso avanzado de React en Udemy.
En Udemy tengo un curso gratuito de React, pero no es avanzado, es básico.
Y además no está actualizado.
Os recomiendo más los vídeos que tenemos en el canal de YouTube, que está más actualizado, ¿vale?
¿Qué más?
¿Qué más?
Wild True, búscalo así.
Aprender React.js Miguel Ángel Durán.
Sí, si lo encuentras así, perfecto.
¿Qué más?
Además, mira, lo que dice Nicolás está interesante.
Porque lo que podemos hacer también es no tener este index.html que he creado aquí,
este, esto aquí he creado esto, esto en realidad lo que podríamos hacer es crearlo al vuelo.
Podríamos en la modal, podríamos decir, bueno, pues esto en lugar de tenerlo aquí, pues crearlo al vuelo.
Yo si fuese vosotros me lo evitaría, ¿no?
Pero al final lo que podéis hacer es un document create element, ¿no?
Y crear un elemento.
Pero si podéis tener la posibilidad de utilizar el index.html, ya lo tenéis, si lo controláis, pues yo lo haría así, ¿vale?
Para evitar y tener código ahí que además, pues no es necesario.
¿Vale?
Edgar Numina.
Qué cool.
Yo siempre he manejado una modal que se inicia en el árbol de app y le pasaba el on-close, el mensaje por el estado global.
Sí, eso es muy típico.
Pero si podéis evitar, o sea, si esto lo soluciona o simplifica tanto la vida y cuanto menos tengáis en estado global, pues mejor, ¿vale?
Mis 10, muy útil.
Tú sí que sabes.
Esto de los portals está genial, Milvia.
Muy bien, genial.
¿Sería suficiente renderizarlo en el root?
Lo digo por no crear nada adicional en el HTML.
Claro, Edgar, lo puedes renderizar en el root.
Pero ¿qué pasa?
Que a la hora de tú pasarle o cuándo tienes que mostrar la modal o información que le quieras pasar, pues ya lo vas a necesitar tener en estado global.
Te va a ser más difícil seguir un poco el hilo de cómo funciona la modal.
Y esto lo simplifica tanto.
Nos hemos saltado tener cualquier tipo de estado global y al final lo renderizamos donde queramos.
Entonces sí, renderizarlo en el root funcionaría.
Y si lo tenéis así, no está mal.
No pasa absolutamente nada.
Pero esto puede ser interesante pues para hacerlo más sencillo, ¿no?
Simplificar algunos casos de uso, de utilizar modales.
Y a veces no tienen por qué ser modales, ¿eh?
Pueden ser un montón de cosas.
Cosas que tengan que estar flotando por ahí.
O por ejemplo, el header, el propio header que tenemos.
Igual queremos que esté en la estructura de los elementos de React, pero por lo que sea lo queremos renderizar fuera porque ya hemos visto que es un elemento que es problemático.
¿Vale?
Y al final lo que queremos es que esté siempre fijo.
Pues con esto igual nos puede simplificar la vida y nos evitaría los problemas del z-index.
Que es bastante coñazo.
¿Vale?
Autoclose el modal después del login.
Claro.
Es que se debería cerrar la modal.
Lo que pasa es que si está navegando, claro.
Ah, porque al navegar, exacto, al navegar, muy buena, al navegar el tema, claro, es que al navegar como se está quedando en la misma página, pues seguramente estoy diciendo, ah, si ya estoy en la misma página.
No necesito hacer ninguna navegación ni hacer nada.
Claro, claro, muy bien, bien visto.
Si hacemos esto y le doy a login, ¿vale?
Y cierro, claro, ya está logueado.
Debería efectivamente cerrarse automáticamente, ¿no?
Si el login ha ido bien, lo que deberíamos hacer en el componente, vale, perdón que no he compartido, pero básicamente ya me he dado cuenta.
Muy bien, ¿lo ha dicho?
¿Quién lo ha dicho por aquí?
Sí, Nicolás Santis, muy bien, muy bien visto.
Que no he caído, claro.
El login, ay, ahora no, este login no, este.
El login cuando le damos y aquí sale la modal, si yo le doy a login, en realidad si cierro esto ya está logueado.
Sí que se ha hecho el login.
Lo que nos está cerrando, obviamente, es la modal.
Lo que deberíamos hacer es, por ejemplo, ¿qué podríamos hacer?
Le podríamos pasar el on close.
Claro, tendríamos que cerrar esto.
Que estamos haciendo aquí, este login.
Cuando tenemos este login, lo que debemos hacer en el fab es añadirle algún tipo de, vamos a ver, show modal, modal, este show modal.
Vale, esto lo tenemos.
Este login podríamos pasarle una prop, que sea on login.
¿No?
On login.
Y aquí vamos a poner handle login.
Y que cuando se hace un login, vamos a poner aquí otro que sea handle login.
Y que cuando se hace un login, pues la modal pasa a ser false.
Ahora, este componente, esta prop nueva que tenemos aquí de on login, voy a formatear esto para que lo entendamos todos mejor.
¿Vale?
Pero tenemos la modal, ¿no?
Y el login, que es lo que estamos renderizando dentro, le pasamos una nueva prop que es on login.
Y este on login es el handle login.
El handle login que tenemos aquí, básicamente lo único que va a hacer es cerrar la modal.
Y de esta forma, lo que podemos hacer es, en el componente login, que lo tenemos aquí, ahora sería recibir este on login, que esta prop la deberemos ejecutar aquí, cuando hacemos el login.
O, bueno, o aquí, ¿no?
Podemos hacerla que navegue, que navegue, si tiene sentido que navegue.
Y si tenemos un on login, pues que, uy, uy, uy, que ejecute este on login, ¿vale?
Y este on login cuando cambie.
Bueno, esto no sé si puede ser problemático, pero lo vamos a ver ahora.
Vale.
Si le damos aquí, ahora le damos on login, ahora ya está.
Ya lo tenemos solucionado.
Pues muy bien, muy bien visto.
Y con esto, pues ya lo solucionamos en un momentito, ¿vale?
Ojo, muy bien.
Muchas gracias, James Méndez.
Nunca sé cómo pronuncia este hombre.
James, James Méndez, supongo que es.
Por estos 100 pesos mexicanos.
Muchísimas gracias.
Eso está perrísimo.
Muchísimas gracias.
Wow, genial.
Gracias por el aporte.
Gracias a ti por contribuir.
Te lo agradezco un montón.
¿Qué más, qué más?
Es un crack, Midudev.
Gracias por tan valioso conocimiento.
Me alegro que te sirva, Juliano.
Nada, un placer.
Crear el portal en el root.
No, Edgar, no podemos.
No podemos.
Vale.
Edgar se refería.
¿Por qué no renderizamos la modal en el mismo elemento root?
No puedes, Edgar.
¿Lo quieres hacer?
¿Quieres ver qué ocurre?
¿Lo quieres ver?
Vamos a verlo.
Vamos a ver qué pasa.
¿Qué pasa, no?
Con la idea esta que nos comenta Edgar.
Dice, oye, pero si ya tienes un elemento root, ¿no?
Pues, ¿por qué no lo renderizas ahí?
Bueno, vamos a ver qué pasa en el caso de que lo hagamos.
A ver qué pasa.
Ay, pues no pasa nada.
Me ha dejado súper mal.
Bueno, claro, lo que va a pasar en este caso, es verdad, ahí nos hemos...
Vale.
Lo que va a pasar es que lo va a poner justo debajo de la app.
O sea, al renderizarlo todo, lo va a dejar debajo de la app.
¿Qué pasa con esto?
Yo considero que esto puede ser una mala práctica, ¿vale?
Porque lo que podría pasar es que te machacase cosas que no quieres que te machaque.
De hecho, al principio, como servían los modales, los portales, es que si tú le decías que te lo renderizase un elemento, te lo machacaba, ¿no?
Porque decía, ah, no, ya aquí yo he renderizado ya tal.
Pero sí, en este caso podría funcionar.
Pero, aun así, yo intentaré utilizar siempre elementos que sean separados.
Además que puedes tener el mismo problema un poco de los z-index.
Pero bueno, ya lo tienes.
Lo vamos a dejar en el root.
A ver, ¿dónde está?
No me había...
Vale.
Esto.
Pues ahí lo tienes, ¿eh?
Lo hemos dejado en el root.
No puedes navegar la misma ruta.
Eso lo hemos arreglado.
Y cómo evitar setear un token falso por consola y emular el login.
¿Cómo evitar setear...?
Bueno, claro.
Eso...
El login, de hecho, a lo mejor hago otro vídeo, ¿vale?
De cómo realmente hacer más seguro todo el tema del login, el token.
Porque ahora funciona, pero no es muy seguro, ¿vale?
De hecho, al final hay muchas veces que no vamos a conseguir que un usuario no se haga pasar por un usuario registrado.
Lo importante es que la API, al llamarla, si no tiene un token, pues no funcione, ¿vale?
¿Qué más, qué más?
No vemos el código.
Ay, no lo he compartido.
Vale.
Cierto.
Perdón.
Pero bueno, básicamente que he puesto...
He puesto...
Perdón, ¿eh?
He puesto este root aquí y funciona bien porque se estaba...
Al final lo pone debajo de la app.
No lo pone...
No lo machaca.
Anteriormente lo machacaba.
Y aún así yo creo que estaría bien que evitaseis hacerlo en el caso de que...
Mira, si le doy, ¿ves?
Lo pone justo debajo en lugar de machacar lo que ya hay en el root.
Lo cual me parece que está muy bien pensado por la parte de React.
¿Vale?
Vale.
Daniel, grandioso como explicas.
Muchos conceptos de React que no conocía ni siquiera con cursos que he visto.
Felicitaciones.
Nada.
Un placer.
Un verdadero placer.
Vale.
Pues vamos a seguir, si os parece.
Creo que ya lo hemos hecho todo.
¿Qué vamos a ver ahora?
Vamos a ver...
Comparto aquí mi pantalla.
Vamos a ver Formic un poquito.
Vamos a verlo un poco por encima para lograr hacer el componente de registrarse.
Que todavía no lo tenemos.
¿Vale?
Entonces, Formic al final, que la página es un calco de la de React, es brutal.
¿Vale?
Está pensado para crear formularios en React de forma sencilla.
Sencilla.
Está bien, ¿vale?
Pero Formic al final creo que le ha pasado algo curioso, ¿no?
Que se ha hecho demasiado grande y tiene demasiado código y es difícil de mantener.
Y al final se va haciendo cada vez más grande y más grande hasta que llega un momento que, bueno, pasa lo que pasa.
Entonces, si miramos Formic, que lo vamos a probar ahora, en Bundlefobia, para ver cuánto ocupa, vemos que ocupa 15k.
Hay una alternativa, que está basada en Hooks, que además me la ha dicho alguien en LinkedIn y que yo no conocía y os voy a decir la verdad, la vamos a probar sobre la marcha, que es React Hook Form.
Y esta, además, ocupa solo 9k, son 6k menos.
Parece que está mejor optimizada, pero por lo poco que he visto, lo que he visto es que queda bastante más limpio.
A mí me gusta especialmente, ¿vale?
Entonces, vamos a utilizar Formic para ver cómo es y todo esto.
Y luego utilizamos React Hook Form porque es súper fácil.
Y, bueno, súper fácil porque lo he visto, ¿eh?
Pueden fallar mil cosas.
Porque no lo he probado nunca, pero, bueno, lo probamos y cada uno que se quede con el que prefiera.
Pero es verdad que Formic se utiliza bastante y hay mucha gente que lo utiliza en sus proyectos y creo que puede estar bien que lo conozcáis, ¿vale?
Así que vamos a darle aquí a React Formic, ¿vale?
Entonces, hay un montón de tutoriales y tal.
Lo más importante por ahora es que lo tenemos que instalar en nuestro proyecto.
Así que vamos a empezar por ahí.
Voy a abrir esto y voy a instalar aquí Formic.
Y esto debería ser un momentito.
Voy leyendo mientras, ¿vale?
Sí, hay gente que dice...
Ay, mira, esto se ha quedado aquí.
Se ha quedado.
De Formic.
Yo lo llamo de Formic.
Chrome y Firefox 0, Formic 2.
Yo lo he tocado hoy por primera vez y se ha quedado, lo ha quedado Chrome y Firefox.
Ya dicen que Formic es demasiado tocho, ¿vale?
¿Por qué no pasar directamente?
Freddy Busto dice, ¿por qué no pasar directamente?
Esto me lo preguntan muchísimo, ¿vale?
A mí no me gusta mezclar en el render del componente.
No me gusta básicamente poner funciones en línea.
Entonces, es mejor si las dejas en el cuerpo de la función.
A mí personalmente me gusta más.
Y porque además podríamos fácilmente envolverla en un use callback, ¿vale?
Y eso, pues, eso que te llevas.
¿Qué más?
¿Que más no se puede aprovechar el mismo onClose en vez de onLogin?
Sí, pero imagínate, en este caso he prefirido separarlo porque he pensado, bueno, pero imagínate que el onClose de la modal hace unas cosas y el onLogin hace otras, ¿no?
Podría ser que en algún momento ahora pensemos, no, no, claro, cuando hacemos login aparte queremos enviar un tracking o lo que sea, ¿no?
Entonces, yo creo que ya si semánticamente el nombre de la función era ese, pues, yo evitaría reutilizarlo porque, ah, como hace lo mismo, pues, lo voy a pasar en el onClose.
No sé, en este caso, ¿eh?
Es otra opinión que, bueno, ha sido más que nada porque me parecía que a lo mejor podríamos hacer otras cosas.
¿Qué más? Dice, ah, un superchat, 5.000 CLPs, que no sé lo que es, pero te lo agradezco un montón, Andrés.
Genial, muy buena tu forma de explicar. Gracias, gracias a ti, gracias, gracias, gracias, gracias, gracias, gracias mil, muchas gracias.
Vale, pues, vamos a pasar, ¿vale? Por aquí, vamos a seguir, que ya hemos instalado esto y vamos a ver que, ay, me he quedado sin música, le voy a dar al play.
Vale, entonces, vamos a cerrar todo esto. Ay, este no lo había guardado. No sé qué habría dejado sin guardar ahí. Ya lo descubriremos después, ¿vale?
Lo primero que vamos a hacer, crear el componente register, ¿vale? Igual que hoy hemos tenido un login, pues, vamos a hacer lo mismo con el register, si os parece.
Así que nada, hacemos el register, creamos aquí un index.js. Mira, gracias, que me comentan. Ah, pesos colombianos. Es que como nunca he estado en Colombia, pues, no los domino todavía.
Pues, muchísimas gracias. Más de 5 euros, qué locura. Muchas gracias, muchas gracias, Andrés. Muchas gracias.
Además, me encanta ir descubriendo monedas. Me chifla, ¿vale? Cop, son pesos colombianos. Cop, mejor. Cop, cop. Ah, son chilenos. Bueno, a ver, me estáis dando información contradictoria, ¿eh?
Yo voy a ir siguiendo mientras me lo vais comentando, ¿vale? Porque no, me estáis liando. Vale. El componente de register va a ser igual que el de login.
Va a ser igual. Bueno, sí, va a ser bastante similar, ¿no? Yo creo casi que nos lo podríamos copiar. Bueno, no, el componente no nos lo vamos a copiar, porque vamos a intentar hacerlo con formic, ¿vale?
O sea, que lo que deberíamos, quizás, es crear un, vamos a crear un componente vacío, por ahora. Y vamos a poner aquí el register, ahí tenemos lo de react, no va a pasarle ninguna prop, formulario de registro, ¿vale?
Por ahora. Ahora, vamos a tener que hacer unas cuantas cosas para que esto realmente lo podamos ver y todo esto, ¿no? Vale. Lo primero, crear la página, que esta sí que nos la podemos copiar del login.
Creamos la página register, creamos el index.js y esta nos la copiamos del login, pero vamos a tope. Login, login, login, login, login. Ahora es register.
Y esto debería, a ver, si he hecho bien el componente register que he puesto aquí, esto debería funcionar como tal. Ahora, vamos a querer ver esta página.
Así que vamos a ir a nuestra página y vamos a importar la página register, de páginas register, ¿vale?
Y esta página register la vamos a utilizar en la ruta, la misma ruta que esta, ¿no? La ruta componen, el componente register en el pass barra register.
Y ahora, claro, ahora funcionaría la ruta perfectamente, pero no tenemos una forma de acceder a esta ruta.
Por lo tanto, vamos a ir al header otra vez y aquí, igual que teníamos este login, pues vamos a renderizar también un register, ¿vale?
Y pam, pam, pam, esto, esto aquí, esto register y esto que vaya a register, guardamos los cambios, ¿vale?
Esto queda pegadísimo, me encanta como, como me encanta que se peguen ahí uno al otro, están pegaditos, están aquí bailando juntitos.
Bueno, vamos a separarlos de una forma rápida.
Esto, margen, 4 píxeles mismo.
Bueno, vale, un poquito más, vale, ahí.
Más o menos, ¿eh?
Tampoco, tampoco hace falta que estén...
Bueno, ahora si le damos aquí, vale, ya tenemos aquí la posibilidad de nuestro componente.
Venga, entonces, ¿qué nos falta ahora?
Ahora nos faltaría el servicio.
Como ya sabéis que a mí me encanta que hagamos las cosas desde cero, pues no...
Prefiero que veáis todo el proceso, ¿vale?
Entonces, aquí voy a crear un servicio que le llamo register.js.
En servicios, digamos que teníamos toda la lógica, así que también me voy a copiar el de login,
porque también es bastante similar.
Y aquí en register, pues nada, pego y vamos a ver, vamos a revisar.
El endpoint, aquí puedes ver ahora que es el de Heroku, ¿vale?
El de Dino API Users.
La función ahora se llama register, el endpoint esto es register también.
Y la diferencia es que este endpoint no devuelve el JavaScript Web Token.
Para eso tienes que loggearte.
Para registrarte, aquí lo único que vas a tener, pues vamos a devolver un truco.
Como que esto ha ido bien.
Si no ha habido un problema, pues es que ha ido bien, ¿vale?
Vamos a pensar que ha ido bien.
Vale, entonces voy a ir cerrando, voy a ir cerrando, voy a cerrando.
Venga.
Ya tengo el servicio.
Ahora lo que vamos a ir aquí es al register, al componente register, y lo que vamos a hacer es...
Es...
Al componente, esto es la página.
No la vaya a liar.
No.
Vamos al componente.
¿Dónde estás?
Componente.
¿Dónde estás?
Aquí estás.
Vale.
Vale.
Vale.
Ahora, ahora sí.
Vamos a importar el register aquí, que es el servicio que nos va a permitir registrarnos, ¿vale?
Entonces, ahora veremos cómo utilizamos este register.
Pero ahora lo importante es que vamos a querer utilizar formic.
Entonces, voy a revisar un momento la documentación porque...
Bueno, si no, me la voy a jugar, ¿vale?
Formic.
Formic.
Esto lo importamos...
Ah, así.
Formic se importa así.
Vale.
Entonces, tenemos el register, tenemos formic.
Para utilizar formic, vamos a poner aquí un fragment, porque vamos a empezar a poner
más cositas.
Voy a poner aquí el formic.
Por ahora lo voy a poner así, aunque ya os digo que eso no pinta bien, ¿vale?
Voy a guardar los cambios, a ver si esto peta por algún lado.
Vale.
No le gusta porque no tiene este formic.
No tiene...
No será que esto tenga que haber instalado con yarn, ¿verdad?
No será la primera vez que me pasa, que siempre me confundo y me equivoco al...
¡Ay, no!
No, no, no, no.
Bueno, a ver.
No, quita, quita.
No, no.
Es que he puesto esto en mayúscula.
Entonces, esto debe ser en minúscula.
El paquete de MPM tiene que ser en minúscula.
Vale.
Ahora sí.
Bueno, ahora estamos utilizando formic, pero como puedes ver, pues esto no tiene ningún
tipo de sentido, ¿no?
Entonces, ¿qué podemos hacer?
Formic es un componente que es muy interesante porque recibe una render prop.
Y esto a veces a la gente le estalla la cabeza.
Por ahora, lo único que tienes que saber es que una render prop lo que es, es una función
que se renderiza, ¿vale?
Es el children en función.
¿Por qué?
Porque aquí normalmente lo que le pondríamos es un h2, hola, ¿no?
Y esto sería el children.
Pero, ¿qué pasa?
Que tú como children, como lo que envuelve el componente, le podrías pasar una función.
Aquí, así.
Podríamos crear una función que devuelva lo que tiene que renderizar.
Y a esto se le llama render prop.
¿Por qué?
Porque esto lo que le permite a formic es pasarte por parámetros aquí cierta información
y con esa información tú renderizar lo que quieras.
Por ejemplo, vamos a poner esto y vamos a poner un input, un input, así.
Vamos a ver si sale algo.
Vale.
Aquí ahora ya tenemos este input, ¿vale?
Lo que ha hecho es que esta función devuelve un formulario que tenemos este input, ¿no?
Y podríamos ponerle otro input y el botón y vamos a ponerle el class name del botón.
Y esto es registrarse, ¿vale?
Entonces, por ahora no os preocupéis que esto tiene todo el sentido del mundo, ¿no?
Render prop, una función que devuelve lo que tiene que renderizar y que tiene la utilidad
que como es una función podrá recibir por parámetros la información que necesitamos
para que este formulario funcione como queremos.
¿Cómo llegan estos parámetros?
Bueno, ahora lo veremos.
Porque primero tendríamos que inicializar de alguna forma formic y decirle la información
que tiene que funcionar en este formulario, ¿vale?
Entonces, ¿qué información es la que queremos?
Pues la que queremos le tenemos que pasar aquí los valores iniciales que va a tener el formulario.
Por un lado vamos a tener el username y lo otro es el password.
¿Vale?
Entonces lo vamos a pasar así.
Como valores iniciales, el username y el password.
¿Vale?
Esto lo ponemos por aquí, esto aquí.
¿Vale?
Eso hasta aquí.
Luego, le tenemos que decir qué es lo que tiene que ocurrir cuando haga submit.
¿Vale?
Pues cuando hace submit, aquí le llega una función donde va a tener todos los valores de nuestro formulario.
Por ahora podríamos hacer ya el register y pasarle los valores directamente, ¿no?
Porque los valores al final va a ser un objeto donde va a tener el username que tenga y el password.
O sea que ya estaría funcionando.
Esto es lo que queremos que haga nuestro formulario.
Pero claro, ahora dirás, bueno, esto está muy bien, tenemos los valores iniciales y tenemos el onSubmit,
pero ¿cómo hacemos que tenga este componente vida, no?
¿Cómo hacemos?
Porque si yo ahora guardo estos cambios, podremos ver aquí que esto, sí, esto se pinta y tal,
pero seguramente si viésemos dónde están estos valores y le damos a registrar,
de hecho voy a poner console.locki de los values, ¿vale?
Y guardo los cambios.
Y le doy aquí, voy a abrir las herramientas de desarrollo para que veamos esto más claro.
Voy a ver, voy a filtrar esto fuera de errores, warnings, ¿vale?
Y a ver si puedo ver a este registrarse.
Yo pongo aquí cosas, ¿vale?
Le doy a registrarse.
Bueno, claro, encima el problema es que ni siquiera estamos haciendo un prevent default
y lo que está haciendo el formulario es tirar hacia adelante y hacer el submit y tal.
Tenemos que evitarlo, ¿no?
Porque este formulario que vemos aquí de alguna forma tenemos que decirle,
oye, no hagas el submit normal, sino que tenemos que decirle aquí, ¿no?
Lo que tiene que hacer, no, esto no es mágico, un submit.
Y tendríamos que decirle de dónde viene esto.
Entonces, aquí, entre los parámetros, recibe diferente información.
Y entre ellas sería el cómo tenemos que hacer el submit de nuestro formulario.
Que si no recuerdo mal, lo estoy mirando en la chuleta porque no me acuerdo, ¿vale?
Pero creo que aquí, aparte del submit y tal, viene diferente información.
Y una de ellas es el handle submit.
Con el handle submit que le llega por parámetro, lo podemos utilizar aquí.
De forma que ya le estamos diciendo que este form, voy a poner esto así,
este form tiene que utilizar este handle submit de formic
y esto ya te preparará de forma que utilizará este, ejecutará este, ¿vale?
Vamos a guardar los cambios y lo vamos a ver más claro.
De que si ahora pongo esto aquí y le voy a registrarse,
al menos ya tenemos el console log.
Pero claro, no tenemos la información que hemos escrito aquí.
O sea, yo estoy escribiendo aquí, sí que está funcionando.
Bueno, ahora encima ha petado porque sí que ha enviado la petición al registro
y ha dado un not ok y además nos hemos hecho un catch, ¿vale?
Pero esto es normal, por ahora.
Lo importante es que ya está el on submit funcionando,
pero no estamos recuperando los valores todavía.
Entonces, de la misma forma que tenemos un handle change,
hay un handle submit, tenemos un handle change.
Que este handle change tendríamos que decírselo a cada uno de los inputs.
Aquí tenemos un on change, handle change.
Y aquí tendríamos un on change, handle change.
Pero ¿cuál es el problema?
Que ahora mismo no sabría decirte qué input es el password y cuál es el username.
Para eso necesitas utilizar el name, ¿vale?
Y el name le vamos a decir que el primero es el username y el segundo es el password, ¿vale?
Esto tiene que ser un string.
A ver, esto tiene que ser un string.
Así.
Le vamos a decir a cada uno cuál es.
Username y password.
Ahora, esto, si ahora escribimos aquí y aquí y le damos a registrarse,
vemos que ahora sí está recuperando esta información.
Lo que es interesante de esto es que no hemos tenido que escribir ningún tipo de estado ni nada, ¿no?
Eso es lo mejor.
Aunque ya podemos ver que hay bastante boilerplate en este caso.
Uy, ¿qué ha pasado?
He hecho aquí un format y no le ha gustado.
A ver.
Estoy formateando el código.
Vale.
Vale, queda un poquito mejor.
Vale.
Hasta aquí, muy bien.
Pero el problema de todo esto todavía es que no está haciendo lo que queremos.
Sí que está haciendo el register.
De hecho, es extraño, ¿no?
Porque aquí a lo mejor sí que ha hecho ya la llamada del register y no hemos visto la respuesta.
Mira, aquí podemos ver que ya ha hecho el register y ya ha funcionado correctamente.
¿Qué pasa?
Que mientras no tenemos visualmente ninguna información de que se está registrando, ¿no?
Para eso tenemos aquí otro campo que es si se está haciendo submit, ¿vale?
Es isubmitting.
Lo vamos a utilizar para desactivar el botón.
Así que le vamos a poner disable de forma que va a estar desactivado si estamos haciendo submit del formulario.
Pero ¿qué pasa?
Que para saber si está haciendo submit y tal, ¿cómo se lo decimos?
Le tenemos que decir de alguna forma que está haciendo submit.
Bueno, hay una cosa interesante en Formic que es que podemos devolver una promesa.
Y va a saber cuándo la promesa se ha resuelto o no para saber si está haciendo submit hoy el formulario.
Así que vamos a hacer un return del register, que es nuestro servicio, que toma los valores y registra al usuario.
Voy a guardar los cambios.
Y aquí ya para empezar a no liarla voy a poner pepito 1, ¿vale?
Y voy a poner A porque aquí ahora vamos a empezar a registrar usuarios y va a ser un poco molesto, ¿vale?
Así que voy a darle a registrarse, ¿vale?
Y bueno, veo que no, claro, visualmente no hemos visto nada.
Porque aunque ha hecho este disable y a lo mejor está haciendo submitting, visualmente el botón no se ve diferente.
Así que vamos a buscar el botón y lo que vamos a hacer es que, voy a subir esto para que lo vea ahí bien.
Entonces, si hacemos un disable, si estamos desactivando, lo ponemos así como medio sin opacidad.
Y pointer events none, pues para evitar que lo pueda volver a clicar.
Que ya sabemos que si no los usuarios se vuelven locos.
Así que la idea de registrarse, bueno, no se ve mucho.
Pero se ve un momentito, ¿no?
Se ve un momentito que está haciendo eso, ¿no?
Y podemos ver, bueno, que está petando además, pero tampoco vemos esta información de que esté petando, ¿no?
Me acaba de petar, sí que me ha creado uno la primera vez que lo he creado y luego está petando.
Entonces, ¿cómo podemos solucionar esto?
¿Cómo podemos ver si la API está petando en algún momento?
Vale, pues vamos a ver cómo lo podemos solucionar.
Para eso vamos a ir...
Ay, a ver, a ver, está petando...
Para saber si está petando tenemos que mirarlo en los errores.
Pero para ver los errores tenemos que tomarlos de aquí.
Aquí, entre los diferentes parámetros que tenemos, tenemos el errors.
El errors...
El errors...
A ver, el errors...
Vamos a ver qué tiene el errors antes de darle.
Porque el errors...
No sé si en el catch deberemos...
Para la validación sí que lo tengo claro.
Pero ahora no sé si el errors, cuando lo tenemos ahí, nos lo va a decir directamente.
O sea, si por lo de luego podemos poner una validación aquí.
Podríamos poner el validation.
Y con eso sí que podríamos tener los errores.
Pero yo creo que este errors también nos tomaría si hemos hecho un catch.
Al devolver la promesa está viendo si tenemos un catch.
Y en el catch nos debería decir el error.
Así que vamos a ver.
Si pongo aquí un console.log errors...
A ver qué me está devolviendo los errores.
¿Ves? Ahora está vacío los errores.
Vamos a poner esto.
La primera vez funciona bien porque ha ido bien.
De hecho, cuando estamos haciendo el submit, aquí lo que podríamos hacer...
Ya es decirle que si ha ido bien, que navegue a otro sitio directamente.
Y ya no tenemos este problema.
Entonces, para el errors...
Ahora que ya hemos creado este, si le damos...
No, está haciendo directamente...
Está petando.
Vale, no pasa nada.
¿Por qué?
Porque en el submit, aquí, lo que tenemos también es otro parámetro...
Voy a hacer esto más chiquitito.
Tenemos otro parámetro que lo que nos va a permitir, básicamente,
es poder actualizar si tenemos algún tipo de error.
Para eso, voy a mirar dónde tenía...
Vamos a mirar la documentación un momento.
Porque tenemos el set submitting, pero aparte el on submit...
Vamos a mirar aquí.
On submit...
Aparte, tenemos este for me back, que veis aquí.
Este for me back tiene como un montón de utilidades para el formulario.
¿Vale?
For me back.
Tenemos on submit, for me back, for me back...
For me back.
¿Vale?
Ningún sitio me va a decir lo que tiene el for me back.
Porque en el for me back le podemos decir los errores que tenemos.
Le podemos decir, oye, este...
Tenemos un error de lo que sea.
For me back.
For me back.
Es que era set fill...
Set fill error.
Esto.
Esto es lo que tenemos.
Ahí está.
Set fill error.
Aquí lo tenemos.
Vale.
Set is submitting.
Vale.
Pues el set fill error es el que deberíamos utilizar.
Voy a probarlo.
Si nos funciona aquí.
Set fill error.
Y esto lo podríamos utilizar aquí en el catch para tomar el error.
Bueno, el error al final lo vamos a ignorar.
Y le podríamos decir set fill error.
Podemos poner el username.
Aquí le podemos decir la fill del string, el campo, y luego el mensaje que queremos que
tenga de error.
This username is not valid, por ejemplo.
Y esto, esto sí que lo vamos a poder recuperar en los errores.
Vamos a verlo ahora.
Si pongo otra vez el asd, asd, le damos una vez.
Vale.
Y ahora sí que podéis ver que tenemos el error.
Este error es el que podemos aquí o arriba.
Vamos a ponerlo aquí.
Vamos a poner un span.
Voy a ponerlo a saco, ¿eh?
El color del error tampoco pasa nada.
Pero lo que podemos hacer es, por ejemplo, aquí poner los errores.
Errors y podemos decir username.
Luego, además, que podemos recuperar los errores que tenemos aquí, también podemos
recuperar los que hemos tocado.
De forma a decir, vale, este error me lo puedes enseñar solo si has tocado realmente
este input.
Bueno, en este caso vamos a ir directamente y vamos a hacer esto, ¿no?
Vamos a decirle que si tenemos errors username, entonces mostramos el username.
Bueno, o podemos poner directamente esto.
Vamos a ver.
Nos debería salir ahora, ¿vale?
Asd, asd.
Y le damos a, bueno, ponemos aquí uno.
Vamos a registrarse.
¿Vale?
Y ya podemos ver que nos ha salido este error, ¿vale?
Ya tenemos aquí este error.
Por cierto, en este class name, si le ponemos aquí el form que hemos utilizado antes, esto
ya empieza a tomar más sentido, ¿no?
El estilo.
También podemos ponerle placeholder, put here the username, ¿vale?
Y aquí put here the password.
Vale.
Ahí está.
Uy, placeholder.
Vale.
Me dicen por aquí.
Creo que deberías usar setErrors para que regreses el campo y el error del campo.
Sí, puedes utilizar o setErrors, podríamos utilizar setErrors, ¿eh?
Podríamos utilizar setErrors al final, lo que hace también.
Mira aquí, setErrors, setErrors.
Y este setErrors, lo que podemos hacer con setErrors, a ver si nos dice la...
Es que tenemos que pasarle como el string, o sea, el string.
Le podemos pasar todos los errores que tenemos, tanto para el username como para el password.
Pero lo que podemos hacer directamente es decirle directamente qué campo es con el setFillError.
Al final el setFillError sería como llamar al setErrors, pero solo para el username, básicamente.
Para que nos hagamos a la idea, ¿vale?
Entonces, esto por un lado.
Ya tendríamos el catch del register, de forma que cuando tenemos un problema, pues decimos setFillError, username.
Este nombre de usuario no es válido.
A ver, que puedes poner el error que quieras.
No pongas que está repetido, que ya está la base de datos o que la contraseña ya está pillada, ¿vale?
Pero al menos esto ya funcionaría.
Y aquí ya tendríamos el errorUsername y ya tenemos errores.
Por supuesto, el problema además que tenemos aquí ahora mismo es que no estamos validando nada.
No estamos haciendo ningún tipo de validación, ¿vale?
Entonces, ¿qué pasa?
Que ahora estamos mandando a sacos ningún tipo de control lo que estamos haciendo submit del formulario.
Entonces, hay un tema que puedes hacer validaciones de una forma bastante sencilla.
Lo que podemos hacer es decirle, igual que tenemos el initial value, es decir, validate.
Y lo que queremos validar son los valores que nos llegan.
Para eso, aquí tenemos que pasarle una función que lo que vamos a hacer es validar cada uno de los campos.
Y lo que vamos a hacer es evitar que haga el submit de este formulario.
Cuando lo queremos hacer, pues cuando de los valores el username, cuando no está, por ejemplo,
lo que podemos hacer es crear aquí, aquí vamos a crear los errores que queremos que devuelva, ¿no?
Esto sería muy similar a lo que acaba de comentar Freddy, que sería utilizar el set errors.
Aquí lo que estamos haciendo es un set errors, pero antes de que ni siquiera estemos haciendo submit de nuestro formulario, ¿vale?
Así que lo que podemos decir, que si de los valores el username, pues no viene, por ejemplo, que viene vacío,
pues los errores del username, pues aquí le podemos decir que será required username.
Lo mismo para el password, ¿no?
Le podemos decir que el password, password, le decimos required password.
Exacto.
Y al final podemos devolver los errores.
Aquí podemos añadir más.
Por ejemplo, podríamos decir, if values, password, aquí podemos hacer un else, ¿no?
Si tenemos el password, pero el length es menor a 3, pues le podemos decir, oye, pues el error del password en realidad,
el length must be greater than 3, por ejemplo.
Podríamos meter un montón de validaciones aquí y al final devolver estos errores.
De forma que con estas validaciones, ahora lo que podemos hacer aquí es darle directamente y ya podemos ver,
bueno, no lo podéis ver, pero ya os lo cuento ahora yo, ¿vale?
Que aparece el error que tenemos aquí.
Como puedes ver, esto sí, solo me ha añadido el username, pero eso es porque no hemos puesto aquí nada del password.
Si aquí añadimos, aquí abajo, ahora ponemos el password, y ponemos password, ¿vale?
Y guardamos aquí los cambios.
Y ahora hacemos, lo dejamos vacío.
Bueno, esto es un poco raro, ¿vale?
Porque los tenemos los dos juntitos.
Tendríamos que poner saltos de línea y tal.
Lo tendríamos que hacer un poquito más bónico, ¿vale?
Vamos a hacer esto.
Si tenemos esto, pues errors username.
Vamos a hacerlo en un momento.
Y esto lo mismo, pero para el password, ¿vale?
Al menos así tendremos los errores.
Vamos a hacer que esto se vea más chiquitito, con un small, ¿vale?
Y le damos a registrarse.
Vale, pues ya tenemos required username y password.
Vale, pues voy a poner el username.
Pongo mi dudé y le doy a registrarse.
Ahora me dice que el que es required es el password.
Si ahora le doy a 1 o 2 y le doy a registrarse, pues ahora me dice que el length tiene que ser mayor de 3.
Entonces, lo que está muy bien es que cada error lo estamos validando en un solo sitio.
Y si lo muestras el error bajo cada input, muy buena.
También se podría hacer.
Podríamos hacer que este, cada uno de los errores, los tengamos debajo del input, ¿vale?
Lo podríamos tener, por ejemplo, aquí.
Lo podríamos poner aquí, justo debajo del input.
De forma que nos diga cada input qué es lo que ha fallado.
¿Vale?
Aquí podríamos tener este.
Y este lo podríamos dejar aquí.
Al final, aquí lo que está genial es que podréis hacer lo que queráis.
Bueno, en este caso queda un poco raro porque como hemos puesto el margin-bottom antes, pues ahora sale como muy separado, ¿no?
Y parece, ay, perdón, este lo he puesto donde no era.
Lo he puesto justo debajo del botón.
¿Vale?
Pero, mira, vamos a hacer algo.
Vamos a poner aquí class name.
Vamos a poner form error.
Vamos a ir donde hemos puesto el form.
Vamos a arreglar esto en un momento, ¿vale?
Para que quede, vamos, para error.
Y lo que vamos a hacer aquí, que este será el red.
No sé si le podemos poner 12 píxeles.
Vamos a ajustarlo.
No deberíamos ajustarlo así, ¿vale?
Pero vamos a ajustarlo por ahora así.
Y vamos a ver ahora cómo queda.
¡Ugh!
No queda...
Esto es form error, form errors.
Lo he hecho...
Sí que lo he hecho bien, pero el margen...
El margen no me ha hecho mucho caso.
A ver.
¡Ah!
¡Ostras!
Es que, claro, le he dejado al final la p.
Vamos a ver esto.
Vamos a ver esto.
Que esto al final lo hemos dejado así.
Vale, pues esto ahora al final lo podemos dejar más simple, ¿vale?
Lo vamos a dejar así.
Que básicamente, si tiene, pues nada.
A ver, podríamos...
Lo que podríamos hacer es evitar...
A ver, voy a dejar a esto.
Bueno.
No lo está dejando mucho mejor.
No lo está dejando...
Es súper raro, ¿no?
Porque al final lo que quiero es este small.
Es raro que no me...
A ver, ahora.
Podríamos dejarlo así, más o menos.
Deberíamos hacer más renderizados condicionales aquí.
Por ejemplo, evitar que este small, para enseñar el error,
que solo lo haga cuando tiene sentido, ¿vale?
Así que haríamos esto y lo pegaríamos aquí.
Y así evitaríamos que incluso deje ese small cuando no lo necesitamos, ¿vale?
Eso sería una buena práctica.
Y luego aquí, pues por ejemplo, podemos dejarlo así.
Y este small también, este, esto de aquí, también lo pintaríamos solo cuando tenga sentido, ¿vale?
Porque si no, vamos a tener ahí ese small cuando no hace falta.
Vale.
Ahora sí.
Vale.
Me ha formateado el documento.
Espero que no haya roto nada.
Por ahí podrían ir los tiros.
Se pueden hacer muchas más cosas.
Por ejemplo, si detectas que tienes un error username, pues podríamos hacer que se aparezca en rojo ese input, ¿no?
Podríamos hacer que aquí tengamos el class name, que si tenemos un error username,
pues entonces le añadimos una clase que sea error, ¿vale?
Y ya está.
Y de esto mismo lo podríamos hacer también aquí.
¿Vale?
Y de esta forma podríamos incluso estilar cada uno de nuestros inputs.
Aquí tenemos el del password.
Así que el input, ahora, si tiene un error, decimos, si form input punto error,
¿he puesto error o he puesto...?
Error, vale.
He puesto error.
Podríamos ponerle un borde especial que fuese de un color.
Bueno, no se ve mucho.
Podríamos ser más exagerados.
¿Vale?
¡Pum!
Es un poco exagerado, ¿vale?
Me he pasado.
Pero ya ves, ¿no?
Por dónde van los tiros.
Que al final ahora ya tenemos esto.
Ahora si le doy aquí y lo arreglo, pues ya desaparece.
Está haciendo la validación mientras escribimos.
Ahora, todo lo que hemos hecho es bastante, bastante boilerplate.
Existe, porque, bueno, hemos tenido que el onChange, el no sé qué, el no sé cuánto.
De hecho, aquí tienes un poco el ejemplo.
Luego, lo que se puede hacer es utilizar directamente todos los componentes de Formic,
que es como te recomiendo que estés trabajando.
Esto era para que vieses desde cero cómo lo deberíamos hacer o las ideas que hay detrás.
Pero lo ideal sería utilizar todos los componentes de Formic.
Por ejemplo, tenemos Formic, utilizamos el Form y lo que podemos hacer con el Form directamente es que ya no tenemos que pasarle el onSubmit,
porque ahora sí lo haría de forma totalmente automática.
¿Vale?
Entonces, es importante que utilicéis los componentes de Formic para quitar el máximo boilerplate posible.
Lo puedes hacer si tienes algunas necesidades muy complejas, pero no suele ser necesario, creo yo.
¿Vale?
Normalmente ya con esto lo tienes.
Entonces, tienes el formulario que sería el Form, el Fill sería el Input, así que en este caso pondríamos aquí el Input.
El Input, tendríamos que quitarle un Change que ya no sería necesario, porque lo haría automáticamente.
El Form aquí lo tendríamos que cerrar.
Así que ya podemos quitar también el HandleChange.
Y además, también tenemos el ErrorMessage, que el ErrorMessage lo que nos va a hacer es renderizar de forma totalmente automática el error
y hacer renderizado condicional por nosotros.
Entonces, ya no necesitamos todo esto que hemos hecho aquí, ¿no?
Que es un poco raro.
No es raro, es normal, ¿vale?
Pero si quisiéramos hacerlo bien, tendríamos que extraerlo en un componente, ¿no?
Sería un poco...
Entonces, lo que podemos hacer es...
A mí lo del ClassName este me ha gustado.
Entonces, voy a dejar tener aquí el ErrorMessage.
Pero bueno, lo bueno es que tanto como Form como Fill, le puedes seguir pasando las props como ClassName, un Placeholder, las cosas que necesites.
Lo único que puedes es quitarle estos métodos que son demasiado boilerplate.
Entonces, aquí lo que podemos hacer es el ErrorMessage y le decimos de el Field...
¿Era el Field?
El Name.
No, le decimos el Name, que es el nombre del campo, en este caso Username, y le decimos cómo tenemos que renderizar, en qué componente lo tiene que renderizar.
En este caso le han dicho un Deep, pero nosotros hemos decidido que sea un Small.
Así que vamos a poner que el componente es un Small.
Y ahora, automáticamente, esto solo se va a renderizar este ErrorMessage cuando realmente lo necesite.
Así que ya podemos quitar esto.
Ya ves que lo podemos dejar aquí.
Este sería para este y este lo podemos poner aquí.
Y esto sería para el Password.
¿Vale?
Y este Field que tenemos aquí, no sé por qué me lo he dejado así, pero esto se lo puede auto-cerrar.
No hace falta que sea abierto y cerrado.
No sé si es que hay algo que no le...
Porque normalmente eso me lo formatea solo.
Vale, pero ya tenemos los dos campos, tenemos esto y ya podríamos registrarnos.
Bueno, veo que el Small, el ErrorMessage no me lo está enseñando.
El ErrorMessage no me lo ha enseñado.
Ah, sí, sí que me lo ha enseñado.
Lo que pasa es que no es tan rojo.
No sé si al ErrorMessage le podemos pasar un ClassName.
No lo sé.
Igual sí, ¿no?
¿Para que utilicemos justamente lo que teníamos antes?
Sí, vale.
Pues aquí lo tenemos.
Ya le pasamos el ClassName que utilizábamos antes y así ya lo tenemos estilado como lo teníamos antes.
Perfecto.
Pam.
Y lo mismo, ¿no?
Pues ya esto al cambiarlo ya se arreglaría, haría la validación como al vuelo.
Y aquí pues nada, ponemos dos y ya nos dice que el length tiene que ser mayor a tres.
Y esto mismo lo podríamos hacer con el login.
Pero de esta forma, si miramos un poco el código, vemos que ha quedado...
No sé si el button...
El button no hace falta.
No hace falta.
Pero ya vemos que ha quedado bastante bien.
Además hay ciertas cosas que podríamos incluso extraer del componente.
Por ejemplo, las validaciones.
El validateFields.
Pues esto lo podríamos tener aquí fuera sin necesidad de tenerlo dentro.
Que esto es un poco lo que comentaba yo antes que a mí particularmente me gusta.
No sé quién me comentaba, ¿no?
Que decía el tema de poner directamente aquí las funciones.
A mí me gusta que el render quede bastante claro, ¿vale?
El render quede limpito.
¿Por qué?
Porque a la hora de tocar este componente, el que venga detrás, ¿no?
Pues lo entenderá mucho más fácil.
De esta forma no se tiene que pelear de dónde viene esto, dónde viene lo otro y todas estas cosas.
¿Vale?
Entonces, ¿yo lo que haría?
Lo haría yo, ¿eh?
Aquí cada uno ya sabéis que sois libres de hacer lo que queráis.
Pues esto sería una, ¿no?
Luego, pues nada, incluso con el submit también lo podríais hacer.
Es que lo que está muy bien es que podéis recoger este código y ya dice validate, validateFields.
Y vamos aplanando un poco lo que es el render, porque si no, luego encontramos estos renders, ¿no?
Que son como enormes, que creo que no hacen mucho bien.
Entonces, este handleSubmit, por lo mismo, lo podríamos tener aquí.
Los initialValues, pues igual.
InitialValues.
Y lo podríamos tener aquí.
Incluso lo podríamos tener en un fichero externo, ¿eh?
Lo que queráis.
Al menos así ya, pues empezaría a tomar forma y aquí, pues ya estaríamos utilizando formic.
Aquí, este formulario de registro, esto lo podemos quitar.
Lo tenemos dos veces.
No sé por qué lo he dejado tanto tiempo, pero básicamente ya lo tendríamos.
Esto sería un poco un inicio de utilizar formic, ¿vale?
Entonces, si os parece, lo que podemos hacer es ver cómo lo podemos pasar directamente a ReactHookForm.
Voy a probar una cosa antes.
Que, claro, hemos dicho de, por ejemplo, vamos a Nicolás.
Nicolás.
Vamos a poner a Nicolás Santis.
Y vamos a ponerle una contraseña que sea bastante potente.
1, 2, 3, ¿vale?
Ah, importante, que aquí no hemos puesto que esto es del Type Password.
¿Vale?
Que si no, es un poco raro.
Vale, ahora, ahora.
Entonces, vamos a poner Nicolás.
Y vamos a poner 1, 2, 3.
Vale, que esto funciona todo bien y tal.
Ahora, nos registramos.
Y como puedes ver, claro, ha hecho el submitting, se ha desactivado, pero aquí no ha pasado nada.
Lo que comentaba antes es que esto era importante.
Y es una razón por la que no podremos sacar tan fácilmente este Handle Submit.
Lo podemos arreglar, pero ahora veremos.
El tema es que a mí me gustaría que cuando...
Podemos hacer dos cosas, claro.
Podemos hacer diferentes cosas.
Voy a echar para atrás esto, ¿vale?
Y voy a ponerlo aquí.
¿Por qué?
Porque aquí estaría bien tener un estado que sea Registered, por ejemplo.
Y aquí, pues, ponemos que sea defecto false.
Y lo que vamos a hacer, a lo mejor, es enseñarle algo al usuario.
Y le podemos decir, vale, si se ha registrado, pues, lo que vamos a hacer es devolver, pues, decirle...
Congratulations, you have been successfully registered.
Vamos a ponerle aquí un check.
¿Vale?
Tenemos este H2.
Le ponemos por aquí.
Y entonces, lo que vamos a decir es que si está registrado, pues, que le enseñemos esto, ¿no?
Y al final, incluso, podríamos hacer un set y timeout para que navegue a otra página.
Le decimos, en tres segundos vas a salir de esta página, por ejemplo.
Vale.
Entonces, esto lo que vamos a hacer es que este setRegister cambie cuando aquí hagamos un then.
De esta forma, lo que vamos a hacer es, vale, cuando esto ha ido bien, vamos a decir que el usuario se ha registrado.
Porque si no, claro, vuelve a salir este formulario aquí hasta el infinito, ¿no?
A ver.
Vale.
Entonces, vamos a poner a Nicolás 2.
Y Nico...
Vale.
Vale.
Pues, ya está.
Ya estaría registrado.
Ya le hemos dado el aviso.
Ya no...
Bueno, igual es muy grande el H2, ¿vale?
Un H4.
Un H4.
Aquí también.
¿Vale?
Pero al menos...
Mira, me está diciendo que guarde la contraseña de Nicolás.
Vale.
Pero al menos con esto, pues, ya lo tendríamos funcionando correctamente.
¿Vale?
Ahora sí que ya tiene más sentido y ya podríamos utilizar a Nicolás.
Ah, no me acuerdo muy bien cuál era su...
Nicolás 2.
Nico.
Vale.
Sí, era esa.
Y ya lo tendríamos registrado y ya funcionaría correctamente.
Ya lo tendríamos aquí.
¿Vale?
Entonces, ahora que tenemos esto, pues, lo que vamos a hacer es utilizar el otro.
A ver qué os parece.
Por ahora, hemos visto que Formic, bueno, pues, no está nada mal.
Vamos a pasar todo esto al de React Hook a ver qué tal.
Porque nos promete, según esto, promete ser bastante más sencillo que como es el de Formic.
Así que lo que vamos a hacer es...
Vamos a pegar esto por aquí para tenerlo de chuleta y vamos a utilizarlo, ¿vale?
Voy a copiarme, para tener la copia, por si queréis, y lo dejaré en el repositorio, voy a poner este index with Formic.
¿Vale?
Para tener el register con el Formic.
O puedo hacer el login...
Bueno, voy a hacer el register, que ya lo tenemos aquí.
¿Vale?
Entonces, lo que necesitamos, por lo que vemos aquí...
Antes, que no se me olvide copiarlo, porque si no, lo vamos a perder.
Vale.
Ya tenemos el index with Formic.
Lo primero que vamos a necesitar es importar directamente...
Mira, me voy a copiar esto por aquí.
Vamos.
Chum.
Vale.
Esto por aquí.
Y esto ya lo podemos quitar de aquí.
Vale.
Lo primero que vamos a necesitar es importar el hook Use Form.
Y esto lo vamos a importar desde React Hook Form.
Como esto no lo tengo instalado, pues, voy a tener que irme a la terminal.
Y mientras me voy a la terminal, pues, voy a pasar a leeros, a ver qué me contáis.
¿Vale?
Pongo esto por aquí.
Y mientras voy a leeros, ¿vale?
Pa, pa, pa.
¿Cómo recomiendas manejar formularios que sean muy grandes?
Me he topado con formularios de más de 50 campos.
Madre mía, qué locura.
Pues, no sé, no sé, sabría decirte.
A ver, yo te recomendaría, sobre todo lo que no te recomendaría es que te lo piques tú, ¿sabes?
O sea, que lo hagas tú.
Porque ya, como puedes ver, Formic, que puede ser que tenga sus problemas de rendimiento,
aunque tiene formas de optimizarlo bastante, aunque sea un poquito más costoso y tal,
creo que ya está hecho, ¿no?
Ya te da herramientas suficientes como para manejarlo y no tener que preocuparte tanto
de gestionar el estado, validaciones y tal.
Seguramente separando bien las validaciones, pues, lo puedes conseguir.
Ahora, igual también mirarse React Hook Form, porque dicen que es bastante más,
tiene mejor rendimiento, pero en este caso, lo que sí que te diría es que no lo hagas tú.
O sea, que no te gestiones todo el estado tú y lo hagas.
Utiliza una de estas dos herramientas que están de sobras testadas por la comunidad
y que te van a facilitar bastante la vida.
Y que hemos visto que son lo suficientemente pequeñas como para que te las puedas permitir, ¿vale?
Así que esa sería, Brian, mi respuesta, ¿vale?
Te dejo por ahí la pregunta.
Ajá.
¿Qué dice por aquí?
De hecho, alguien decía por aquí, eso es lo más correcto.
¿Qué micrófono usas?
Así, ahí, pum, de golpe.
¿Qué micrófono eres tú?
Creo que es un Rode, Rode, Rodecaster, ¿vale?
Razor tiene una buena respuesta, que es la de generar por etapas un formulario.
Eso estaría muy bien, sobre todo si tiene sentido que sea por etapas.
Hay veces, he visto formularios complejos que sí que son una sola página porque es muy dinámico, ¿no?
Que, por ejemplo, si tomo una categoría, pues, tiene que cambiar esto.
Y eso sí que puede ser un poco más problemático.
Pero si puedes hacerlo paginado, pues, mejor que mejor.
Aunque a veces, a lo mejor puede ser paginado, pero oculto, ¿no?
O sea, paginado que no sean páginas reales.
Porque a veces también se te puede complicar el hecho de guardar la información del formulario,
que vaya para atrás y para adelante.
A veces hay que estudiar bien el tema este, ¿eh?
Es un tema, es un temón, el tema de los formularios.
Vale, a ver, a ver, ¿qué más por aquí?
No me comentáis nada más, pues, sigo con esto.
Venga, vamos con el use form.
Ahora, lo que, este hook está muy pensado para ser, ¿qué pasa?
Formic es más como el componente, ¿no?
El que te está como ayudando a hacer las cosas.
Y en este caso es más con hooks, una forma más funcional.
O sea, que aquí el use form, tendríamos que utilizarlo aquí.
Y este use form lo que nos va a dar ya son como diferentes utilidades.
En este caso vamos a tener el handle submit, el register y el errors.
Que este register no es el mismo que el de nuestro servicio.
Así que voy a cambiarle el nombre al register.
Voy a estar register service.
Y esto, por ahora, lo voy a utilizar aquí, ¿vale?
Vamos a ver, vamos a ver.
Este on submit con todo esto, esto me lo voy a copiar.
Y yo creo que lo demás no debería ser muy difícil de que lo gestionemos, ¿no?
Vale, entonces, ¿qué es lo que tiene que hacer cuando hacemos este handle submit?
Vale, ¿qué es lo que tenemos que hacer cuando hacemos submit?
Pues vamos a probarlo por ahora.
Vamos a poner un submit.
Y este on submit al final lo que va a tener es algo muy similar a lo que hemos visto anteriormente de los valores y todo esto.
Es un poco raro, ¿eh?
Como funciona en el react hook form.
Porque es como que tienes el handle submit que le tienes que pasar el on submit.
O sea, este on submit vamos a poner aquí.
Esto es una función que va a recibir los values y vamos a poner aquí un console log con los values, ¿vale?
Entonces, ¿qué pasa?
Que ahora todo este forme que tenemos aquí, todo esto, todo esto, todo esto no sirve para nada.
¡Fuera! ¡Pum!
Lo vamos a pegar por aquí por ahora, ¿vale?
Pero no sirve para nada porque ahora tenemos que volver un poco a nuestro formulario.
Y ahora decirle, vale, cuando el formulario se hace un on submit, ¿qué es lo que tiene que ocurrir?
Pues aquí tenemos que utilizar el handle submit y pasarle como parámetro el on submit.
A ver, le podemos cambiar el nombre.
Por ejemplo, no sé, handle submit, pues aquí le podríamos llamar, no sé, no sé cómo le podríamos llamar.
Vamos a dejarlo así por ahora, pero vamos a ver que esto es como funciona, ¿vale?
Que hay que pasarle handle submit porque este handle submit es el que le va a inyectar los valores al on submit que va a llegar aquí.
Ahora, este on submit es muy similar al que tendríamos aquí, ¿no?
Teníamos aquí este register service y tal.
Pues vamos a hacer esto y esto lo vamos a hacer en nuestro on submit.
Voy a dejar el console log solo para asegurarme que todo funciona bien, pero básicamente esto sería un poco así, ¿vale?
Tendríamos ya el on submit, ¿vale?
Y aquí tendríamos los valores y todo esto.
Ahora, si está registrado esto del estado también lo vamos a seguir cambiando, o sea que esto lo dejamos tal cual.
Lo que voy a mover este state lo vamos a dejar aquí más arriba.
Esto lo dejamos aquí.
Y hasta aquí más o menos tendría sentido, ¿no?
Ahora, vamos a recuperar los inputs que teníamos aquí.
Es un poco problemático, ¿no?
Que lo habíamos puesto en inputs y tal, pero bueno.
Ahora, estos fields ya no tienen sentido.
Lo demás más o menos sí, así que lo vamos a reutilizar.
Ahora, el warden fill ahora es un input.
Ahora, el input, ¿cómo se le cambiaría?
¿Cómo haríamos el on change de antes?
Vale, pues en este caso no necesitamos hacer nada.
O sea, esto ya debería estar funcionando bien.
Lo que veo que tenemos aquí es, si miramos la documentación...
A ver, ¿dónde tengo la documentación?
¿Me he cargado la documentación?
Ah, está aquí.
Vale.
Lo que tenemos es este ref.
Vemos aquí este ref.
Este ref es como la referencia.
Y lo que hacemos es como registrar.
No sé si en este caso solo sería para la validación que tiene pinta.
Entonces, igual, como tal, no necesitamos hacer absolutamente nada más.
¿Por qué?
Porque cuando hacemos un submit de un formulario,
cuando tienes un input que tiene un name,
esto automáticamente hace submit,
esto lo vas a recibir en el onSubmit.
Entonces, de forma automática,
aquí nos estamos evitando hacer el onChange, el handleChange y todo esto.
Así que, por ahora vamos a...
Creo que el ref, no sé si sería necesario.
Si no, lo vamos a descubrir ahora mismo.
Y ponemos el register, pero lo dejamos vacío.
O por lo menos que tenga el required y ahí lo vamos mejorando.
Y luego recuperamos los errores y hacemos un poco lo similar a lo que lo teníamos antes.
Pero por ahora vamos a dejarlo así y ver si necesitamos el ref.
En este...
Uy, he copiado aquí el...
Cuando he copiado esto, he copiado el mismo...
Sí, vale, vale.
Es que he copiado aquí este username y esto no tiene sentido.
Esto es password.
¿Vale?
Vamos a guardar los cambios hasta aquí.
Y vamos a ver si esto nos está haciendo...
Para no llamar a la API, vamos a hacer esto.
¿Vale?
Y guardamos los cambios.
Hago un logout.
Lo siento, Nicolás, te vamos a desloguear.
Vamos a registrar a alguien.
¡Ay!
Claro, hemos perdido los estilos.
Porque aquí he quitado el form.
¿Vale?
Y además tenemos que poner el botón.
El botón puede ser exactamente el mismo.
Recorda que el botón...
El botón...
Vamos a ponerlo aquí.
¡Pum!
Un botón que sea el último de un formulario siempre va a servir como un submit.
Esto es súper importante.
¿Vale?
Entonces, vale.
Tenemos el submitting y tal.
El is submitting, que no aparece por aquí en ningún sitio,
pero estoy bastante seguro que lo podremos hacer.
Si no viene ya hecho, seguro que tenemos una forma de recuperarlo.
¿Hecho?
A ver si tenemos un is submitting directamente.
No.
Bueno, pero lo vamos a poder conseguir fácilmente hacerlo nosotros mismos.
¿Vale?
Veo...
Ah, para registrar...
Vale, veo que registrarlo habría que pasarle directamente la referencia.
O sea, que aunque no pongamos nada, tenemos que decirle,
oye, la referencia...
Esto, registralo.
¿Vale?
Directamente.
¿Vale?
Ref, register.
Aunque no le pongamos...
Que luego si lo queremos complicar, lo complicamos.
Pero por ahora lo ponemos así.
Vale.
Quitamos el submitting este.
Este submitting.
O por ahora voy a poner false a todo.
¿Vale?
Submitting set is submitting state false.
Por ahora vamos a hacerlo así.
¿Vale?
Guardamos los cambios.
Ya tenemos al menos el botón.
Por ahora no vamos a enseñar ningún tipo de error.
Así que vamos a poner aquí nico3123.
Vale.
Aquí se me ha olvidado otra vez el type del password.
nico3123.
Registramos.
Vale.
Y aquí tenemos el objeto.
Os lo enseño ahora.
¡Pum!
El objeto del password123 nico3.
O sea, que esto ha funcionado correctamente.
Ese objeto que hemos visto es el que nos está llegando aquí mismo.
En el submit, en los values.
Uy.
Aquí lo tenemos.
Así que ya podríamos hacer el tema del registro.
Aquí podríamos hacer el set is submitting.
Por ejemplo.
Is submitting.
Sí, alguien está comentando por aquí.
Juan Pablo.
Dice, React Hook trabaja con inputs no controlados.
Claro.
Y de ahí viene el tema de la performance.
¿Vale?
Esto es súper interesante.
Porque en React, cuando tú tienes inputs que están controlados,
el tema de la performance,
claro, cuantos más inputs estás controlando,
pues, claro, tienes que hacer un re-render cada vez que haces uno en change.
En este caso, puedes ver que no tenemos uno en change.
Por lo tanto, no son controlados por React.
Al final, esto es lo que le da una mejora de performance,
pero es posible que esto sea un problema para ti por qué motivo.
Porque no quieres que sea así.
Pero, bueno, tenlo en cuenta.
Una cosa es que sea controlado,
que significa que tienes el estado dentro de React.
Y otra que sea descontrolado,
que básicamente es que React no lo está controlando,
sino que estás confiando en el DOM.
Estás confiando en recuperar esa información del DOM.
De hecho, en este caso es lo que está haciendo,
no tengo ningún tipo de duda.
Este register para tomar la referencia
es justamente para recuperar ese elemento del DOM.
Y de esta forma lo que vas a conseguir
es mejorar mucho la performance.
O sea, va a ir muchísimo mejor.
Pero no está el estado directamente de forma interna en React.
Está controlándolo.
Cuando haces el submit vas a tener esa información y ya está.
Pero, bueno, es una ventaja o una desventaja,
según como lo queramos ver.
Muy bien, entonces, ya tenemos un poco todo esto.
¿Trae muchas desventajas tenerlo como no controlado?
La verdad es que no, no tiene por qué.
O sea, y en realidad, a ver,
no se me ocurre realmente una desventaja
más allá de que estás confiando en el DOM.
Lo cual, bueno, ¿qué significa?
Pues que a lo mejor podrías manualmente cambiar el valor, ¿no?
O sea, si por ejemplo,
que esto es una cosa que no podríamos haber hecho antes, ¿no?
Pero, a ver, he puesto el...
Vale, esto lo he dejado así.
Voy a poner on submitting false.
Por ahora voy a dejar esto así.
¿Qué significa que no está controlado?
Claro, que yo puedo venir aquí, ¿no?
Y vamos a poner, ¿qué me ha preguntado?
Vrime, ¿no?
Y ponemos un 2, 3.
Ahora, antes de darle a register,
lo que voy a hacer es cambiar esto.
Y vamos a poner aquí que este username...
¡Ah, no!
Pero mira, claro, no puedo cambiar de tanto.
Claro, porque está guardando la referencia,
pero no tenemos el valor ahí.
Lo que podríamos llegar a hacer,
no sé si lo podemos hacer,
pero vamos a probarlo, a ver qué pasa.
A ver si cuela y eso hace que haya algún tipo de problema.
Pero si hacemos así, algo así...
Ah, no, pero es que he hecho...
He puesto lo mismo.
Nada, igualmente creo que lo va a controlar.
O sea, creo que lo está controlando,
pero no lo está controlando con el estado de React.
Entonces seguramente está guardando por ahí...
A ver...
Ah, ahora no ha hecho ni siquiera el...
Ay, es que he quitado el console lock.
La verdad es que no se me ocurre
por qué lo querrías,
sobre todo de forma interna.
Quiero decir, que tú lo quieras controlar
en el estado de React puede tener sentido.
Pero que si tienes una librería externa
que lo controle o no,
en realidad no se me ocurre
cuál puede ser el problema.
¿Sabes?
Qué es lo que te puede quitar o te puede...
Porque realmente tú al final lo que quieres
es que es hacer validaciones,
es que cuando hace Zoom
tengas esa información
y que por lo tanto,
si eso funciona,
pues qué más te da.
O sea, que por ahí pueden ir un poco los tiros.
Yo creo que no...
No, ¿ves?
O sea, que creo que no vas a tener
ningún tipo de problema.
No se me ocurre, sinceramente,
ahora qué problema hay.
Lo que sí que estamos viendo
es que puede tener una ventaja
en cuanto a tener una mejor performance.
Ya está.
No se me ocurre otra cosa
que te puedas encontrar
que sea un problema.
No se me ocurre, de verdad.
Vale.
Vamos a hacer esto rápidamente.
SetRegistered.
SetRegistered.
SetIsSubmitting.
Y lo ponemos a false.
A true.
No.
Esto tiene que ser true
y esto tiene que ser false.
Y así vamos a ver
si se puede liar con los estados.
¿Vale?
Vamos a ver si no le gusta
que vayamos a actualizar los estados
y cosas así.
¿Vale?
A ver que...
Solo por probar.
A ver qué le parece todo esto.
¿Vale?
A ver.
Bueno.
Pues no.
No tiene ningún problema.
Ya hemos visto que en este caso
ya ha funcionado
sin ningún tipo de problema.
Ha hecho el registro.
Hemos podido meter un estado.
Se ha actualizado el renderizado
y ya lo tendríamos.
Todavía nos faltaría
todo el tema de los errores.
Porque, claro,
no tenemos errores.
En este caso,
ya podemos ver
en la documentación
que para hacer el tema de los errores
este register
tendríamos que decirle...
¿Ves?
Aquí podríamos, por ejemplo,
poner que es requerido.
Bueno.
Pues sería tan fácil
como el register este
que tenemos aquí
pasarle un objeto
y decirle
required.
Pues true.
Y ya está.
Y esto nos debería permitir
tener aquí el errors username
y de nuevo
poner
small
creo que habíamos puesto esto, ¿no?
Class name
form error
y aquí el error
punto username.
creo que habíamos hecho
algo así
bueno
solo para ver
si realmente
nos pinta
nuestros errores
¿vale?
Y que nos sirva
de comparación
con lo que habíamos hecho
con el otro
required
true
¿vale?
Al menos que sea
requerido
vamos a ver
qué pinta esto
qué es lo que nos gusta
pum
ha petado
ha petado
a tope
vamos a ver
qué le ha pasado
vamos a ver
qué le ha pasado esto
chau
vale
nada
esto parece
que
objetos
vale
¿por qué?
porque
yo aquí me he fiado
que el error
lo vamos a pintar así
errors punto username
y esto no va a ser tan sencillo
como esto
aquí lo que parece
es que cuando tú tienes el error
claro
tú tienes el error
aquí en este caso
ya te dice
veo que aquí en errors
podríamos mirar
qué es lo que tiene errors
aunque aquí veo
que está haciendo
por ejemplo
aquí
dice un example required
y entonces
manualmente
tienes que hacer
eso
a mí me extraña
estoy seguro que el error
no va a devolver más información
¿sabes?
o sea que vamos a tener aquí
un objeto
y que vamos a poder ver mejor
qué es lo que está fallando
en cada uno
vamos a verlo
pum
vamos a ver
bueno
me ha petado por lo mismo que antes
pero ahora ya vemos
vale
que username
username
claro
y el username
esto está petando
pero no me está diciendo
esto del required
o sea no me ha dicho
a ver
no me ha ayudado con esto
del required
es que además es muy raro
porque me ha dejado
un objeto vacío
eso no es lo que esperaba
la verdad
cuando esperaba
a ver
control it
ah bueno
aquí parece que se pueden controlar
los inputs
ojo
importante
aquí tenéis una forma de
ves
React Hook
como que abraza
los componentes no controlados
pero
se puede
mira
ah
mira
claro razón
aquí dice
que igual lo quieres
cuando estás utilizando
un design system externo
¿no?
y quieres controlar
el input
por eso
porque estás utilizando
pues un material design
un andy
cosas así
y entonces tienes un componente controller
para hacer esto
bueno
interesante
¿vale?
entonces
vamos a ver esto
porque aquí
me ha extrañado
¿no?
que yo pensaba
que en el error
si vamos a tener un objeto
ahí bastante
trabajado
pero veo que me ha
me ha puesto un objeto
y ya está
me extraña
el tener que poner
en ese tipo de
que sea requerido
tener que poner
a ver
cuando he puesto
este required
register
required
y le decimos que está requerido
y le decimos que es true
me extraña que no me diga
que el error
sea justamente ese
o sea
oye no
el error que
cuando hemos recuperado los errores
mira
aquí tenemos todos los
vamos a ver
los errors
mira
el watch este
me imagino que también
lo podríamos utilizar
para ver cuando
un input está devolviendo
su valor y tal
lo cual puede estar
interesante
pero el errors
dice
bueno
aquí es la diferencia
si hay errores
y tal
tu detalle
claro
tendríamos de los errores
el single error input
es el nombre del input
que en este caso
es el username
pero luego
ya no
no está dando
más información
aquí sí que pone
que podríamos tener
el punto type
o sea que entiendo
que esto es justamente
lo que queremos
que si tenemos
que es punto type
¿sabes?
o sea
tendríamos que decirle
vale
si el username
o sea
te deja muy
a tu merced
un poco
el cómo vas a demostrar
el error
es un poco
primero
ver que existe
y después
además
ver de qué tipo es
en este caso
por ejemplo
lo que deberíamos hacer
en lugar de hacer esto
es decir
tendríamos que mirar
el tipo del error
y decirle
bueno pues
es el username
is required
bueno es diferente
a formic
formic
creo que en esto
pues parecía
que lo hacía
un poquito mejor
no sé si a lo mejor
hay alguna forma
de que también
mira error message
aquí tenemos el error message
que es también un componente
que también
justamente hace
lo mismo
que el otro
así que en este caso
podríamos conseguir
algo similar
tenemos error message
y le pasamos el error
vamos a probarlo
para que quede un poco
similar al otro
errors message
vale
vamos a tener error message
le pasamos
errors
errors
para tener todos los errores
que lo estamos recuperando
del custom hook
y el nombre
del input
del que queremos
revisar los errores
en este caso
es el username
esto lo vamos a poner aquí
hay una cosa que
vale
aquí nos pone
que podemos ponerle
un as
aquí ya no podemos
ponerle tan fácilmente
el
ah sí
mira
as
vale
vale
a ver
se supone que podríamos
hacer esto
se supone
que deberíamos poder
hacer esto
es un poco raro
en este ejemplo
que pone que puedas
utilizar el text así
pero vamos a probarlo
a ver
y así
esto ya lo tendríamos
tal cual
entonces vamos a quitar esto
pam pam
y este error message
lo vamos a importar
de aquí
o de
a ver
esto
esto es un
esto sí que es de
la librería
vale
vale
lo ponemos aquí
tututututu
error message
esto es el username
y esto ahora aquí
lo vamos a poner
del password
vale
entonces
tenemos error message
esto se renderiza así
no
esto no le ha gustado
importarlo aquí
error
no errors
error
error message
vale
error message
pam pam
y pam pam
vale
a ver ahora
pam
bueno
el error message
aparecerá ahí
no ha aparecido
pero es que a mí me parece
que es este
as
este as
que dice react element
o string
claro
yo creo que aquí habría que
a mí me hubiera gustado
poder utilizar
el span así
para poder pasarle
un
un class name
pero yo creo que esto
seguro
lo tenemos que hacer así
¿qué pasa?
que bueno
ahora nos deja un poco
que el class name
no se lo podemos poner
tendríamos que
crear nuestro propio componente
y tal
oye
¿me guarda los cambios?
¿sí?
pues no
esto no me ha gustado tampoco
no sé si es que no
es que
es como que
sí que me está poniendo el error
aquí
parece que hay un error
pero no me lo está pintando
y el message
inline error message
no
pero eso es solo en el caso
bueno voy a leer
a ver
creo que no quiero ver
formularios para las próximas semanas
ya te digo
no vamos a ver más
formularios para las próximas semanas
es error message
dice Ferdinand
sí
es error message
pero
lo que me
me resulta curioso
a lo mejor en el require
aquí le podríamos poner
this is required
a lo mejor para ver
¿no?
porque a lo mejor
con el true
a lo mejor
necesitamos ponerle un poco
un mensaje
porque si no
vale
claro cuando decimos true
lo que sí que nos está devolviendo
es el true
como vale
aquí hay un error
pero
¿dónde ponemos el mensaje?
que es lo que justamente
nos interesa
vale
pues en este caso
podemos poner el mensaje
lo malo
pues que hemos perdido
un poco los estilos
lo que podríamos hacer
en este caso
es dar por hecho
no me gusta mucho
pero lo que podríamos dar
por hecho
es que en este
punto form
cuando es un small
pues es un error seguro
¿no?
y entonces ya
sí que tendríamos
algo similar
a lo que teníamos antes
tengo que decir
que aunque nos ha costado
bueno
pero me ha costado a mí
porque no lo conocía
y tengo que decir
pues que lo he aprendido
sobre la marcha
y yo he encantado
de aprender cosas nuevas
con todos ustedes
pero
me gusta
me gusta
este register
me gusta
que lo tienes en un sitio
y ya le pones el mensaje
directamente aquí
entonces
utilizando el componente
error message
en realidad aquí tienes
todos los errores
al final en register
además del required
seguro
que teníamos
pues un montón
el max length
y todo esto
vamos a ver
también podríamos utilizar
yup
que es un validador
que está bastante bien
a ver si
veo un ejemplo
de register
me gustaría ver
un ejemplo
de todos los
max length
eso
aquí podemos ver
el max length
el min length
esto está muy bien
porque al final
le podemos decir
vale pues
como máximo
tiene que ser
de 2
de 3
esto está
patterns
wow
pues está genial
esto me gusta
una función
de validar
directamente
le podríamos pasar
puede ser asíncrona
también en formic
pueden ser asíncrona
las validaciones
que también puede ser
interesante
pero bueno
con esto
justamente hemos logrado
un poco ver
como sería con formic
y como sería con
react hook form
que
el initial values
este
aquí ya no lo necesitamos
bueno
este validate fields
tampoco lo necesitamos
vamos a ver
si lo que decían antes
es real
en el sentido
del número de líneas
de código
vale
porque antes decía
en la web
pues comparaba
un poco
el uno con el otro
este se nos ha quedado
en 52 líneas
no bad
y el otro
con todo
nos ha quedado
en 76
hombre
un pelín más complicado
sí que parece
ahí
os dejo un poco
vuestro
para que decidáis
¿no?
Brian
dice si pinta
el borde de rojo
yo diría que sí
que lo ha pintado antes
sí
sí que lo pinta
solo que claro
lo he puesto de un píxel
pero sí que lo pinta
lo está pintando Brian
que
que
que te estabas preguntando
por ahí
vale
pues
¿qué más?
¿qué más me estáis comentando
ya por aquí
antes de
de marcharnos
que ya llevamos
dos horacas
y seguro que tenemos
todas cosas que hacer
¿por qué no usas
Async Await?
pues
es un tema de
de que
bueno
me gusta
me gustan las promesas
no sé qué problema hay
con las promesas
en el caso
de Async Await
además
a veces se puede hacer
más
no sé
menos legible
depende ¿no?
por ejemplo
aquí
pues aquí podríamos hacer
Async
y bueno
es que realmente
ni siquiera necesitaríamos
bueno
podemos hacer aquí Await
y ya pues poner esto
en este caso
sí que estaría bien
pero es también
porque no hemos puesto
un catch
en el caso
de lo otro
¿eh?
¿qué pasa?
que el Async Await
no me gusta mucho
cuando hay que hacer
el catch
eh
porque
si las promesas
sí que estamos teniendo problemas
al anidarlas
sí que se hace difícil de leer
pero una vez que hay un try-catch
aquí ya me deja de gustar tanto
¿vale?
porque entonces ya empezamos
sobre todo cuando tienes que anidarlas
que ya no te queda tan claro
dónde has tenido el catch
a ver
a veces las utilizo
¿eh?
pero las promesas normalmente
si no estoy anidando muchas
a mí me gustan
especialmente
si no
pues un try-catch
aquí
una Async Await
y ya está
que por cierto
no sé por qué la gente
o sea
la Async Await
está hecho con
generadores
no con promesas
que
no sé por qué
mucha gente cree que se hacen promesas
devuelve una promesa
pero está hecho con generadores
que es una cosa
diferente
en JavaScript
que es súper interesante
complejo
pero interesante
pero que
si os gusta más la Async Await
pues fantástico
en este caso
no sé
creo que elegiblemente
y todo
pues en este ejemplo
digo en este ejemplo
se entendía bien
¿vale?
¿qué más?
¿qué más?
¿qué más por aquí?
alguien comentaba
de que debería hacer
un
algo de preguntas
¿quién ha dicho?
¿alguien ha dicho?
bueno
no lo he dado
hola
saludos desde Perú
¿qué plugin se usa
para ver el tamaño
de los archivos?
wow
esa pregunta
me ha dejado muy loco
Eduardo
pues
el plugin que se usa
para ver el tamaño
de los archivos
no sé
no estoy utilizando ninguno
pero
seguro que
el explorador
te va a decir
el tamaño de los archivos
sin ningún tipo de problema
pues nada
veo que ya estamos aquí
hemos hecho al final
la modal
hemos hecho
la comparación
del formulario
de Formic
con React Hookform
y creo que
nos ha quedado al final
pues ya tenemos
el login y el register
ya tenemos la modal
ya estamos siguiendo
avanzando
con nuestro
nuestra aplicación
de React
de GIF
gracias a todos
porque me parece
brutal
que
que lo hayamos hecho
juntos
esto
y que hemos avanzado
un montón
no sé qué haré
la semana que viene
os tengo que decir
así que espero
que me deis ideas
a ver
qué puedo hacer
ya sabéis
que le dejéis
un like
un like al vídeo
que le deis cariño
si os ha gustado
si queréis que haga más
decidme
de qué queréis que lo haga
vale
para
pues no sé
para ver
qué podemos seguir
faltaron los hooks
los hooks de Formic
es verdad
Freddy
hay hooks en Formic
pero bueno
lo dejo de deberes
que hay un montón de cosas
todavía por ver
y es imposible
que miramos Formic
y también React Hook Form
en menos de dos horas
pero creo que al menos
pues ha estado bien
para ver
la comparación
y hemos visto
que React Hook Form
realmente
era más corto
así que eso está
bastante bien
me dicen por aquí
pasemos todo
a Next.js
no sé
os gustaría
que pasemos todo
a Next.js
Emotion
también puede ser
una buena idea
Emotion
pues
¿qué tal un reproductor
de música?
pues mira
quería hacer un proyecto
porque
bueno
falleció Pau Donés
y me pareció
bonito hacer un proyecto
sobre
sobre música
y
Pau Donés
es el de jarabe de palo
para que no lo sepa
y había pensado
de hacer un proyecto
de música
y que a lo mejor
podríamos hacer
algunas donaciones
para contra el cáncer
no sé
igual cuando esté
en el nuevo piso
pues lo miro
¿vale?
para hacerlo
súper gracias por el vídeo
para el próximo
estaría chévere
Emotion
oye pues
creo que vamos a hacer Emotion
me lo estáis pidiendo mucho
y creo que me
estáis pidiendo mucho
Next.js me gusta
dice
Brian
saluda a los que donaron
no sé cómo ver
no sé cómo ver
como
los que han donado ya
a ver
puedo
¿puedo subir para arriba?
no
se ha perdido
bueno
sé que
mira
ha donado
Andrés Sait
Spinace
su fan
ha donado
Jams Méndez
también
ha donado
una vez más
que lleva un montón
y ya
me dice que me haga un patron
a ver si lo encuentro
que es que
está difícil encontrar en el chat
el super chat
de Sergio Serrano
que decía
hazte el Patreon
el último aviso
mentira
grande
dos dólares
muchísimas gracias
Sergio
otro super chat
de Iván Rivoldi
excelente dinámica
y muy buenos consejos
para prospeccionarse en RIA
creo que no había leído antes
Iván
lo siento
muchas gracias
a ver
a ver si os encuentro a todos
está guay
porque como se ven destacados
pues son más o menos fáciles
de encontrar
así que
oye
muchísimas gracias
a todos los que
contribuís
y a los que donáis
eso
o sea
de verdad
me alegra el corazón
a los que decís
que me escribís
me decís
oye
esto me está ayudando un montón
he encontrado trabajo por esto
he encontrado trabajo
y he mejorado
estoy subiendo de nivel
bueno
pues eso me
me alegra un montón
mira
aquí tenemos el de Jams
voy a ponerlos todos
el de Jams
que eran los 100 pesos mexicanos
a ver si todos los digo
más o menos bien
teníamos el de Andrés
el superchat
con 5000 CLPs
que no sé
que era
eran los chilenos
es que claro
porque pone CLP
es que CLP
no entiende nadie
lo que es
que más
a ver
tenemos el de Sergio Serrano
vale
que dice
hazte el Patreon
el de Iván Reboldi
de 100 ARS
que creo que son
soles argentinos
estoy estudiándomelos
y tenemos
creo que ese era
el último
puede ser
creo que sí
que era el último
así que
ahí lo tiene
fabricando web
saludos a los que han donado
que bien se lo merecen
bueno
pues muchísimas gracias
a todos
por estar aquí
un vídeo más
una semana más
la semana que viene
más y mejor
CLG
dice es el código de Chile
y P es peso
vale
pues peso chilenos
eran peso chilenos
el CLP
gracias
gracias
gracias
muchas gracias
por estar aquí
una semana más
nos vemos en los siguientes vídeos
por favor
dejad en los comentarios
del vídeo
en los comentarios
no en el chat
porque el chat se pierde
en los comentarios
del vídeo
dejad cuáles son
los siguientes temas
que queréis
dadle like
suscribiros
si no lo estáis todavía
y nos vemos en el siguiente
muchísimas gracias
por estar ahí
por aguantar estas dos horas
que al final
ha durado todo esto
dos horas y cuarto
madre mía
me van a echar ronco
que ya es la hora de comer
bueno
muchas gracias
os mando un abrazo enorme
y cuidado mucho
seguid dándole al frontend
no lo perdáis
hasta luego
que ya es