también el nuevo, este hook, que se llama
Use ID. Este, no sé
por qué no salía en el hilo, pero es bastante
importante. Y os voy a explicar
un poquito este, que este es bastante
fácil de ver. Vamos a
poner aquí, y le vamos a cambiar esto
a App, y ponemos esto. Esto es
un nuevo hook.
¿Cuál es el tema? Es que
hay muchas veces que se nos escapan muchas
mejoras de React porque...
Porque...
Venga, Beko, cuídate que se tenía que ir.
Hay muchas actualizaciones
de React, como por ejemplo esta, que tiene
mucho sentido, pero justamente para
el tema de que React es universal.
¿Qué quiere decir que es universal? Os explico.
¿Qué es ser universal? Que llega al
universo y más... No.
React, lo mejor que tiene, y
bueno, no solo React, que ahora mismo casi
todos los frameworks o
bibliotecas y tal, es que son universales. Lo que
quiere decir es que se ejecuta tanto en servidor
como en cliente. Eso es que es universal.
O sea, su código funciona
en las dos plataformas.
Siempre y cuando no pongas
un window ahí en medio, ¿vale?
¿Cuál es el problema? Hay mucha gente que
empieza con React o aprende React
no tiene muy...
No es consciente de esto.
Y es una de las cosas
más importantes que tiene.
Su isomorfismo. O sea, que
funciona tanto en servidor como en cliente.
¿Por qué?
Porque, claro, esto lo que hace es que no
tengas que duplicar código cuando quieres
renderizar en el servidor tu aplicación.
Pero tiene un problema, ¿no?
El problema es cómo convive el servidor
con el cliente. Y muchas veces este tipo
de cosas, pues, tienen cosas trickys.
Como, por ejemplo, esto del useId.
¿Vale?
El useId este es un nuevo hook
que lo que nos va a permitir es crear
una ID única,
un identificador que vamos a poder utilizar
en nuestros elementos.
Y lo que vamos a poder hacer es que este
elemento, esta ID, será la misma en servidor
y en cliente. ¿Y por qué es importante esto?
Esto es importante porque hay veces
que hay gente que hacía esto, ¿no?
Por ejemplo, decía, una ID aquí única
más random.
Pero, ¿qué pasa?
Que tú cuando renderizas esto aquí
y cuando lo renderizas en el cliente,
o sea, cuando renderizas esto en el servidor
y lo renderizas en el cliente,
esta línea se ejecuta en server
y en client.
Y, por lo tanto, el más random
va a ser diferente los dos.
Y no van a hacer un match.
¿Vale? Van a ser diferentes.
Esto no sería isomórfico
porque no estaría renderizando
lo mismo en servidor y en cliente.
Al hacer un dismatch,
esto sería un locurón.
Ya no solo que cambian cada render,
que cada vez que se renderiza
esto cambiaría.
Incluso pongamos que ponéis
un use memo.
Yo qué sé, ¿sabes?
Que decir, no, esto no quiero
que cambie en cada render.
Pongamos que hacemos esto.
El problema es que esta información
no estaría ligada
en servidor y en cliente.
Porque el más random,
esta ejecución es imposible
saber exactamente
cuál es la ejecución
que ha tenido.
Para arreglar esto,
porque esto era un problema
muy común,
de que hay gente que quería
justamente para elementos
de formularios,
por ejemplo,
label input.
Claro, a veces tenías
que ponerle una id.
Y una id, a veces,
sí que le puedes poner,
por ejemplo,
react input,
¿no?
y aquí react input,
pero a veces no te sirve esto.
No te sirve esto
porque tú no sabes
si en toda tu aplicación
hay otro react input.
No es tan fácil poner un string
y ya está.
Y además, poner un string,
pues hay veces que pones
un string arbitrario,
el que te dé la gana,
pero no te soluciona el problema.
Entonces,
ahora han sacado
este use ID.
Y lo que tiene este use ID,
este nuevo hook,
es que te va a dar
un identificador único,
que sabes que no está repetido
en toda tu aplicación de react
y además va a ser el mismo,
el mismo en servidor
y en cliente.
Lo cual,
pues está tremendo.
Está tremendo
porque te quita
un montón de problemas.
Te quita problemas,
es súper simple,
ya no tienes que pensar
en un string random
y tienes este tipo de cosas.
¿El hook use ID
se puede usar
para agregar un key
diferente cuando se listan
elementos con un ciclo?
Pues, por ejemplo,
sí.
Bueno,
no,
a ver,
si son diferentes,
no,
a ver,
el use ID
ten en cuenta
que solo te devuelve uno,
solo te devuelve un ID
y además aquí
tendría que ser,
por ejemplo,
input ID,
¿no?
Esto solo puedes hacerlo así,
input ID
y aquí podrías tener otro
que sería,
por ejemplo,
form ID,
por decir otro,
¿no?
Y tener otro form ID
y esto lo podríamos poner aquí.
Form ID,
¿vale?
Pero no tanto
para utilizarlo de key,
no está tan pensado
para utilizarlo de key.
El tema de utilizarlo de key
sería otro tipo de cosa,
sería una cosa
totalmente diferente.
Yo siempre he arreglado
ese problema
sacando la generación
de la ID
fuera de la función
del componente,
pero eso que dices
hipercubus
es solo
pensando
en clients
al rendering
porque si yo,
por ejemplo,
lo que decía hipercubus,
dice,
vale,
pues ahora hago esto,
¿no?
Digo más random,
bueno,
mira,
esto es bastante,
vaya,
me había puesto
hace un momento
el,
mira,
generate
a const ID
with our math
random,
vaya,
pero eso,
const ID,
antes me había puesto
justo lo que quería,
bueno,
no me acuerdo
si era algo así,
bueno,
por decir algo,
no me acuerdo,
me imaginamos que esto,
esto,
esto te lo genera
y solo te lo renderiza
una vez,
pero esto
ya te digo
que si lo tienes
en server
sard rendering
y en client
sard rendering
vas a tener problemas
igual,
porque es que es imposible
que el servidor
sepa
cuál es la ID
que ha renderizado,
esto te va a dar
un mismatch,
básicamente,
claro,
siempre en client
sard rendering,
era substring,
vale,
pues bueno,
pues substring,
creo que slice
también funciona,
bueno,
pero es una idea,
no,
esta no es la forma
de hacer IDs,
pero solo para que lo entendáis,
vale,
entonces,
esto,
al final el problema
es que esto en el cliente
pues te dará una ID
y en servidor te dará otra ID,
esto no se puede,
como ID única
que sirva para los dos
no lo puede hacer,
a partir de ahora
use ID
que además es mucho más fácil,
o sea,
genial,
y creo que soluciona la papeleta,
creo que súper bien,
súper bien pensado,
ah,
además lo interesante es esto
que puedes concatenarle
como la ID
al final es un string
y lo que te crea
es la ID del componente,
o sea,
en lugar de utilizar dos veces
el use ID,
lo cual está bastante bien,
mira,
use ID genera un string
que incluye un dos puntos token,
esto se asegura
que el token es único
pero no está soportado
como selectores de CSS,
ajá,
y soporte un identifier prefix,
o sea,
le puedes decir,
le puedes decir al use ID
que tenga un,
un identificar un prefijo,
pues eso puede ser interesante,
porque así puedes utilizar
un query selector
para recuperar
todos los que empiecen
por ese selector,
por ejemplo,
y vale,
la ID es solo a nivel
de componente,
ni siquiera hace falta
hacer esto,
o sea,
esto sería a nivel
de componente,
entonces lo que habría
que hacer es más bien,
en lugar de hacer esto,
habría que hacer esto,
habría que hacer esto,
ID form,
por ejemplo,
en este caso,
pues tendríamos que poner
ID y input,
hostia,
y esto aquí,
o sea,
que solo tienes un ID
por componente,
no hace falta hacer más,
la verdad es que tiene sentido,
tiene sentido,
entonces,
por lo que decías
de las keys,
por lo que podrías hacer
es ID y podrías ir aquí
por ejemplo el index,
podrías hacer eso
y así tendrías las keys,
no sé,
no tiene mucho sentido,
o sea,
no hay mucha diferencia
con hacer directamente,
por ejemplo,
pongamos que tenemos aquí
un response
con un 2,
3,
un 2,
3,
vale,
y dices,
no,
es que voy a utilizarlo
de keys,
que sería un poco así,
ponemos aquí P
con el item,
algo así,
¿no?
Vale,
y aquí te faltarían
las keys,
al final la diferencia
entre hacer
utilizar el índice
o no,
es un poco tontería,
o sea,
no le veo ninguna utilidad
en este caso,
porque no tiene ninguna diferencia,
¿por qué?
porque esto siempre va a ser
la misma ID,
esto va a ser siempre
el mismo índice
y el problema sería
que por lo que sea
borras este
y entonces el índice
del 2
pasa a ser el del 3
y entonces tienes problemas
de renderizado,
entonces ya no tiene tanto sentido,
así sí tiene sentido
pero igual el index
hay que tenerle cuidadito,
sí,
o sea,
es que sería el mismo problema,
hostia,
mira,
el jacopilot sabe contar,
la madre lo parió,
me ha dicho,
mira,
cuenta todo esto,
sí,
tiene sentido
pero yo creo que no,
o sea,
se podría usar así
pero no le veo
ninguna ventaja,
básicamente,
porque si utilizas el ID
pues ya estás liado
y ya no tiene mucha historia,
vale,
hay nuevos hooks también,
hay nuevos hooks,
pero estos son más internos,
por ejemplo,
está este hook
que es
using external store
que yo esto
entiendo que es como para
suscribirte a cambios
de algo,
de una store externa
que no tenga que ver
con tu aplicación
pero yo creo que esto
va a tener más que ver
con librerías,
de hecho ya lo pone aquí,
veis que pone el library hooks,
esto no vais a tener que preocupar,
no vais a tener que hacerlo vosotros
y tal,
no es similar a
UUID
pero es que el UUID
tiene exactamente
el mismo problema
que comentaba antes,
vale,
o sea,
tú pones aquí ID
y haces esto
y esto
en cliente
te funciona bien,
en servidor
te funciona bien
pero
es que
el de cliente
y servidor
son diferentes,
¿entiendes?
o sea,
cuando renderizas esto,
cuando este código
se ejecuta en cliente
te da lo mejor,
te dice
cliente
es esto
y en servidor
es esto
entonces
cliente y servidor
pues la idea es diferente,
ese es el problema
y esa es la razón
por la que necesitamos
este UUID
no sé si queda claro,
pero
me sabe mal
porque muchas veces
la gente
lo que hacemos
es pensar mucho
en client-side rendering
pero es que React
es de las dos,
es de los dos.
El UUID
un más random
o cualquier otra cosa
son funciones de tercero
y la ejecución
pierde el isomorfismo,
efectivamente,
efectivamente,
pierde el isomorfismo.
Es que la única forma
en la que podrías
asegurarte el isomorfismo
sería que tú aquí
pusieras
exactamente
la idea,
¿sabes?
No que se generase
sino que tú dijeses
mira,
un, dos, tres,
esta es la única forma,
la única forma.
O recuperándolo
desde un objeto
de fuera,
leyéndolo
de una API externa,
lo que sea,
pero
o leyendo
desde la cookie,
pero tiene que ser
siempre el mismo valor.
Si lo generas
en ese momento
no va a ser el mismo,
ya está.
¿Por qué son distintos?
¿No solo se genera
en el front?
No,
como ya te digo,
no solo se genera
en el front.
A ver,
como veo que no me creéis,
os voy a hacer un ejemplo rápido,
¿vale?
Os voy a hacer un ejemplo rápido
para que lo veáis
porque es que con esto
estoy seguro
que lo vais a entender.
Lo vais a ver clarísimo,
vamos,
o sea,
lo vais a ver clarísimo.
Vamos a instalar el nano ID,
nano ID,
install,
npm install,
nano ID,
¿vale?
El nano ID
es como más random,
como un UID,
como todos,
como todos los que habéis dicho
para generar IDs,
¿vale?
Entonces,
nano ID,
¿vale?
Lo que esto hace
es generar una ID única.
Así que hacemos aquí
nano ID,
vamos a quitar esto,
¿vale?
Guardo los cambios,
me voy aquí,
me voy a mi página,
fantástica,
que al parecer he petado,
voy a levantar esto otra vez,
nos vamos aquí,
vamos a mirar la consola,
¿vale?
No sé por qué esto
no está renderizando nada,
response is not defined,
vale,
esto es porque me he inventado
aquí un array,
bueno,
las cosas tienen que tener linter,
vale,
me dice,
do you like react,
no sé qué,
vale,
si miramos aquí el HTML,
tenemos esto,
¿cierto?
Esto es el cliente,
lo que decir,
¿no?
Esto es lo que hace el cliente,
no sé qué,
no sé cuánto,
igual medio que no me cierra,
lo que react es para el cliente
y para el servidor,
porque,
o sea,
react de Facebook te crea un bundle
y chao,
ya después que hay librerías
que implementan SSR y tal,
pero el bundle se ejecuta en el cliente,
me sabe mal,
porque es una cosa tan importante,
es una cosa tan,
tan,
tan importante,
que no se explica en cursos,
nadie le da importancia,
que es increíble,
claro,
Next.js,
como framework,
pues ya se preocupa de este tipo de cosas
y ya lo soluciona por ti,
mucha gente pues dice,
ah,
pues ya está,
esto es magia,
no me importa la magia,
ya está,
pero es mucho más importante que todo eso,
react se ejecuta en el servidor,
lo vamos a hacer ahora,
lo vamos a hacer ahora,
para que lo veamos,
¿vale?
Para que lo veamos,
para que lo veamos,
para que lo entendáis,
porque es que es súper importante,
de verdad,
amigos,
os lo juro,
que si queréis entender react,
tenéis que entender esto,
porque es que,
si no,
solo sabéis como una parte de react,
además,
una parte,
no sé,
que es importante,
pero minúscula,
mira,
tú por un lado dices,
vale,
tienes el bundle,
tienes todo esto,
eso es importante,
vale,
pero vamos a hacer aquí,
vamos a hacer un import from react.dom barra server,
y esto,
no sé,
no sé qué tendrá ahora,
vamos a ver,
render,
render to string,
bueno,
entiendo que el render to string,
ya no,
a lo mejor ya no lo pone,
render,
render to,
voy a poner to string,
¿vale?
render to string,
render to string,
y aquí importamos lo mismo,
vamos a importar esto,
¿vale?
vamos a importar esto,
y aquí vamos a poner esto,
bueno,
esto no lo podemos poner,
porque en node no tenemos jsx,
obviamente,
entonces vamos a poner react from react,
vamos a poner react.creant,
claro,
me va a fallar,
me va a fallar,
porque no tenemos,
bueno,
como esto no es importante,
¿vale?
como no es importante tanto el contenido,
sino la idea,
vamos a hacer una cosa,
vamos a poner aquí return id,
¿vale?
vamos a mirar un momento esto,
¿vale?
aquí podemos ver lo que me renderiza en el cliente,
es esta idea,
¿vale?
y aquí tenemos create element,
y aquí vamos a ponerle app,
creo que con esto,
render to string,
creo que con esto lo deberíamos tener,
¿vale?
entonces,
node in,
node server js,
vale,
a ver de qué se queja,
vale,
porque no puedo encontrar,
expect token,
ah no,
esto no es,
camera frame module,
react server,
espérate,
¿dónde he hecho esto?
node server,
node server punto js,
¿no puedo encontrar el módulo?
ah,
espérate,
type module,
vale,
esto,
ah,
porque lo he puesto dentro de source,
perdón,
tenía que ir fuera,
perdón,
vale,
vamos a ver esto,
a ver qué problema ahora me dice,
no puedo encontrar el módulo,
app importado,
vale,
esto es porque en server,
tengo que poner punto jsx,
que esto no va a funcionar,
vamos a cambiarle la extensión,
estoy haciendo que nuestra aplicación sea universal y funcione servidor en cliente,
vale,
a ver si lo conseguimos,
no entiende la extensión,
app punto js,
esto lo vamos a quitar de aquí,
se lo vamos a poner,
porque no tiene sentido cargar css en el cliente,
así que lo vamos a cargar solo en el servidor,
vale,
a ver qué dice aquí,
no entiende css,
vale,
pero css,
dice no,
no entiende css,
vale,
vale,
ahora ya sé que funciona,
ya sé que funciona,
mira,
entonces aquí tendríamos el html,
que esto es lo que devolvería,
html,
vale,
esto es lo que devolvería nuestro,
vale,
pues aquí tienes,
aquí tienes,
note punto barra server punto js,
esto es note,
esto no es el cliente,
esto es note,
estoy renderizando la aplicación aquí,
en note,
el problema es que como no soportamos html,
jsx,
tendría que utilizar bit y cosas así,
pero bueno,
pongamos que pongo create element,
h1,
y vamos a poner que el children,
vale,
id,
hello world,
hello world,
vale,
esto me parece bien,
mira,
vamos a hacer esto,
y vamos a poner aquí id,
vale,
vale,
vaya por dios,
vale,
react is not defined,
porque no estoy importando,
vale,
mira,
esto es el servidor,
tú imagínate que cuando tú entras en un cliente,
una página,
pues dices,
vale,
página,
devuélveme,
olvídate del bundle,
olvídate del cliente,
olvídate de nada,
tú vas a una página,
vas por ejemplo a http,
a fotocasa,
no,
a facebook.com,
¿no?
entras a facebook.com,
tú cuando vas a facebook.com,
si tú haces un curl,
imagínate,
olvídate de bundles,
haces un curl,
y esto te devuelve a html,
¿verdad?
¿Ves que nos está devolviendo a html?
Nos está devolviendo cosas,
y no he pasado,
y aquí hay html,
no sé si se ve,
porque hay,
pero ves,
html,
he hecho curl,
no sé qué,
el curl lo que hace es descargar una página sin abrir el navegador ni nada,
sino que básicamente lo que hace es,
pues,
hacer la petición,
y esto le responde el servidor con el html,
con la respuesta que tenga en este caso es html,
y aquí tenemos todo html,
pero ¿cómo ha sacado ese html?
¿de dónde sale este html?
Eso es porque tiene un servidor que está renderizando su aplicación desde el servidor,
olvídate de bundles,
olvídate de todo,
y ahí tiene React,
y se ha renderizado en el servidor,
¿vale?
Ha ejecutado su aplicación en el servidor,
y resulta que te devuelve todo esto,
pues esto mismo que está haciendo facebook,
pues lo acabamos de hacer nosotros,
hago noteserver.js,
y fíjate,
tengo aquí el h1 con la id,
hello world,
y aquí con la id otra vez,
¿vale?
He puesto la id dos veces.
¿De qué sirve ejecutar el servidor?
Pues por lo que te estoy explicando,
porque si tú entras aquí,
si yo entro en el cliente,
mira,
si yo veo el código de la fuente del cliente,
¿vale?
Aquí ves alguna cosa,
o sea,
aquí ves código,
tú ves cliente,
tú ves aquí el hello world,
este que ves aquí,
¿dónde está aquí?
Si busco aquí hello world,
¿dónde está?
No está,
porque lo que está pasando es que el cliente se está renderizando una vez que entra al cliente,
o sea,
es una página en blanco,
la página a la que estás entrando es una página en blanco,
¿entiendes?
Es una página en blanco,
esto es una página en blanco,
entonces,
¿por qué?
¿de qué sirve ejecutarlo en el servidor?
Sirve para que tu página no sea una página en blanco,
porque si es una página en blanco,
no porque sea en blanco literal,
porque es lo que estamos viendo aquí,
pero ves aquí que si miro al root,
ves este h1,
este h1 no está en el servidor,
o sea,
necesitamos renderizarlo en el servidor,
porque si no,
tu página no sirve,
no es que no sirva para nada,
sino que simplemente pues tiene problemas de performance,
Google puede tener problemillas,
es este el problema,
que es una página en blanco que no existe,
no existe,
está vacía,
entonces,
¿a qué sirve renderizarlo en el servidor?
Pues lo que hacemos es transformar esta página en blanco en el contenido,
yo hago Node Server JS,
esto renderiza mi aplicación,
y aquí tendríamos el contenido que tendríamos que inyectar dentro de este root,
¿vale?
Dentro de este root meteríamos este contenido de aquí,
entonces de esta forma,
claro,
piensa,
esto he hecho un h1 por haber hecho un h1,
pero esto podría ser una página mucho más grande,
¿vale?
Y dice,
no es lo que ya hace Node XS,
bueno,
pero yo os estoy intentando explicar la magia que hace Node XS,
¿sabéis una cosa?
Os voy a explicar otra cosa que es bastante importante,
muchas veces me decís,
¿qué hace falta para ser senior?
¿Cómo puedo crecer?
¿Cómo me hago mejor desarrollador?
Pues,
¿sabéis cómo se hace?
Se hace entendiendo cómo funcionan las cosas por dentro y por detrás,
porque si no sabes cómo funcionan,
al final es como si fuese magia,
es como cuando vas a un mentalista y te hacen levitar una llave,
y dices,
¡oh!
Tiene poderes,
es increíble,
no,
no tiene poderes,
lo que pasa es que te está haciendo un truco en toda la cara,
¿no?
y ese es el tema,
el tema es que si no entiendes cómo funcionan las cosas,
no las dominas tú,
ellas te dominan a ti,
y las puedes utilizar y las puedes disfrutar,
pero necesitas entenderlas,
porque si no las entiendes,
pues es difícil que sepas crecer,
y el día de mañana te costará saber también cuál es lo mejor que tienes que utilizar,
cuál es la mejor,
es que al final,
tienes que entender cómo funcionan las cosas por dentro,
luego depende del nivel al que queramos llegar,
¿vale?
Eso ya da igual el nivel,
depende del nivel al que quieras llegar,
de cómo funciona,
hasta dónde quieres llegar la madrigera al conejo,
pero obviamente,
esto lo hace Nex,
¿vale?
Pero cómo lo hace Nex,
pues esto es lo que está haciendo Nex por debajo,
¿vale?
Esto es lo que os quería explicar,
entonces esto es lo que hace Nex,
aquí tenéis Node Server,
estamos renderizando el servidor,
nuestra aplicación de React,
esto se metería aquí en medio,
¿vale?
Y aquí,
y todo esto,
el negocio de cerrajero,
que te abre la puerta,
pero no te dice cómo,
ya,
ya te digo,
aparte si no lo entiendes a fondo,
la puedes liar bien,
ya,
ya,
totalmente,
totalmente,
para ser senior hay que saber programar,
hombre,
al menos un poquito,
un poquito,
entonces,
todo esto,
Facebook a día de hoy no usa Nex,
al menos en la página principal,
todo esto a qué viene,
para qué os he explicado todo esto,
todo esto lo venía a explicar porque,
cuando tú ejecutas la aplicación del servidor,
aquí podemos ver que tengo una IDE,
¿vale?
Pero cuando se ha ejecutado la misma aplicación en el cliente,
lo que estamos viendo es que la IDE es diferente,
porque son dos ejecuciones distintas,
¿vale?
Entonces,
este es el problema,
porque cuando generamos una IDE,
al ejecutarse en un sitio y en otro,
no es capaz de utilizar lo mismo.
En el caso del useID este,
que ahora es donde está la IDE,
vamos a ver este useID de React,
no sé si lo hará por arte de magia,
que sí que consiga que sea el mismo,
de hecho es lo que quería ver.
Bueno,
aquí tenemos dos puntos,
R0,
vale,
yo lo que me imagino que está pasando aquí con el IDE,
es que lo que está utilizando es su,
como algún tipo de letra y tal,
pero también como su posición en el árbol.
Entonces,
me imagino que aquí,
ves,
aquí sí que podemos ver que está utilizando exactamente lo mismo,
que es R0.
A ver,
¿ves?
Nunca cambia.
Vamos refrescando y siempre es R0,
y aquí vamos poniendo y es R0.
O sea que no,
es exactamente lo mismo.
En este caso,
¿qué es lo que,
cómo está haciendo esto?
Yo lo que me imagino,
en este caso,
porque tenemos muy pocos componentes,
y solo tenemos este app y ya está,
¿vale?
Pero yo lo que me imagino que está haciendo por debajo es,
está montando el árbol de elementos,
¿vale?
Del árbol de tu aplicación,
y dice,
vale,
dependiendo de su posición en el árbol,
lo que voy a hacer es darle un IDE,
y ya está.
Es como un hash del componente.
Usa el local storage,
¿para qué local storage?
¿Qué es que utiliza?
Pero si,
el local storage petaría.
Mira,
aquí está lo interesante que os decía.
A ver,
si aquí ponéis local storage,
esto peta en Node,
por ejemplo.
En el local storage,
y esto aquí,
pum,
peta.
Y dice local storage es Node-Define.
Esta es la importancia de que no se deben utilizar APIs del cliente,
al menos utilizar Node.
¿Qué tal React 18 que hay nuevo?
Bueno,
pues estamos...
vamos a por cómo mover el cliente.
Vamos a ver a la nota.
Vamos a ver cuando Merino.
Vamos a ver que lo haríamos Count Complet.