En la clase de hoy vamos a seguir con React. En la clase anterior aprendimos desde cero React,
que era un componente, que eran las props, pero en la clase de hoy vamos a seguir aprendiendo React
y lo que vamos a hacer es entender qué es un estado en React, por qué es importante,
cómo conseguimos que se vuelva a renderizar el componente en React justamente para que tengamos
información dinámica y también vamos a ver cómo podemos manejar eventos en React.
Y con esto vamos a ver también renderizados condicionales. Esto quiere decir que dependiendo
de cierta información vamos a querer renderizar una cosa u otra. Y vamos a ver muchas cosas más
sobre React que son básicas pero son súper importantes para que domines este framework.
Así que vamos a empezar por aquí. Aquí lo que tengo es una aplicación con el entry point,
este es el punto de entrada, que está buscando un elemento en el HTML, que es root,
y está renderizando un componente app. En este caso el componente app es este.
Bueno, ahora mismo para simplificar, para tenerlo todo en el mismo fichero,
lo que vamos a hacer es que en lugar de renderizar este componente app,
lo que vamos a hacer, si os parece, es facilitar, o sea, vamos a ponerlo todo en el mismo fichero.
Vamos a crear aquí nuestro componente app. Ya sabéis que para crear un componente
solo tenemos que crear una constante o una función, pero podemos crear una constante
y asignarle una función. Así que lo que vamos a hacer es por ahora poner aquí
Hola, clase 3 del Midu Bootcamp. Y ahora aquí ya lo tenemos aquí funcionando.
Perfecto. Entonces, voy a poner esto en saltos, que creo que quedará un poquito más entendible.
Por ahora esto lo habíamos entendido perfectamente.
Ahora, a esta app le podríamos pasar props. Esto es un poco revisión de la clase anterior.
Vamos a poner por ahora, por ejemplo, contador inicial.
Y le vamos a pasar un valor, que puede ser un número.
Ahora, para recuperar esto, aquí decíamos que le llegaban unos parámetros a nuestro componente.
Le llamamos props.
Y lo que podemos hacer ahora en lugar del h1 este, vamos a evaluar este props.contador inicial.
Aquí deberíamos ver 0. Si ahora aquí le pongo 5, pues debería cambiar y veríamos el 5.
Es tan sencillo como esto, ¿no?
Estamos viendo que de esta forma estamos pasándole props y dependiendo de las props,
pues se pinta una cosa u otra.
Hasta aquí esto está bien.
Pero, ¿qué pasa si lo que queremos es justamente que este número, cuando cambie, vuelva a renderizarse?
O sea, lo que queremos en realidad es que nuestra aplicación tenga vida.
Porque hasta aquí lo único que hemos hecho, como en la clase anterior,
es mostrar cosas que son totalmente estáticas.
Y esto la verdad es que hace que nuestros componentes sean un poquito aburridos, ¿verdad?
Entonces, imaginad que nosotros tenemos un número, que es el contador este, el contador inicial.
Vamos a crear aquí una variable, le vamos a llamar contador y la vamos a poner por ahora a 0.
Ahora, el valor de esta prop la vamos a pasar aquí, así que de esta forma ahora veremos el 0,
porque si el contador es 0, pues le pasamos el 0, ¿no?
Si ahora le ponemos 1, pues será 1.
Pero imaginad que ahora el contador lo queremos sumarle un número más, ¿no?
Para hacer una asignación e incrementar en 1, pues hacemos contador más 1, ¿vale?
Pero si yo hago esto, iniciamos, por ejemplo, en 0, renderizo la aplicación y luego incremento,
lo que podemos ver aquí es que esto se queda en 0.
Esto no tiene mucho sentido.
¿Qué es lo que puedes hacer?
Vale, pues podríamos volver a recuperar este código, copiarlo aquí abajo y ahora sí que veríamos que pone a 1.
Pero nunca hemos visto cómo pasa el 0 al 1, ¿no?
Directamente vemos el 1.
Podríamos volver otra vez a repetir esto.
Ahora lo que hacemos, veríamos el 2, pero no vemos el paso del 0 al 1 al 2, ¿vale?
Esto, básicamente, lo que está haciendo es volver a renderizar toda la aplicación.
Estamos viendo, vale, cuando el contador es 0, renderizamos la aplicación.
Esto, obviamente, no escala mucho.
Vamos a hacer algo un poquito más interesante.
Lo que podríamos hacer es volver a renderizar la aplicación cada segundo, ¿no?
Podríamos decir, bueno, pues lo que podemos hacer en lugar de hacer esto, vamos a cambiar.
Vamos a crear aquí una función, le vamos a llamar refresh, que va a ejecutar este react-dom.render.
Así será mucho más fácil que llamemos a refresh cada vez, ¿vale?
Y lo que vamos a hacer es utilizar un método que se llama setInterval, al que se le pasa una función
y como segundo parámetro se le pasa el número de milisegundos que tienen que pasar para que se ejecute la función.
Así que vamos a decirle que esto se ejecute cada segundo, ¿vale?
Así que lo que vamos a hacer, en lugar de utilizar todo esto, vamos a decirle, vale, pues cada segundo que pase
vas a incrementar el contador en uno y vas a volver a renderizar la aplicación.
Así que ahora, si guardamos los cambios, puedes ver que cada segundo que pasa está re-renderizando la aplicación.
Esto estaría haciendo ahora nuestra aplicación como más dinámica, ¿no?
Estamos viendo cómo realmente nuestra aplicación está tomando vida, se está volviendo a renderizar cada vez que está cambiando el valor.
Bueno, esto obviamente no es la forma correcta de hacerlo, pero es la forma que puedes empezar a entender qué es lo que queremos conseguir.
Queremos conseguir que cuando los datos de nuestra aplicación cambian, la aplicación refleje esos cambios al usuario, ¿no?
Porque justamente es lo más interesante.
Por ejemplo, imagina un botón like.
Cuando tú le das like a algo, tú lo que quieres es que eso se refleje visualmente.
Y lo vamos a conseguir así, re-renderizando.
Entonces, esta no es la forma correcta de hacerlo.
No es la forma correcta porque, obviamente, esto lo que está haciendo es renderizar toda la aplicación.
Si fuésemos, voy a guardar los cambios y vamos a ir aquí y voy a poner la consola.
Y en la consola podremos ver aquí, en el root, ¿vale?
Fíjate bien en esto, ¿vale?
Esto es interesante porque esto te va a dar una pista.
Aquí, cuando en las herramientas de desarrollo ves que hace este flasheo, esto significa que se está volviendo a renderizar esa parte.
Esto quiere decir que no solo el número este 21, 22, 23, el contador se está renderizando otra vez, sino fíjate el h1.
¿Ves que también se está volviendo a renderizar?
De hecho, si nuestra aplicación la hiciésemos un poquito más compleja, por ejemplo, le vamos a poner aquí un div, hacemos esto, aquí cerramos el div y lo dejamos por aquí.
Esto tendríamos, si te has fijado, estamos renderizando la primera vez.
Teníamos que llamar por primera vez este refresh.
Esto lo deberíamos llamar por primera vez una vez que lo utilizamos, por ejemplo aquí.
Y ahora sí que veríamos que empieza desde cero, ¿vale?
¿Veis?
Que ahora sí que empieza desde cero.
Contador is not defined.
Bueno, ahora igual me he cargado alguna cosa.
Bueno, lo importante, que podríamos hacerlo así, ¿vale?
Uy, contador is not defined, ¿ahora qué he hecho?
Que me lo he cargado, no he tocado nada ahora.
Bueno, da igual.
Que por eso no sale el cero, ¿eh?
Que es porque no estamos llamando por primera vez, lo estamos llamando cuando ya pasa un segundo, que esa es la razón.
Lo que podríamos hacer también es poner esto aquí.
Y ya lo tendríamos también.
Veríamos primero el cero y luego ya a partir de ahí veníamos uno y tal.
Pero bueno, esto para que sepas de dónde viene el tema.
Vale, pues esta no es la forma correcta, como he dicho.
Y lo importante es entender que React tiene una forma de manejar el estado.
Pero ¿qué es el estado, vale?
¿A qué nos referimos como el estado?
Imagina un interruptor, por ejemplo.
¿Cuándo sabes que está encendido o apagado?
Pues ese sería su estado, ¿no?
Su estado podría ser encendido o apagado.
¿Y cómo se refleja eso, no?
¿Cómo se refleja ese estado a la UI, no?
¿Cómo lo percibe el usuario?
Pues porque verías la luz que está encendida o apagada.
Así que el estado se refleja de alguna forma, ¿no?
En este caso, por ejemplo, el estado podría ser el número, porque el número este que tenemos aquí empieza en cero.
Pero cada vez que lo incrementamos, lo que queremos es que se refleje de alguna forma visualmente para el usuario, ¿vale?
Eso es básicamente el estado.
Y cuando hablamos de este concepto, ya te lo puedes llevar a un montón de sitios.
Porque estamos hablando de un interruptor, pero imagina un botón, ¿no?
Un botón puede tener diferentes estados.
Por ejemplo, un estado de loading.
Y entonces, pues visualmente que tú veas cómo se está cargando.
Un estado de desactivado.
Y entonces que la opacidad está así un poco difuminada.
Puedes tener un montón de estados.
Un estado, por ejemplo, que no está permitido darle al botón.
Cosas así.
Porque a lo mejor no tienes los permisos.
Cosas así, pues eso sería un estado.
Pero poco a poco irás viendo que el estado tiene más cosas que esto, ¿vale?
Esto solo es la superficie.
Así que, la forma correcta de hacer esto sería utilizar un estado en el propio componente.
En lugar de tenerlo fuera y nosotros tener que hacer esto manualmente, que ya te das cuenta que es un coñazo.
Para eso, lo que tenemos que hacer es utilizar lo que se llama un hook, que es un gancho, ¿vale?
Un gancho que nos permite, de alguna forma, ejecutar código en algunos momentos del componente.
Y en el caso del estado, es un gancho que nos va a permitir engancharle un estado a nuestro componente.
Lo vas a ver ahora súper claro.
Y el contador es el típico ejemplo que creo que se entiende mejor que nada.
Para eso, vamos a importar el useState, que este es el primer hook.
Y lo vamos a importar desde React.
Este useState lo tenemos que utilizar dentro del componente.
Por ahora, voy a quitar, voy a simplificar otra vez esto.
Lo voy a dejar como estaba.
Y vamos a poner esto por aquí, aquí, rootElement, y esto lo quitamos, ¿vale?
Volvemos a contar esto.
Y el contador lo vamos a poner contador.
Esto, por ahora, se lo vamos a quitar, ¿vale?
Directamente vamos a hacer la app y ya está.
Ahora no está renderizando nada porque contador inicial no existe.
Vamos a poner el contador dentro.
Y ahora que lo tenemos dentro, vamos a renderizar este contador.
Bueno, ahora siempre va a renderizar cero, ¿vale?
Cero.
Muy bien.
Ahora vamos a añadirle este estado.
¿Por qué?
Porque si yo aquí pongo este setInterval, como hemos hecho antes,
esta función que se ejecuta cada segundo,
y lo que digo es que el contador se incremente en uno,
como puedes ver, esto en realidad no está haciendo nada.
Visualmente no está pasando nada.
Pero aquí en el setInterval, si tú pones un console.log y pones contador,
vamos a ver si esto funciona o si se vuelve loco.
Voy a comentar esto por ahora.
Vale, guardo los cambios.
Y vamos a ver aquí en la consola.
Vale.
Aquí puedes ver en la consola, salen un montón de números porque
seguramente el setInterval se están quedando encendidos.
Como esto es un intervalo y es un evento que pasa cada segundo,
seguramente está recuperando eventos de antes y tal.
Esto si lo refrescamos, lo arreglaríamos.
Pero lo importante es que estás viendo que sí que el contador se está
actualizando, pero en cambio, en cambio,
no estás viendo porque ahí aparece el número.
O sea, no tiene ningún tipo de sentido.
¿Ves?
Ahí ves uno, dos, tres y aquí no se está viendo absolutamente nada.
En este caso, a veces es que se ha quedado como tonto.
Vamos a ver.
Contador es cero y estamos renderizando el contador,
pero ves que visualmente el cero siempre cero.
¿Vale?
Aunque vayamos aquí a la consola y veamos cómo se está incrementando,
esto siempre cero.
Por eso necesitamos utilizar ese gancho que decía, ese hook.
¿Vale?
Vamos a importarlo.
Esto lo tienes que importar.
UseState from React.
¿Y cómo se utiliza el UseState?
Básicamente, lo que tenemos que hacer aquí es esto ahora se
está quedando súper loco porque cuando le pones un setInterval y
este no limpias el intervalo,
esto es una de las formas más fáciles y más rápidas de cargarte un
navegador normalmente.
¿Vale?
Así que voy a intentar refrescar a ver si esto me lo arregla.
Me lo arregla porque a veces ya digo que se queda...
Vale.
Ahora sí.
Con los intervalos se puede quedar muy loco.
Así que venga.
Ahora lo tenemos ahí con el cero.
Perfecto.
Voy a poner esto así porque total no es muy importante lo que se
está viendo, ¿verdad?
Vale.
Entonces, tenemos este UseState.
¿Cómo utilizamos el estado?
Vale.
Pues lo que tenemos que hacer es llamar a este UseState y es un
método que le tenemos que pasar como parámetro cuál es el
valor inicial de este estado.
En este caso, ¿ves aquí que tengo contador cero?
Pues vamos a tener el contador como cero.
Vamos a iniciarlo con el valor cero.
Ahora, este UseState, en realidad, ¿cómo lo utilizamos?
Vale.
Pues aquí tendríamos el estado, ¿no?
Tendríamos el contador.
Ahora guardamos el estado.
Pero el estado se conforma de dos cosas diferentes.
Por un lado, tendríamos una forma de actualizar el estado.
He puesto contador en castellano, pero bueno.
Tendríamos una forma de actualizar el estado, que esto lo
tendríamos en la posición 1.
Y por otro lado, tendríamos el valor del contador.
Y esto ahora lo vais a ver bastante más claro, ¿vale?
El estado lo que hace es devolvernos una lista de dos
posiciones, un array de dos posiciones, donde la primera
posición nos devuelve el valor del estado y la segunda
posición nos devuelve un método que, al ejecutarlo,
podemos actualizar el estado.
Claro, porque el estado tendremos que actualizarlo de alguna
forma.
Ya hemos visto que no podemos actualizarlo fácilmente
haciendo el contador más más o contador lo que sea, ¿ok?
Entonces, una vez que sabemos esto,
con esto podemos utilizar una técnica en JavaScript que se
llama desestructuración, que la veremos justamente ahora en
un momentito.
Así que no te preocupes.
Lo importante, useState devuelve un array de dos posiciones.
La primera posición tenemos el valor y la segunda posición
tenemos una forma de actualizar ese valor.
Así que en contador value vamos a tener el valor, ¿ok?
Si guardo los cambios, vamos a ver que ahora es cero,
no ha cambiado nada.
Pero si aquí lo pongo un 5 y guardo los cambios,
se ha quedado así como, a ver ahí, ahí quieto, ahí quieto.
Vale.
¿Ves?
El estado inicial es el que estamos evaluando aquí.
Si yo aquí pongo 13, veremos 13.
Pero no lo estamos actualizando, ¿no?
No estamos actualizando este valor y, por lo tanto,
no reflejamos ningún cambio.
¿Cómo lo actualizamos?
Llamando al update contador.
Vamos a hacer lo mismo que hemos hecho antes.
Le vamos a llamar un setInterval,
le pasamos una función y le decimos que esta función se va a ejecutar
cada dos segundos, para no volverlo muy loco.
¿Qué va a hacer esta función?
Vamos a actualizar el contador.
Update contador y le tenemos que pasar el nuevo valor del contador.
Así que vamos a decir que el nuevo valor del contador
es el contador que ya tenemos más uno.
Y de esta forma, cada dos segundos,
deberíamos ver cómo se actualiza el estado de nuestro componente
y esos cambios se reflejan.
Esto es súper importante en React.
Esto es mucha de la magia que tiene React.
Porque esto lo que está haciendo es que,
de una forma declarativa,
está reflejando estos cambios en la UI.
Esto que veis que se vuelve loco,
no os preocupéis porque esto es, ya os digo,
que se están guardando diferentes setIntervals en el CodeSandbox.
Si esto lo pasamos por aquí,
aquí funcionaría correctamente
porque no tenemos más de un intervalo que se ha quedado
y que no hemos limpiado y tal, ¿vale?
Y hay que guardar los cambios antes de dar aquí.
Y ahora aquí,
ahora, ¿os acordáis antes que os he dicho,
fijaros cómo podemos ver lo que cambia y lo que deja de cambiar, ¿vale?
Pues veis, aquí podemos ver que está cambiando el 19 automáticamente.
Está actualizando justamente el valor que necesita.
Lo más interesante de esto,
lo más interesante de esto,
es que si aquí ponemos un montón, por ejemplo,
el valor del contador es,
pongo esto, ¿vale?
Fíjate.
Y vamos a poner aquí de magia de React, H2.
Y esta es una de las cosas por las que es tan interesante React.
Si volvemos aquí,
vamos a fijarnos en una cosita aquí.
Vale.
Fíjate que aunque el estado cambia,
lo único que cambia React
es el valor que tienes en el H1.
Así que lo que hace React,
y esto es una de las subcaracterísticas más importantes,
es el tema de este del DOM virtual, que le llaman,
lo que quiere decir esto,
es que React lo que va a hacer es
meter los cambios mínimos necesarios en la UI,
para que veas cómo está,
cómo se refleja el estado, ¿vale?
Por eso la p esta la deja igual,
el H2 lo deja igual y tal, ¿vale?
Así que esto sería un poco el estado.
Ahora, os he dicho que esto de la desestructuración
te facilita esto.
¿Qué quiere decir la desestructuración?
Una vez que tú sabes que tienes un array de dos elementos,
en este caso el useState,
hemos dicho que el contador es un array de dos elementos,
¿cómo se utiliza realmente esto?
Lo que se puede hacer es extraer directamente
estas dos posiciones.
Se utilizan los corchetes,
y lo que se le dice es que en el primero tenemos el contador,
y en el segundo tenemos el update contador.
Fíjate que es exactamente lo mismo que he hecho aquí.
De hecho, esto son equivalentes.
Esto que hemos hecho aquí, useState13,
esto es equivalente.
Lo voy a comentar solo para dejarlo como referencia.
¿Vale? Voy a comentar esto por aquí,
y esto por aquí.
Básicamente, la línea 7 y la línea de la 9 a la 13
son totalmente iguales.
Con la diferencia que aquí le he puesto contador value,
así que debería dejar contador value.
Pero son lo mismo.
Lo que diferencia es cómo estamos extrayendo esa información,
pero es exactamente igual.
Sería exactamente lo mismo.
Una forma de hacer el update del contador
y otro del contador value.
Pero los dos serían exactamente lo mismo.
¿Vale?
Así que, ten en cuenta esto.
Cuando haces el useState,
lo que te está devolviendo aquí, básicamente,
es una forma de añadirle un estado.
Bueno, este...
Normalmente, cuando añades intervalos y cosas así,
se puede volver bastante loco.
¿Vale?
Porque se va quedando ahí,
y si no lo limpias,
pues se puede volver loco.
Pero bueno, esto porque el editor que estamos utilizando.
Pero para ver el ejemplo,
se ve correctamente y es lo importante.
Así que, esta es la forma que no vamos a ver.
Siempre lo vamos a hacer así.
Vamos a extraer las dos posiciones de esta manera.
¿Vale?
Así que, esto sería la forma de añadirle directamente
un estado a nuestro componente.
Un estado que diríamos que es un estado interno.
Para que veas, claro,
¿dónde está la magia de todo esto?
La magia de todo esto es que tú,
cuando actualizas un estado,
cada vez que tú actualizas...
Me has vuelto loco por todo esto.
Cada vez que tú actualizas un estado,
¿qué es lo que está ocurriendo?
Lo que está ocurriendo
es que se vuelve a renderizar el componente.
¿Y qué quiere decir esto?
Lo que quiere decir,
lo que quiere decir que se vuelva a renderizar el componente
es que el cuerpo este del return,
el cuerpo de la función,
se vuelve a ejecutar
y refleja esos cambios en la UI del usuario.
Esto quiere decir que se ha vuelto a renderizar.
Y cada vez que se renderiza,
¿cuándo ocurre esto?
Cada vez que nuestro componente
cambia su estado,
como estamos viendo,
cada vez que está cambiando el contador,
se vuelve a actualizar la UI
y también cada vez que le llegan props nuevas,
¿vale?
Ya sea con un valor igual o diferente.
Cada vez que llegan props nuevas,
también se vuelve a renderizar un componente
y esto lo veremos después.
Pero esto tenlo claro, ¿vale?
Cada vez que se...
¿Cuándo se ha renderizado otra vez nuestro componente?
Cada vez que cambia su estado
y cada vez que le llegan props nuevas.
La forma más sencilla de ver
que el cuerpo de esta función
se está volviendo a renderizar
es si ponemos aquí un console.log
que le vamos a llamar render.
Vamos a guardar los cambios.
Vamos a ir a la URL que tenemos aquí.
Vamos a la consola.
Y aquí en la consola
puedes ver que cada vez que se renderiza
un nuevo número,
está ocurriendo un nuevo render.
El problema aquí es que
están ocurriendo más renders de la cuenta
por otro motivo que ahora os contaré.
¿Por qué?
¿Qué pasa?
Que si esto se está volviendo a ejecutar,
¿qué es lo que está ocurriendo?
¿Y cuál es el problema
que os quería contar con el setInterval?
El problema que está aquí
es que si se vuelve a ejecutar
el cuerpo de la función,
este setInterval
también se vuelve a ejecutar, ¿vale?
Este es un error muy común
que suele ocurrir
y mucha gente le cuesta ver.
Pero el problema es que
este setInterval
cada vez que se renderiza esto
se va a volver a ejecutar.
Entonces nunca, nunca jamás
tienes que utilizar
un setInterval de esta forma.
Nosotros lo hemos utilizado
para ver el ejemplo,
pero ahora verás
que hay un ejemplo mucho mejor
a la hora de ver
cómo funcionan los estados en React
sin necesidad de ver el setInterval.
Así que ni setInterval,
ni setTimeout, ni nada de esto.
En el cuerpo de un componente
no se puede utilizar
ese tipo de manejo de estado
porque cada vez que lo renderices
verás que se vuelve a ejecutar.
Así que esto fuera, ¿vale?
Pero claro, entonces,
¿cómo hacemos esto, no?
¿Cuál sería la forma ideal
de tener este estado
y actualizarlo
de una forma más controlada?
Vale, pues la forma
que lo podríamos hacer
sería utilizando un evento click.
Lo que vamos a hacer aquí
es quitar este H2
que habíamos puesto aquí
y vamos a añadir un botón.
El botón lo que va a hacer
es que cada vez que le demos
va a incrementar el número, ¿vale?
Ahora, obviamente, no funciona, ¿vale?
Veo a gente que dice
setContador.
En realidad, este nombre
es indiferente, ¿vale?
Mucha gente le pone setContador
porque normalmente
esto sería el state.
Esto le llamaríamos state
y setState.
Pero el nombre, en realidad,
es totalmente indiferente.
No hace falta que sea el nombre
que, por ejemplo,
update o set.
Aquí le podéis poner lo que queráis, ¿vale?
No estáis forzados a poner un nombre.
De hecho, es un error bastante común
que mucha gente tiene
de decir, no, esto le tienes que llamar.
En realidad, no le tienes que llamar
de esa forma.
En este caso,
si vosotros preferís
setContador por X motivo,
está bien.
Pero si veis que a vosotros
os ayuda más
ponerle updateContador
porque al final
también lo que se hace
es actualizar,
lo podéis hacer también.
Así que el nombre
no hay ningún problema
más allá de que luego,
veis como este problema,
si os dice que no está definido
es porque tenéis que aseguraros
que el nombre que utilizáis
más adelante
sea exactamente el mismo, ¿vale?
Así que le podéis poner
el nombre que prefiráis.
Si queréis set, set.
Si queréis update, pues update.
Lo mejor, eso sí,
es que siempre utilicéis
primero un verbo, ¿vale?
Set, update, lo que sea.
Pero seguramente
poner contador y contador,
no sé,
siempre utilizad un verbo
al principio
y ya estaría, ¿vale?
Perfecto.
Pues ahora que tenemos esto,
hemos dicho que con el botón
vamos a incrementar
porque ahora puedes ver
que esto no funciona para nada, ¿no?
Para hacer esto
le podemos pasar al botón
una prop especial
que nos va a permitir
manejar el evento del click.
Se llama onClick, ¿vale?
Ahí está.
Entonces,
cuando tenemos el onClick,
esta prop lo que necesita
es pasarle una función.
Esta función
puede ser
lo que nosotros queramos
mientras sea una función, ¿vale?
Y ahora veremos otro ejemplo,
un error también súper básico
que mucha gente le pasa,
sobre todo hay gente
que lleva tiempo con React
y todavía le ocurre.
Así que vamos a crear una función,
en este caso
hemos creado una arrow function,
esto ya lo vimos
en la clase anterior
y esta función
ahora mismo
no hace nada.
Pero podemos, por ejemplo,
poner aquí
que sea un console.log
y le decimos click, ¿vale?
De esta forma,
cada vez voy a guardar
los cambios,
voy a refrescar esto,
que veo que todavía
está ese interval
que está haciendo de las suyas.
Vamos a ver,
ahora parece
que sí,
ahora sí,
parece que sí,
vale.
¿Veis que tenemos aquí
un render?
Vale.
Ahora,
si le doy a incrementar,
va a ejecutar justamente
esta función.
Así que,
clic,
clic,
clic,
ya tenemos una forma
de manejar el clic.
De esta forma ya podemos añadir
un evento
que cada vez que le demos un clic
haga algo.
Ahora que ya sepamos esto,
pues lo que podemos hacer aquí
es exactamente lo mismo,
o sea,
podemos hacer aquí
lo que queramos.
En este caso,
podríamos hacer un set contador
y aquí pasarle el valor
que queramos.
Podemos leer el valor anterior,
que es contador,
y hacer un más uno,
¿ok?
Ahora guardamos los cambios
de esto
y ahora,
si le damos a incrementar,
podemos ver
que cada vez que le doy a incrementar,
se está ejecutando
esta función de aquí,
está actualizando
el contador
a uno más
y una vez que ejecuta
este contador,
el set contador
actualiza el estado,
vuelve a renderizar
el componente.
Esto quiere decir
que se vuelve a ejecutar
toda la función.
Así que estamos viendo
también un console render.
Vamos a ver si puedo...
No.
Iba a intentar limpiar esto.
Si no,
lo miramos aquí
en un momentito
para que lo veáis
mucho más claro.
Aquí voy a poner esto así.
Vamos a hacer esto más grande
y le voy a dar a incrementar.
Cuando le doy a incrementar
van a pasar dos cosas.
Una,
que vamos a ver la UI
que se incrementa
y luego que vamos a ver
otra vez
el mensaje render.
Render,
render,
render.
Este console.log render
es justamente este de aquí.
Con esto
ya sabemos
cómo añadirle
eventos
a nuestros componentes
de React.
En este caso
lo hemos añadido
en un onclick,
pero podríamos hacerlo
en cualquier sitio.
Lo podríamos hacer
con un onclick,
pero lo hemos hecho
en un botón,
podríamos hacerlo
en otro elemento.
Lo más correcto
sería semánticamente
hacerlo en un botón.
Semánticamente
quiere decir
que el botón
su,
su,
su,
digamos,
lo que significa
un botón
es que le vas a hacer click
para darle
alguna funcionalidad.
Entonces,
no es correcto
semánticamente,
por ejemplo,
utilizar un párrafo
para hacerle click
y que cambie algo.
¿Vale?
Semánticamente
lo correcto
es utilizar
en la UI
un botón.
Así que este sea un botón
y sería semánticamente
correcto.
Igual que tiene
un click
en React.js
podemos ver,
a ver,
events,
podemos ver que tienen
un montón de eventos.
¿Vale?
Igual que tenemos
el onclick,
pues tendríamos,
por ejemplo,
ondoubleclick,
a ver,
voy a buscar aquí,
a ver si vemos
la lista de eventos,
pero tienen un montón,
un montón de eventos.
no hay pocos.
No hay pocos.
De hecho,
a ver,
synthetic event
puede ser aquí.
Mira,
aquí tenéis
todos los eventos
soportados.
Uno de ellos
es el onclick,
que es el más típico,
pero podría ser
ondoubleclick,
cuando se hace un drag,
cuando pasas el ratón
por encima,
cuando se va el ratón,
o sea,
puedes hacer un montón
de cosas.
Este es,
digamos,
el más típico.
¿Ok?
Así que,
bueno,
esto sería
el onclick,
el más típico,
pero no te preocupes
que tienes un montón
de eventos,
solo los puedes revisar aquí
y ya los tendrías.
¿Ok?
Perfecto.
Pues ya tenemos aquí
nuestro botón de incrementar.
Ahora,
hay una segunda forma
de actualizar el estado.
Esta sería la forma típica,
¿no?
Cuando haces un set contador
y aquí le pasas
el nuevo valor.
Pero hay otra forma
de actualizar el estado,
utilizando también
el set contador.
Y es que el set contador
no solo puede recibir
el nuevo valor,
sino que también puede recibir
una función
que al ejecutarla
le pases el nuevo valor
que tiene que tener
el state.
Para que te hagas una idea,
voy a dejar este
como comentado.
Puedes utilizar
el set contador
y como parámetro
le puedes pasar
una función
que recibe como parámetro
el valor anterior
que tenía el contador
y lo que tiene que devolver
es el nuevo valor
que tiene que tener
el contador.
La ventaja
que tiene esta forma
es que puedes utilizar
el valor anterior,
¿no?
Teníamos el prev contador,
pues puedes utilizar
el valor anteriores
del prev contador,
lo puedes utilizar
justamente para devolver
el nuevo valor
que tiene.
Entonces,
normalmente con el primero
puedes tener
más que suficiente.
Pero el segundo
es interesante
porque te aseguras
que el prev contador
siempre tiene
el valor anterior.
Esto puede ser interesante
a veces con eventos,
que no puedes controlar
muy bien
si está leyendo
el valor
desde un scope
que tiene un valor
antiguo del contador.
No es tan importante,
pero si alguna vez
te ocurre
que sepas
que esta forma
es bastante
más segura
a la hora
de utilizar
el valor
anterior
del contador
para actualizar
el estado,
¿vale?
Esto es muy típico
cuando tienes
y utilizas
el estado anterior,
¿vale?
Pero en este caso
no tengo ningún problema
porque es al hacer clic
y no va a haber
ningún tipo de problema.
Pero que sepas
que esta es otra forma
que se puede hacer
pasándole una función.
En este caso
vamos a dejar
esta por ahora
y ya está.
Ahora,
otra cosa
que es súper importante
en React
es que tenemos
que podemos crear
lo que se llaman
funciones helper.
Se le puede llamar
de muchas formas
funciones helper,
pueden ser funciones
dentro del componente,
utilidades,
llámale como quieras.
El caso es que
un componente
puede dentro
de su cuerpo
de la función,
aquí dentro,
puede crear
funciones
que te ayuden
a hacer cualquier cosa.
Por ejemplo,
esta función
que tenemos aquí,
esto lo podríamos extraer
y le podríamos decir
creamos handleClick
y esto es una función
que lo que va a hacer
es esto mismo,
setContador,
contador más uno.
Ahora este handleClick
lo que vamos a hacer
en lugar de pasar
el onClick
y aquí crear una función
vamos a utilizar
este handleClick.
Esto es súper importante
porque esto
mucha gente
se equivoca
y la lía
pardísima,
¿ok?
Aquí
al onClick
lo que hay que pasarle
es una función
no la ejecución
de la función,
¿vale?
¿Qué quiere decir esto?
Este handleClick
lo que le estamos pasando
es esto
que estoy seleccionando,
¿ok?
Y entonces
esto
se ejecutará
cuando hagamos click.
Si tú haces esto
la liamos parda.
De hecho,
bueno,
ya está,
ya se está quejando.
¿Por qué?
¿Qué está pasando aquí?
Aquí lo que nos está diciendo
es que hay demasiado
re-renderizado,
re-act está limitando
el número de renderizados
para prevenir
un loop infinito.
O sea,
nos acaba de salvar la vida,
¿vale?
¿Por qué?
Porque aquí
lo que queremos
justamente
no es que esto
se ejecute
cada vez que se renderiza.
Aquí lo que está ocurriendo
es que le estamos diciendo
que como un click
tiene que utilizar
la función
que le vuelve
el handleClick.
O sea,
está ejecutando este método
y está ejecutando esto.
¿Qué pasa?
Que al ejecutar esto
tiene el set contador
que está actualizando el estado.
Entonces se vuelve a renderizar
y como se vuelve a renderizar
pues viene aquí
y ejecuta otra vez
este método
y aquí actualiza el estado
y al actualizar el estado
pues ya estás entendiendo
un poco, ¿no?
Estamos haciendo
un loop infinito
porque este método
no lo deberíamos ejecutar
siempre
sino que solo
se tiene que ejecutar
cuando se hace
un click,
¿vale?
Así que eso
lo tienes que tener
muy en cuenta.
Luego veremos
que sí que puedes
tener aquí funciones
que se ejecuten
pero
si ejecutas una función
tiene que devolver a su vez
otra función
pero eso lo veremos
un poquito
más adelante.
¿Vale?
Pues ya tenemos
el event handler
lo hemos extraído
aquí en una función
bien.
¿Qué más tenemos?
Tenemos el set counter
al final, por ejemplo
ten en cuenta
que podemos tener otro
podríamos tener aquí
otro que será reset
y aquí pues hacer algo
handle click reset
por ejemplo, ¿no?
Y aquí
podemos hacer un handle
click reset
que lo que hace
es poner el contador
a cero
y de esta forma
tenemos el reset
y ahora pues incrementamos
le damos al reset
¿vale?
Podemos tener
más de un botón
que actualice el estado
y al final
con valores totalmente distintos.
Esto sería un ejemplo
pero pueden ser
muchas cosas más.
Otro tema
que es bastante interesante
con este tipo de funciones
es que tú puedes tener
funciones también
que calculen cosas
y esto es un error
muy común también
¿vale?
Muy común.
En este caso
que hay gente que dice
¿pero por qué empiezan 13?
Porque le hemos puesto
el valor inicial a 13
¿vale?
Aquí le podríamos poner cero
por ejemplo
y una vez que lo pongan cero
aquí le estamos poniendo
el valor inicial
en el que tiene que empezar
si ponemos 5
pues sería 5
y este sería el valor inicial
incrementa a partir de ese.
Esperemos que esto
es súper útil
porque el poder poner
un valor inicial
nos ayuda un montón
a poder trabajar
con valores iniciales
y a partir de ahí
ir hacia donde queramos.
Pero en este caso
si queréis
lo ponemos en cero
y ya estaría.
¿Vale?
Entonces os decía
que un error muy común
también
es que la gente
utiliza mucho el estado
¿vale?
Siempre hay que intentar
utilizar el estado
lo mínimo posible.
¿Ok?
Lo mínimo posible.
¿Por qué?
Porque hay muchas veces
que a partir del estado
puedes calcular valores
que necesitas.
En este caso
pongamos que tenemos aquí
vamos a poner aparte
un small
que nos diga
si el número
es par o impar.
Es una tontería
pero un error muy común
sería utilizar
un estado
que te diga
si es par
o es impar.
¿No?
Is even
set is even
¿No?
Y pondríamos un estado
que lo que haga
es calcular y tal.
No.
No sería lo correcto.
Lo más importante
es tener el mínimo
número de estados
y eso lo podrías calcular
fácilmente
con una constante.
Y podrías poner aquí
si is even
si el contador
su módulo
es cero
el su módulo
dividido entre dos
es cero
esto significa
que el resto
cuando dividido entre dos
es cero.
Así que si tú
divides un número
entre dos
y el resto
es cero
es que es par.
Así que con esto
ya directamente
aquí podrías saber
si es así.
Entonces vamos a ver
una cosa aquí.
¿Qué pasa?
Que quiero poner
dos mensajes diferentes.
Quiero decirle
ok
si el número
es par
quiero poner aquí
el número es par
si es impar
quiero decir
no es par.
Esto es lo que se diría
un renderizado condicional
¿No?
Que dependiendo
de una condición
queremos renderizar
una cosa
u otra
Así que lo que vamos a hacer aquí
podemos hacer esto
de diferentes formas
Acuérdate
que para evaluar código
en JSX
ponemos las llaves
Una forma
la más sencilla
la que suele hacer
es utilizar las ternarias
En este caso
podríamos hacer
is even
interrogante
y esto quiere decir
si is even
es cierto
entonces vamos a poner
es par
y dos puntos
significa
else
si no
es impar
y con esto
ya lo que tendríamos aquí
es un pequeño mensaje
vamos a ponerlo
con una P
para que dé el salto
de línea
¿Vale?
Y ya tendríamos esto
¿No?
Así que ahora
guardando los cambios
si le damos a incrementar
puedes ver además
que esto también cambia
no solo es que los valores
que tiene un estado
cambian
sino que
esta constante
cada vez que se renderiza
el componente
se vuelve a calcular
y también refleja
ese cambio
en la UI
¿Vale?
Así que podemos hacer
incrementar
incrementar
incrementar
y vamos viendo
como esto va cambiando
Esto sería un renderizado condicional
Al final esto lo puedes hacer
de mil formas distintas
Esta es la forma más legible
de tenerlo dentro del JSX
pero también por ejemplo
esto lo podría sacar aquí
y directamente pues pondré
mensaje par
extraer esto aquí
y ponerlo aquí
y simplemente el mensaje par
evaluarlo aquí
también podría ser
una forma sencilla
¿Que no entiendes mucho
las ternarias?
Bueno
Otra forma de poder hacer esto
podría ser
poner un let
y poner mensaje par
y aquí podríamos poner
primero vacío
si es even
pues entonces cambiar aquí
esto es más código
pero al final
podrías entenderlo
¿Vale?
Podrías decir
bueno pues esto lo entiendo mejor
Al final yo creo que lo mejor
es que te adecúes
al de las ternarias
porque se entiende mucho mejor
es mucho menos código
pero es para que veas
que esto también funciona
¿Vale?
Que esto también lo puedes hacer
sin ningún tipo de problema
¿Vale?
Esto funcionaría correctamente
Este código al final
es JavaScript
y lo puedes hacer
sin ningún problema
Lo que sí que no puedes hacer
es empezar a utilizar
este if y este else
que estamos utilizando aquí
aquí
no podríamos poner
si aquí pasa algo
entonces
voy a crear este estado
esto sí que no se puede hacer
una de las reglas
que tienen los hooks
es que no pueden ir
entre condicionales
en este caso
estamos hablando del hook
del useState
pero cualquier
cualquier hook
que utilicemos
veremos más adelante
no podemos hacer
este tipo de código
pero bueno
esto es rápidamente
para que te hagas a la idea
un poco de que eso
no se puede hacer
pero aquí
no tengo ningún problema
de hacer esto
así que
voy a tirar para atrás
los cambios
voy a dejar el mensaje
que teníamos por aquí
que lo teníamos
en la evaluación
el que yo recomendaría
uno podría ser este
otro podría ser este
este quizás
es incluso mejor
porque
separamos un poco
el cálculo
de
lo que se renderiza
y se lee
bastante mejor
puede ser interesante
vale
pues ya tendríamos
un poquito
renderizados condicional
el state
hemos visto
que podemos separar
en una función
que podemos tener
constantes
dentro del cuerpo
de una función
hemos visto también
que podemos hacer
el contador
lo podemos resetear
que podemos tener
más de un sitio
donde vamos a actualizar
el contador
por supuesto
igual que tenemos
el incrementar
pues imagínate
como sería el decrementar
o sea
al final sería
exactamente lo mismo
ok
esto nos está quedando
muy grande
este componente
está creciendo mucho
está creciendo bastante
mira
os dejo aquí un ejercicio
que es interesante
que es bastante
que es bastante
curioso
porque
hacer el decrementar
es muy sencillo
con dos métodos
aquí puedes hacer
un handle click
decrementar
igual que el reset
y al final
en lugar del más uno
sería el menos uno
pero a ver si sois capaces
de hacer
alguna forma
que con un solo
handle click
con uno solo
se pueda incrementar
y decrementar
vale
ese es interesante
es un poquito más complicado
pero es interesante
vale
vamos a quitar esto
por aquí
vale
me he caído
alguien dice
te has caído
no
estoy bien
estoy aquí
no me he caído
no sé
yo estoy encima
de la silla todavía
¿lo habéis entendido
todo hasta ahora?
¿todo bien?
¿todo bien?
¿sí?
todo bien
todo entendido
todo correcto
a ver
el ejercicio no
la línea 29-32
es igual a
ternario
conservando la línea 26
ostras
29
ahora 29
ejercicio no
tranquilo
todo bien
sí
genial
perfecto
no sigue el live
todo bien
le puedes pasar parámetros
a handle click
vale
mira
no me quedó claro
cómo acceder al estado anterior
que dijiste que se guarda
a ver
de la misma forma
aquí os lo voy a dejar
¿vale?
voy a comentar este
una forma de acceder
al estado anterior
sería set contador
y aquí se le puede pasar
una función
esta función
recibe como parámetro
el valor anterior
del estado
o sea
tendríamos aquí
prep contador
y lo que tiene que hacer
es devolver
el nuevo valor
que queramos
en este caso
queremos prep contador
más uno
estas tres líneas de aquí
hacen lo mismo
que la línea 18
¿vale?
hace lo mismo
pero se hace
de una forma diferente
luego
este
estos paréntesis
son opcionales
porque cuando solo tienes
un parámetro
una función
puedes eliminar
los paréntesis
luego
cuando tienes
una línea solo
y estás haciendo
un return
puedes eliminar
esto también
las llaves
para hacer
un return
que ya es implícito
y esta sería
la otra forma
como una sola línea
pero esto sería
una función
y esto sería
pasándole directamente
el valor
y como hemos dicho
esto puede ser
un poquito más interesante
a veces
porque te aseguras
que tienes el valor
correcto del contador
anterior
¿vale?
así que es una función
que te permite
cambiar el estado
aquí le estás pasando
directamente
el nuevo valor
y en este caso
le estás pasando
una función
para calcular
el nuevo valor
es un poco diferente
pero son similares
a veces es interesante
utilizar esta
¿por qué?
porque es posible
que estés intentando
leer el contador este
y por temas de eventos
y cosas
ese valor
ya esté antiguo
sea antiguo
sea viejo
y tengas algún tipo
de discrepancia
pero en principio
casi siempre
verás
que puedes utilizar
la línea 18
sin ningún problema
¿vale?
entonces alguien decía
bueno
pero se le puede pasar
una función
un parámetro
al final
el truco que os voy a decir
es que aquí
en el onclick
os he dicho
que aquí
lo que le tenéis que pasar
es una función
no la ejecución
de una función
pero en realidad
sí que podéis
crear funciones
podréis hacer
un create handle click
y aquí pasarle
un parámetro
¿vale?
un param
por ejemplo
que sea
true
si es para incrementar
lo importante
es que este
create handle click
tiene que devolver
una función
que te permita
hacer este contador
por ahí irían los tiros
¿vale?
para dejaros un poquito
una pistita
vale
vamos a dejarlo así
con este
pre-contador
¿vale?
así que
guardamos los cambios
seguimos
seguimos
porque
lo importante
también en React
vais a ver
que es
poder pasarle
el estado
a los componentes
hacia abajo
¿vale?
¿cómo podemos pasar
este estado?
ahora mismo
tenemos aquí
un montón de cosas
pero
al final
lo que vamos a querer
esto lo voy a eliminar
que creo que ya lo tenéis
más que enterado
vamos a crear
otro
otro componente
le vamos a llamar
display
le voy a llamar
counter
¿vale?
que counter
quizá tiene más sentido
y
vamos a ponerle
las props
y además
vamos a aprender
ya lo dijimos
uy
constador
¿qué es esto?
el constador
vale
tenemos las props
así que esto
lo que va a hacer
este counter
lo que va a renderizar
es esto
¿veis que tenemos aquí
contador y tal?
esto lo va a renderizar aquí
ahora del contador
lo sacamos de las props
perfecto
y este
ahora en lugar de utilizar esto
vamos a utilizar
display
¿y cuál es la prop?
contador
vale
pues le llamamos
contador
y aquí
vamos a evaluar
el valor también
de contador
importante no
no confundirnos
entre
el
nombre de la prop
y lo que estamos evaluando
aunque se llamen igual
esto no es mágico
y de hecho ahora veremos
que lo puedo cambiar
he puesto display
pero se llama counter
¿vale?
counter
vale
entonces ya podemos ver aquí
que esto está funcionando bien
tenemos este counter
que le llamamos contador
voy a cambiarle
para que quede más claro
¿vale?
number
y en lugar de contador
entonces tenemos que utilizar
number
es importante que
si aquí le llamamos a ese parámetro
number
a esa prop
aquí entonces tenemos que utilizar
number
porque es lo que le está llegando
vamos a guardar los cambios
y si le damos a incrementar
podemos ver
que también le llega
y se está actualizando otra vez
el counter
con el nuevo valor
esto es lo que os decía antes
cuando se renderiza un componente
cada vez que cambia
su estado interno
o le llegan nuevas props
en este caso
a counter
le están llegando
nuevas props
pero importante
esto es súper importante
¿ok?
cuando hablamos de que le llegan
nuevas props
no quiere decir
que el valor
de esas props
son nuevas
vamos a mirar una cosa
voy a poner aquí
counter
render
para ver
cuando se renderiza
este counter
¿ok?
esto es algo
que también mucha gente
falla
cuando está trabajando
con React
y no tiene claro
que esto funciona así
y es que
si yo ahora
le doy todo el rato
al reset
estamos viendo
realmente
como algo
cambia
no estoy viendo
que cambie
absolutamente
nada
no hay ningún
tipo de cambio
en realidad
podría ocurrir
vamos a poner esto aquí
vamos a hacerlo aquí
a ver si
hemos guardado los cambios
vale
vale
lo que estamos viendo aquí
es que en realidad
lo que está evitando
que se vuelva a renderizar
el contador
no es que le lleguen
props nuevas
¿vale?
o sea
el tema es que le están llegando
las mismas props
es que si tú intentas
guardar el estado
con el mismo valor
no se va a volver
a ejecutar
este set state
lo que está diciendo es
bueno
si ya le vas a hacer
un set contador
a cero todo el rato
pues no tiene sentido
o sea
no va a ocurrir
nada
o sea
no voy a cambiar
no voy a volver
a ejecutarlo
porque el valor
que le estás intentando dar
es exactamente
el mismo
pero claro
si yo por ejemplo
pongamos que siempre
quiero renderizar
el número 2
¿vale?
y entonces
yo por más que le dé
a incrementar
el número 2
es siempre
le está llegando aquí
el número 2
al counter
siempre le está llegando
el número 2
pues fíjate lo que pasa
vamos a guardar los cambios
vamos aquí
voy a darle a incrementar
y fíjate que el counter render
siempre se está renderizando
aunque siempre le llega el 2
siempre le llega el 2
entonces
¿qué es lo que está pasando aquí?
hay que diferenciar
lo que está ocurriendo
por un lado
un componente
se va a volver a ejecutar
siempre que le lleguen
nuevas props
pero que sean nuevas
las props
no quiere decir
que sea un valor
diferente
en este caso
siempre le está llegando
el valor 2
pero como son nuevas
las props
porque se está
renderizando este componente
y este 2
no es el mismo 2
que le estaba llegando antes
pues esto
lo que está haciendo
es que se vuelva a ejecutar
¿ok?
se está volviendo
a renderizar el counter
así que
ya sabemos dos veces
cómo se renderiza
cada vez que cambia
el estado interno
y cada vez que le llegan
nuevas props
hay formas de optimizar esto
para evitar que se vuelva
a renderizar un componente
y tal
pero esto lo tienes que tener
clarísimo
¿ok?
como he dicho antes
lo importante
vamos a poner otra vez
aquí el contador
importante
¿por qué entonces
cuando doy reset
si siempre le está llegando
el 0
no se vuelve a renderizar?
en realidad
porque solo el set state
la actualización del estado
solo está ocurriendo
una vez
porque estamos intentando
siempre ponerlo a 0
y React dice
a ver si estaba en 0
y ahora es 0
no voy a hacer
una actualización del estado
y no voy a volver
a renderizar todo el componente
no tiene sentido
así que eso sería el tema
¿vale?
bueno pues hasta aquí
ya tenemos claro
todo el tema del estado
ya estamos pasando
el estado
a un componente
en este caso
el estado
que es el contador
se lo estamos pasando
a counter
y entonces se va actualizando
también esta prop
importante que vimos
al final de la otra clase
normalmente
no se utilizan así las props
¿por qué?
porque es bastante incómodo
tener que escribir
props.number
lo que se hace
es igual que hemos hecho aquí
la desestructuración del array
también se puede hacer lo mismo
con los objetos
las props son un objeto
y lo que podemos hacer aquí
es utilizar las llaves
para decir que quiero extraer
la prop.number
así que directamente
puedes hacer esto
y ya tendrías aquí el número
¿vale?
importante porque esto
lo vamos a ver un montón de veces
en las clases
lo vamos a hacer directamente
y no vamos a pararnos
a revisarlo
¿vale?
así que esto
es importante tenerlo claro
¿vale?
ahora que ya tendríamos
el tema
os he dejado el tema
este de hacer
el más
el cero
el reset
y todo esto
hemos visto lo que causaría
un renderizado
vamos a ver
lo que sería
un estado
un poquito más complejo
y como esto
lo puede
lo puede liar un poco
pero antes
aparte de ver
voy a leeros
por si tenéis dudas
para repasar alguna cosita
y a ver
a ver qué me contáis
a ver qué me contáis
y muchas gracias
a
josema17mlg
a
fraction
y ps4
sernofel
a
bosch19
a jesus9221
por suscribiros al canal
con prime
que me ayuda un montón
y además con prime
pues si tenéis prime
es totalmente gratis
y a mí
pues me ayudáis
con una pequeña aportación
así que genial
¿se puede hacer el set
state dentro del onclick?
pues justamente
lo hemos hecho antes
así que sí
y manol
se puede hacer
sin ningún tipo de problema
¿usas las prop types?
a ver
no vamos
no creo que tengamos prop types
pero de vez en cuando
sí que las uso
depende del proyecto
duda
a través de las props
pasamos información
a los hijos
dice marcos
¿hay alguna forma
de pasar la información
a los padres
aparte de crear un evento
que el padre
se quede escuchando?
sí
marcos
y de hecho
seguro que lo vemos
en el curso
la forma
es que tú le puedes pasar
una función
le puedes pasar
desde el padre
le puedes pasar al hijo
una función
que al ejecutarla
cambie el estado
del padre
esa sería la forma
más típica
¿vale?
me encanta ver fundamentos
que no veo en otros lugares
dice Dana Vallardi
lo que mencionaste
de cuando renderiza
cuando se le pasan
nuevas props
y eso
sí
esto es una cosa
que se menciona muy poco
y es súper importante
en React
y de hecho
existen un montón
de problemas
de que la gente
no entiende
que cada vez
que te llegan
unas nuevas props
aunque tengan el valor anterior
se vuelva a renderizar
ese componente
y hay gente que no sabe
dónde sale ese re-renderizado
así que importante
¿puedes explicar rápido
lo del counter?
hostia Manuel
especifica más
porque el counter
es todo el ejercicio
que hemos hecho
cuando se cambia
el estado de un componente
¿se renderiza
todo el componente entero
o solo lo que se cambió
dentro del componente?
esa es muy buena pregunta
¿vale?
stars970
vale
esto es importante
cuando se cambia
el estado
de un componente
por ejemplo
de este componente
hemos cambiado
su estado
el contador
se renderiza
todo el componente
todo lo que vemos aquí
¿vale?
pero hay que diferenciar
entre renderizado
por cómo entendemos
en React
lo que es un renderizado
y lo que sería
renderizar en el DOM
¿vale?
¿por qué?
porque el renderizado
en React
sí que ocurre
por ejemplo
veamos este counter
de aquí
que antes hemos dicho
que siempre
siempre sería dos
¿no?
imaginemos esto
que he dicho
vale pues siempre
vamos a hacer lo que sea
pero esto siempre es dos
claro
si yo pongo aquí
este console.log
del counter render
si miramos aquí
vamos a ver
que sí que
sí que se ejecuta
¿no?
o sea yo le voy dando
a incrementar
tenemos counter render
counter render
pero los elementos
ah bueno
ahora
ahora se está actualizando
ahora
vale
vale
cada vez que le doy
counter render
counter render
pero aquí
lo que podemos ver
si yo miro el dos
es que
no se está renderizando
en el DOM
entonces tenemos que entender
dos cosas diferentes
uno
renderizado de React
sí que está ocurriendo
porque aquí en la consola
podemos ver el counter render
pero lo que está pasando
es que React
está diciendo
vale
he renderizado esto
en la memoria
pero veo que tú
en la página web
tienes ya el dos
pues no voy a volver
a pintarlo
pero entonces
hay que diferenciar
entre el renderizado de React
que sí que ocurre
y renderizado en el DOM
que como puedes ver
no está ocurriendo
¿vale?
porque no cambia
solo renderiza lo que cambia
esta es una de las magias
que tiene React
y que por eso
pues es bastante óptimo
¿qué te apoya más?
¿un sub aquí
o Patreon?
me apoya bastante más
Patreon
bastante más
porque Twitch
se queda en la mitad
de los subs
en Twitch
y de hecho
en Prime
creo que es un dólar
un dólar y medio
una cosa así
o dos dólares máximo
en Patreon
es bastante
bastante más
Egló
gracias por preguntar
la variable counter
esta variable counter
que tenemos aquí
esto es un componente
que al final
está recibiendo por props
el número
y el número
pues nada
es lo que le estamos pasando
por aquí
que en este caso
lo interesante es ver
como pasándole
un estado
como prop
a un componente
hace que se vuelva
a renderizar
porque este es el componente
counter
es lo que tenemos aquí
¿vale?
vale
perfecto
pues ahora que
tenemos esto
vamos a
a seguir
rápidamente
para ver los estados
más complejos
¿vale?
a ver si terminamos así
toda esta parte
y en la siguiente
pues ya veremos
fetching de datos
y cosas así
así que
lo que dice por aquí
en este full stack
lo que nos está diciendo
voy a copiármelo
directamente
para ir un poco más rápido
y os lo explico
voy a poner esto
por si
voy a poner este
old
voy a poner
old index
y ahora os comento
el nuevo
que estamos
haciendo
que sería esto
vale
esto por aquí
voy a copiar esto
dejamos aquí
wow
he copiado
he copiado de más
he copiado de menos
que diga
de menos he copiado
bueno
lo arreglamos un momento
esto aquí
tenemos aquí
esto aquí
el use state
importante
lo tenemos que traer
de react
¿vale?
y el
react-dom
de react-dom
y
voy a copiar también
esto
para recuperar
donde tenemos que renderizar
nuestra aplicación
vale
entonces
esto lo que tenemos aquí
básicamente
es dos botones
que nos van a render
nos va a actualizar
el contador de la izquierda
o el contador de la derecha
le damos aquí izquierda
tenemos aquí derecha
voy a ver si puedo
añadirle
al body
un poquito de margen
para que no quede tan pegado
el padding
padding
que queda ahí pegadísimo
que
el pobre
y vamos a importar esto
estos estilos
styles
a ver si con esto lo arreglamos
vale
un poquito mejor
vale
entonces si le damos al de la izquierda
pues se actualiza al de la izquierda
si le damos al de la derecha
se actualiza al de la derecha
esto lo podemos ver aquí
ahora tenemos dos estados
tenemos const
left
set left
esto sería el contador de la izquierda
donde empezamos con el contador a cero
podríamos empezarlo a 10
y este por ejemplo
podríamos empezar a 20
si quisiéramos
vale
esto
al final
voy a cerrar por aquí
lo mismo de antes
y aquí pues teníamos el valor de la izquierda
el de la derecha
y ya está
ahora lo interesante de esto
es que
claro
cómo podríamos hacer esto
en un solo estado
esto es una buena práctica
lo que está haciendo esto
y esto es una recomendación que os doy
es que
intentéis separar
los estados
o sea
no intentéis tener un solo estado
pero lo vamos a ver
porque es importante
entender también
el poder tener un solo estado
cómo se actualizaría
y todo esto
vale
pero esto es una buena práctica
porque está haciendo el estado
bastante atómico
vale
es mejor
tener el estado separado
en partes pequeñas
e intendibles
ok
no intentes tener
todo el estado
de tu componente
en un solo sitio
pero lo vamos a ver
porque es un buen ejercicio
a la hora de entender
cómo puede funcionar el estado
ok
entonces
aquí tenemos dos estados
cómo podríamos tener
un solo estado
vale
cómo podríamos hacer esto
básicamente
que fuese
clics
vamos a llamarle clics
o counters
podría ser counters
y set counters
¿no?
y cómo podríamos tener
un solo estado
en lugar de tener
dos estados
para eso
lo que podríamos hacer
es tener
un estado
que fuese
un objeto
donde podríamos tener
el left
que empezase en cero
y el right
que empezase en cero
así que voy a
comentar este estado
y vamos a ver
cómo podríamos
empezar esto
ahora empieza a ser
un poco más tricky
¿no?
porque ahora que tenemos
este counters
sí que es fácil
aquí en counters
poner counters left
y counters right
esto vimos
en la primera clase
¿no?
cómo podríamos acceder
a las propiedades
de un objeto
así que esto
bien
pero aquí ya tenemos
el set left
que decía antes
para actualizar
el estado en concreto
pues ahora
cómo hacemos esto
con el set counters
lo que podríamos hacer
otra vez
es crear una constante
handle click
left
y lo que vamos a hacer aquí
justamente es
ir bastante a saco
de como lo habíamos hecho antes
vamos a llamar
al set counters
y le vamos a decir
que el nuevo valor
sería
cuando le da el click
left
sería left
sería counters
punto left
más uno
pero ¿qué pasa con el right?
que el right
tendría que seguir
teniendo el mismo valor
¿vale?
tendría que tener justamente
el mismo valor
así que counters
punto right
porque ese no es
el que queremos cambiar
esto sería con el handle
click left
cambiamos esto
y este
el handle click left
al menos
ahora sí
debería estar funcionando bien
ahora el de la derecha
no funciona
pues lo vamos a cambiar también
vamos a hacer handle right
y ahora haríamos esto
¿no?
básicamente
cambiaríamos esto
¿por qué es interesante
este ejercicio?
porque aquí
lo que puedes ver
es que en un estado
puedes guardar
cualquier cosa
un objeto
y puedes trabajar
de esta forma
con un objeto
ya os digo
que la mejor idea
sería la otra
¿vale?
sería tener esto
más atomizado
porque ya has visto antes
que era más sencillo
de entender
pero es un buen ejercicio
para ver cómo puedes manejar
objetos en un estado
porque hay veces
que sí tiene sentido
tener un objeto
en un estado
así que vamos a guardar esto
y ahora vemos
esto
debería funcionar bien
la izquierda
el de la derecha
¿vale?
pero
hay otra cosa
aquí
hay una cosa
que me gustaría comentarte
ten en cuenta
que no hace falta
que al set counters
al nuevo valor
se lo tengas que pasar aquí
a saco
¿vale?
puedes crearte una variable
por ejemplo
llamarle
new counters state
y crearla aquí
y esto
pasárselo como parámetro
¿vale?
o podemos utilizar
lo que hemos visto antes
que era lo de crear
justamente
una función
que recibía
el valor anterior
del estado
¿no?
y eso lo hemos visto antes
y funcionaba correctamente
entonces
esto funcionaría
y estaría bien
pero imagínate
que vamos a poner
a otro
vamos a poner
otra cosita
imagínate
que además de esto
pues pudiéramos tener
aquí un contador
¿vale?
vamos a poner aquí
un contador
que nos va a decir
cuántas veces
hemos hecho clic
porque puede ser
a la derecha
o a la izquierda
así que vamos a poner
esto aquí
y vamos a poner
counters punto
vamos a poner clics
vamos a llamarle
clics
a esto
clics
clics
vale
esto empieza a complicarse
un poco
ya empezamos a tener
aquí clics
y ahora
también el clics
tendríamos más uno
porque queremos
entrar también
todos los clics
clics counters
clics
más uno
¿vale?
esto lo vamos a poner
una P
vamos a poner
clics totales
ya empezaríamos
a tener
lo que sería
ahora
venga
¿vale?
ahora sí que podemos ver
que tenemos como
los tres contadores
¿no?
un problema
que vemos aquí
ya
es que imagínate
que este estado
empieza a ir creciendo
y creciendo
y creciendo
y es un poco
difícil
de mantener
¿no?
porque ya no sabes
exactamente
qué es lo que puedes
tener en el estado
y esto que estás
haciendo aquí
es bastante peligroso
porque lo que está
ocurriendo
es que este
este
el contador
de la derecha
lo estás actualizando
aquí
sin tener muy claro
que eso es lo que
deba ir
imagínate que ahora
de repente
tienes algo más
y no lo sabes
y cuando tú
haces esto
cuando haces este
right clicks
no sé qué
por ejemplo
vamos a poner aquí
un mensaje
que sea
counter
si yo tengo
este mensaje
counter
y lo vemos aquí
debajo también
y vamos a poner
counters
punto
mensaje
vamos a ver aquí
que debería aparecer
bueno
vamos a ver
mensaje
en el estado
¿vale?
tenemos ahora
el mensaje
en el estado
lo tenemos aquí
pero fíjate
lo que ocurre
esto es súper importante
si yo le doy
al botón
right
¿vale?
le voy a dar
ostras
¿qué ha pasado?
¿qué ha pasado?
¿dónde está el mensaje?
nos lo hemos cargado
nos hemos cargado
un mensaje
fíjate
yo voy a refrescar
en el estado inicial
tengo este mensaje aquí
pero cuando yo le dé
clic a algo
lo que va a ocurrir
es que me lo voy a cargar
pam
ha desaparecido
¿por qué?
porque lo que está ocurriendo
cuando tienes un estado
complejo
lo que está ocurriendo aquí
es que le estamos diciendo
que el nuevo estado
es este
se lo estamos pasando aquí
y está machacando
el objeto que teníamos aquí
y que conservaba
este mensaje
entonces
una buena práctica
cuando tienes este tipo
de estados complejos
y para evitar
este tipo de problemas
una de las cosas
que se utiliza
es el spread operator
¿qué es el spread operator?
el spread operator
básicamente lo que es
es una forma
de indicarle
a javascript
que lo que quieres es
recuperar todos
los
todas las propiedades
de un objeto
¿vale?
para guardarlas
en otro objeto
y el resto
las vas a querer
machacar
esa podría ser una
entonces
aquí por ejemplo
en el handle click
ahora mismo
el error este
de que el mensaje desaparece
lo tenemos en la izquierda
y en la derecha
vamos a arreglarlo
primero a la izquierda
lo que haríamos aquí
es decirle
vale
primero
lo que quiero aquí
es justamente
lo que ya tenemos
en counters
así que
nos va a guardar
todas las propiedades
que ya tenemos
en counters
se va a traer
left 0
right 0
click 0
mensaje
y todo este mensaje
¿vale?
y luego
lo que va a pasar aquí
es que
este right
ya no tiene sentido
porque justamente
lo vamos a recuperar
pero el left
lo que va a pasar
es que lo va a machacar
con el valor
que estamos poniendo aquí
y el clicks
lo va a machacar también
con el valor
que estamos poniendo aquí
de esta forma
en counters
se van a guardar
las propiedades
que tenía el objeto
previamente
y se van a sobreescribir
las que le estamos diciendo aquí
así que si ahora le doy a left
puedes ver
que el mensaje
se está manteniendo
pero si le doy a right
que no hemos arreglado esto
desaparece
porque en set counters
estamos machacando
todo el objeto
así que aquí
deberíamos hacer lo mismo
le decimos
queremos
todas las propiedades
que teníamos en counters
left
ya la estamos
como la queremos dejar igual
esta ya la tenemos
el mensaje
se queda igual
pero right
y clicks
sí que lo queremos
sobreescribir
así que en este caso
ya lo tendrías aquí
lo que está haciendo aquí
el counters
ya te digo
que estos tres puntos
así
estos tres puntos
es lo que se llama
un spread operator
y spread es porque
es esparcir
es que queremos
que el objeto
todas las propiedades
del objeto
se esparzan
dentro de este objeto
que tenemos aquí
¿vale?
básicamente
lo que
esto
sería como hacer
esto
counters punto mensaje
write punto
counters punto write
y luego
clicks punto
counters punto clicks
esto sería así
solo que
como estos dos
los estamos
sobreescribiendo
diría
ah vale
el write
no quieres este
sino que quieres este
y el clicks
no quieres este
quieres el que tienes aquí
vale
pues sería esto
sería como hacer esto
solo que es de forma dinámica
más que
menos código
y lo estamos haciendo
de una forma
que así
si el día de mañana
se añade al lado
pues ya lo tendríamos solucionado
¿vale?
así que
esto es un buen ejercicio
justamente
a ver cómo he puesto esto
para
saber cómo
funciona
este operador
que es súper interesante
y se utiliza mucho en react
y además
cómo podemos gestionar
estos estados complejos
que pueden ser bastante
problemáticos
además esto
hace una copia
de estas propiedades
del objeto
de esta forma
no ocurre la mutación
que si te acuerdas
lo hablamos
en la primera clase
la primera clase
que pueden mirar
en youtube
midu.tv
ok
pues esto
serían estados complejos
¿vale?
que es bastante interesante
y de esta forma
puedes ver
cómo lo puedes utilizar
una cosa
que es bastante importante
que no he comentado
y que tienes que tener clarísimo
pero es que no lo he comentado
porque es que
ya
se da bastante
como por hecho
pero
es súper importante
cuando quieres actualizar
un estado
al principio viste
lo del counter
¿no?
que era counter
y lo hacíamos así
con el más más
y todo esto
cuando estamos trabajando
con estados
y con props
de las props
lo comentamos
las props
son inmutables
¿vale?
y el estado
tiene que ser inmutable
también
no puedes actualizar
un estado
tú mismo
con javascript
por ejemplo
aquí
no deberías
nunca
hacer esto
counters.left
más más
¿vale?
esto no lo
no lo deberías hacer
esto no lo deberías hacer
siempre que quieras
actualizar el estado
lo tienes que hacer
de esta forma
¿vale?
o de esta forma
siempre lo tienes que hacer así
nunca tienes que mutar
el objeto del estado
porque esto puede hacer
que React se vuelva
bastante loco
o que no sepa
enseñar esos cambios
en la UI
o cosas así
así que es importante
que mantengas tu estado
siempre siempre
inmutable
totalmente inmutable
que como lo actualices
lo actualices
así
como estamos haciendo
aquí de esta forma
¿vale?
porque si no
si tú lo mutas
directamente
no le puedes decir
a React
cómo tiene que funcionar
correctamente
¿vale?
no le estás diciendo
cuándo tiene que cambiar
el estado
a lo mejor
el valor
ya no entiende
cuál era el valor
que tenía que cambiar
por eso
necesita que sea inmutable
¿vale?
entonces
ahora
visto
una cosa
una cosa importante
los arrays
igual que hemos visto
los objetos
¿ok?
igual que hemos visto
esto con los objetos
también puedes tener
arrays
¿ok?
podríamos hacer
por ejemplo
podríamos cambiar
vamos a poner
clicks
set clicks
y vamos a poner
un use state
y vamos a poner
esto
además
vamos a ver
cómo nos vamos a poder
cargar este clicks
por lo que he dicho antes
esto también es súper importante
y ahora
ahora entenderás por qué
tenemos clicks
y set clicks
¿esto qué va a hacer?
que cuando le demos
al click de la izquierda
aparte de actualizar
el set counters
lo que vamos a hacer
es un
vamos a guardar
en set clicks
y vamos a utilizar
la función
ya que le hemos explicado
la clase ¿no?
hemos puesto
el prep clicks
y lo que vamos a hacer
es actualizar
clicks
pero esto es un array
esto es un array
si te acuerdas
en la primera clase
que dijimos
¿cómo se mutaban
los arrays?
con el push
si quiero añadir
un nuevo elemento
al array
podría añadirlo
utilizando el push
pero que acabo de decir
que no queremos mutar
el array
entonces ¿cómo lo hacemos?
pues lo que tenemos
que devolver
es un nuevo array
podríamos hacerlo
de diferentes maneras
una sería
a prep clicks
esto lo vimos
en la primera clase
concatenar
¿vale?
podríamos concatenar
ahora quiero concatenar
por ejemplo
pues quiero poner strings
cuando es la izquierda
poner la L
de left
y cuando es la derecha
poner una R
de right
¿vale?
esto podría ser una
hacer un concat
otra forma
como hemos visto
el spread operator
que te puede ayudar
que es bastante importante
sería utilizar
la misma técnica
que hemos utilizado antes
podríamos decirle
vale
me haces un spread
de todos los elementos
que tengas en el prep clicks
y además
me añades
el último elemento
vamos a poner
un string
que sea left
esta sería otra forma
que es bastante interesante
y como hemos visto
esto se puede eliminar
esto también lo podríamos eliminar
este return
lo podríamos poner aquí
el tema es que con los arrays
a veces esto puede ser problemático
lo podrías poner
por ejemplo
con paréntesis
pero vamos a probar
si esto
se lo traga
así
y pondríamos
dos paréntesis
así que
recuperamos
los clics anteriores
hacemos un spread
de todos los que tendríamos
que ahora mismo
es ninguno
pero no sabes
cuáles son los que puedes tener
y añadimos la L
lo mismo
podríamos hacer aquí
con el set clicks
solo que esto
sería
con la derecha
¿vale?
y ahora
como podemos
ver todos los clics
que hemos hecho
bueno
vamos a quitar
por ejemplo
este counters
y lo que vamos a hacer aquí
es evaluar
justamente
vamos a evaluar
así directamente
a ver qué pasa
vamos a evaluarlo así
porque quiero ver
lo que tiene el array
voy a guardar los cambios
y le voy a ir dando
¿vale?
right
left
right
left
fíjate que aquí ya aparece
¿no?
rl
si le doy rrr
lllll
rrr
¿vale?
entonces
esto ya está funcionando
ya estamos viendo
el valor que está teniendo
el array
pero no estamos controlando
cómo se está mostrando
esta información
¿vale?
esto es porque
cuando tú intentas
evaluar
un array
y justamente
lo renderiza
React
lo que va a ocurrir aquí
es que te lo va a transformar
en un string
pero te lo está transformando
en un string
sin ningún tipo de separación
ni nada
si quieres
lo que podrías hacer
es un join
ponerle una coma
y un espacio
y de esta forma
podría darle a la izquierda
derecha
y ya podríamos ir viendo
¿no?
cómo vamos guardando esto
ahora
súper importante
¿qué hemos dicho antes?
hemos dicho
que siempre que puedas
no tengas en el estado
algo que puedas calcular
siempre que puedas
no tengas dos estados
para lo mismo
entonces
te dejo aquí esta pregunta
¿qué estado
podríamos eliminar
de nuestro componente
ahora que tenemos esto?
¿qué podríamos evitar
tener un estado
y calcularlo?
y de esta forma
simplificar nuestro componente
y no generar estado
de más
a ver
cuéntame
que os leo
os leo
mientras bebo
y me podéis ir comentando
un poquito
vale
veo que mucha gente
conocía el spread
muy bien
veo que
ya tenéis clarísimo
qué es lo que podría cambiar
muy bien
muchísimas gracias
serglaflo
que se ha suscrito
durante un mes
en el nivel 1
muchísimas gracias
por tu apoyo
y también
ignacio diaz fica
muchísimas gracias
por suscribirte
con prime
muchas gracias
a los dos
vale
veo que
ahí está
mucha gente lo dice
clics totales
clics totales
clics totales
muy bien
muy muy muy
muy muy bien
el tema
es que podemos ver
que ahora aquí
teníamos un estado
de clics totales
vale
clics totales
clics totales
vale
pues clics totales
lo quitamos
pam pam pam
¿por qué?
porque los clics totales
los podemos saber
gracias
al final
en lugar de actualizar
los clics totales
constantemente
ya tenemos
en los clics
ya sabemos
cuáles son los clics totales
lo único que tenemos que hacer
es leer
el estado clics
y utilizando
la propiedad
length
ya sabemos
cuántos clics
se han hecho
en nuestra aplicación
sin necesidad
de tener otro estado
vale
esto es súper importante
esto hay que grabárselo
mucha gente falla con esto
he visto muchos cursos
incluso que esto
no lo hacen bien
y es el hecho
de que tú en React
digamos
los estados
van caros
vale
o sea hay que evitar
utilizar estados
hay que evitarlo
siempre que sea posible
obviamente
cuando necesitas un estado
lo haces y ya está
pero
ten en cuenta
que cuantos menos estados
tengas
mejor
tu aplicación va a ser
más sencilla
y en React
es súper importante
tener
digamos
la fuente de la verdad
es lo que se dice
tener
el cálculo
en el mínimo número
posible de sitios
y si puede ser uno
es lo ideal
por ejemplo
imagínate que tuviéramos
el contador
en tres estados diferentes
de cuál te fías
en este caso
nos pasa lo mismo
de cuál nos deberíamos
fiar
de los clics totales
del de clics
o el que tenemos en counters
en este caso
si puede ser
lo que deberíamos hacer
es justamente esto
incluso podríamos ir
más allá
y solo contar
el left
y el right
y ya tendríamos
también
el estado total
o sea
al final
lo que tenemos que hacer
es pensar en esto
cómo evitar estados
en lugar de
añadir estados
para hacer cálculos
el que hemos hecho
antes de totales
nunca lo hemos necesitado
porque sumando
left y right
ya lo teníamos
pero es que ahora
además es incluso
más fácil
porque teníamos
clics
y set clics
que tiene la información
de left y right
y podríamos tener
el length
así que
ten en cuenta
siempre esto
evita crear estados
que realmente
no necesitas
eso es
uno de los
uno de los grandes
learnings que tienes
que tener
clarísimos
en este caso
además
pues lo que podríamos
seguir trabajando
en este caso
sería utilizar
el tema
del conditional rendering
podríamos decir
por ejemplo
podríamos incluso
el conditional rendering
vamos a verlo
con un componente
podríamos tener
aquí un componente
que sería
warning
not used
y lo que vamos a hacer aquí
es poner un retool
que diga
todavía no
se ha usado
el componente
el contador
vamos a poner
el contador
y vamos a tener otro
que te diga
por ejemplo
vamos a ver
list of clicks
y a este le vamos a pasar
los clicks
utilizando
como hemos visto
la desestructuración
y esto
lo que va a hacer
es justamente
renderizar este clicks
join
porque así
de esta forma
lo que vamos a poder hacer
vamos a poner esto así
aquí el día de mañana
podríamos cambiar esto
y hacerlo de otra forma
vale
pues tenemos
el warning
not used
y el list of clicks
lo que podríamos hacer
en el renderizado condicional
que esto también es súper útil
es renderizar un componente
dependiendo
de un valor
que tengamos disponible
en el renderizado
en este caso
ponemos clicks.length
que sea igual a cero
podríamos decir
si es igual a cero
avisa
que no se ha utilizado todavía
y si sí que tenemos
lo que podríamos hacer
es listar estos clicks
y de esta forma
vamos a utilizar
este componente
le pasamos los clicks
los clicks
y lo pondríamos así
terminaríamos esta evaluación aquí
y de esta forma
vamos a guardar
esto lo he hecho
un poco bestia
para que se vea
vale
no es que
lo tengamos que hacer así
pero esto es para que se vea
en este caso
tenemos un renderizado condicional
que lo que hace
justamente es
vale
clicks.length es cero
pues si es cero
renderízame este componente
si no es cero
renderízame este otro
y así tenemos
un renderizado condicional
ya puedes ver
que de esta forma
se cambia
automáticamente
vale
así está haciendo
un renderizado condicional
nuestra aplicación
que siempre es bastante
bastante útil
esto se usa
un montón
un montón
y tiene
millones de
de usos
ahora
en este curso
vamos a ver
todo el tema de
como has podido ver
en este curso
vamos a ver
React con funciones
vale
estamos viendo hooks
estamos viendo
por ejemplo
pues como
actualizar el estado
hay una versión
anterior de React
donde se veían clases
y la actualización
del estado
se hacía de una forma
diferente
la versión anterior
de React
no la vamos a ver
y mi recomendación
porque muchas veces
me lo preguntáis
es pero debería
por ejemplo
debería aprender
clases de React
mi recomendación
es que no
mi recomendación
es que a no ser
que lo necesitéis
en vuestro trabajo
porque se utilice
por qué motivo
porque tenéis
un código base
antiguo
o lo que sea
mi recomendación
es que vayáis
a aprender
directamente
las funciones
si hoy en día
tuviese que crear
un componente
de React
desde cero
haría una función
y utilizaría
hooks
cuál es
el único motivo
por el que utilizaría
clases
uno
porque ya existen
las clases
ese componente
ya es una clase
o dos
porque
tengo
por lo que sea
la necesidad
de utilizar
una versión
muy antigua
de React
que todavía
no soportaba
clases
pero esos son
los dos únicos
motivos
por los que
a día de hoy
utilizaría clases
con React
por eso
no lo vamos a ver
en este bootcamp
pero si crees
que es interesante
pues podrías
buscar información
sobre esto
en la documentación
oficial de React
te lo explican
pero ya te digo
que yo
no lo recomiendo
¿ok?
vale
dicho esto
una forma
interesante
de
debugar
nuestra
aplicación
de React
sería por ejemplo
bueno
por supuesto
ya hemos visto
que para ver
qué props
le llega
pues podríamos
hacer el console log
de las props
aquí
y cada vez
que le lleguen props
lo veríamos
en la consola
es interesante
que una vez
que tenemos aquí
clics
puedas utilizar
este truquito
de utilizar
las llaves
porque de esta forma
es súper fácil
a qué se está refiriendo
¿vale?
voy a refrescar
y das
aquí tienes clics
y dices array
y es mucho más fácil
de debugar
pero también
podrías poner
por supuesto
un debugger
directamente
¿vale?
el debugger
lo que te va a hacer
es parar la ejecución
justo cuando llegue
a esa línea
esto es un poquito
más avanzado
normalmente
podríamos
refrescar
¿vale?
ahora no sé
por qué no me
bueno no sé
si me va a dejar
hacer un debugger
aquí en este
pause and exceptions
no sé si es que
code sandbox
me lo puede
a lo mejor
me lo
ah no
no es que me lo ignore
es que todavía no ha salido
¿no?
si le doy a write
ahora
vale ya decía yo
sí sí
vale
¿veis?
ha parado la ejecución
justo ahí
y ahora lo que me permite
es ver
cuáles son los valores
que tiene cada cosa
claro es que
no he caído
que se había puesto
a list of clicks
y todavía no se estaba
renderizando
cuando se ha renderizado
este componente
ha encontrado esta línea
y aquí en sources
puedo ver
paso a paso
lo que está ocurriendo
de hecho una vez que ha parado
podría ir
cada línea
cada línea
ver lo que está ocurriendo
en cada línea
y de esta forma
podría seguir un poco
lo que está haciendo
la ejecución
ten cuidado
de no entrar ya
en los internos de RIA
que seguramente
aquí ya te vas a liar
pero dentro de tu componente
puede ser interesante
¿vale?
que cada vez que se renderice
pues puedas ver
ah
aquí ha llegado
clicks
y ha llegado con estos valores
esto es interesante
porque hay veces
que no sabemos
que está pasando
en nuestra aplicación
¿vale?
y esto nos puede ayudar
a saber
que ha ocurrido
realmente
¿sabes?
¿qué es lo que ha llegado
aquí para que se pinte eso?
¿vale?
pues le pones un debugger
y aquí puedes ver
ese valor
justamente
aparte del debugger
y el console log
que ya hemos visto
los dos
¿qué más?
¿qué más podríamos hacer?
el debugger es
seguramente
uno de los más potentes
el console log
es el de los más rápidos
pero otra forma
eso sí
podría ser utilizar
las herramientas
de desarrollo
de Chrome
¿veis?
estas dos
estas dos cositas
que tengo aquí
esto
voy a eliminar
ahora el debugger
para que esto
no me entorpezca
voy a
y esto es lo que
nos diría
justamente
vale
esto no es nada
aquí
components
podríamos ver
el árbol
de nuestra aplicación
tenemos app
y dentro de app
tenemos el warning
not use
esto es porque
todavía no estamos
utilizando el contador
cuando le demos aquí
al botón right
pam
se cambia list of clicks
lo mejor
fíjate
podemos ver
el estado
que tiene nuestra aplicación
¿ves?
el estado
tenemos aquí
el estado
lo mejor es que puedes cambiar
este estado
podemos cambiar el estado
y ver cómo reacciona
nuestra aplicación
mira
pam
aquí lo tenemos
y de hecho
nuestra aplicación
puede responder
a este cambio de estado
y aquí lo mismo
o sea
podemos eliminar
por ejemplo
este estado
esta raíz
podemos decir
voy a eliminar este
pam
y aquí puedes ver
que ha desaparecido
podríamos quitarlos todos
a veces ten cuidado
porque esto puede ser útil
pero hay veces
que puede volverlo
a tu aplicación
pero bueno
aquí lo podrías
lo podrías ir viendo
cómo se va comportando
en list of clicks
pues igual
aquí vemos las props
que le ha llegado
las podríamos eliminar
y ya estaría
esto también puede ser interesante
a la hora de debugar
tu aplicación
de React
¿vale?
entonces
las reglas
un poco de los hooks
ya lo hemos visto
importante
los hooks
no se puede utilizar
dentro
aquí no puedes hacer
un if
por ejemplo
esto no lo puedes hacer
esto está prohibido
tampoco lo puedes poner
dentro de un bucle
los hooks
en este caso
todavía hemos visto
solo el useState
pero veremos
más
en este caso
solo hemos visto
el state
ten en cuenta
que no lo puedes poner
ni en condicionales
ni lo puedes poner
por ejemplo
o dentro de una función
¿vale?
tampoco podríamos utilizar
un handleClick
o lo que sea
y entonces hacer
el useState
¿vale?
esto prohibidísimo
el estado
tiene que estar
en el cuerpo de la función
y visualmente
es interesante
es arriba
lo puedes poner
más abajo
pero es un poco raro
lo mejor es que lo pongas
lo más arriba posible
¿ok?
vale
entonces esto ya tendríamos
se ha quedado
aquí un poquito
lo que podríamos
hacer
aunque esto lo
a lo mejor
os lo dejo
como ejercicio
el hecho de crear
funciones
a partir de funciones
¿vale?
como os dije
en javascript
puedes crear una función
que devuelva una función
así que
eso lo puedes tener
en cuenta
sobre evitar renderizados
de los useState
eso lo veremos
más adelante
porque hay hooks
que justamente
nos permiten
nos permiten eso
¿vale?
ok
luego
hay una cosa importante
sobre el handleClick
que no os he comentado
y es que cuando utilizas
el handleClick
por ejemplo
este handleClick
aquí a esta función
le llega
el evento
¿vale?
el event
o evento
puedes hacer diferentes cosas
podrías recuperar
por ejemplo
podrías evitar
su comportamiento
por defecto
esto es interesante
para los formularios
que lo veremos
en la siguiente clase
en el caso del botón
no hace nada
pero
pongamos
que tengo aquí
en lugar de un button
que es lo correcto
tenemos
un anchor
¿vale?
el anchor en realidad
está pensado
para ir a una página web
esto es una mala práctica
¿vale?
esto no lo hagáis
en vuestras casas
y no digáis
que yo os enseñe a hacer esto
pero
imaginad que tenemos
un anchor
¿vale?
ya os digo que esto
es la forma correcta
de hacerla
pero el problema
que tiene un anchor
aparte de visualmente
ha cambiado
si yo le doy al write
por ejemplo
vas a ver que aquí
la url
cambia
cambia
porque le va a poner
una almohadilla
¿vale?
le doy
¿ves la almohadilla?
para evitar esto
hay veces
que queremos evitar
el comportamiento
que tiene por defecto
este elemento
así que lo que podemos hacer
es añadir en el evento
podríamos ejecutar
event
prevent
prevent
default
¿vale?
y de esta forma
le estamos diciendo
vale
evita tu evento
por defecto
porque yo quiero
que hagas otra cosa diferente
esto es interesante
no solo aquí
sino que
como os digo
en formularios
ahí sí que es necesario
en el caso de los botones
en este caso
puede ser útil
a veces
pero normalmente
en los botones
no lo vas a necesitar
solo que
tengas en cuenta
que puedes recuperar
esa información
y el evento
en realidad
tiene información
bastante interesante
por ejemplo
le puedes dar
ahora no sé
qué ha pasado
ahora
le puedes dar
y tienes la información
por ejemplo
cuál es el elemento
que ha recibido esto
el tiempo
que ha tardado
en hacerlo
dónde está
dónde se ha hecho
el click
exactamente
en el
x y y
¿vale?
o sea que
tiene información
interesante
pero normalmente
normalmente
se utiliza solo
para lo que hemos dicho
el preventivo
para los formularios
si veremos
que puede tener
bastante más
más interesantes
más cosas interesantes
recuerdo una cosa
que dije en la clase anterior
esto no se hace
¿vale?
el definir
esto funcionaría
pero el definir
componentes
dentro de otro componente
no es buena práctica
así que siempre
lo sacamos fuera
¿vale?
importante
y
a ver
estoy viendo
si me falta
alguna cosita más
vale
veo que aquí
hay un montón
de ejercicios
en la clase
mirad
aquí en el full stack open
hay un montón
de ejercicios
que como la última vez
os invito
a que los hagáis
para que
pues practiquéis
además esta está
bastante bien
que parece
que es como para
estadísticas
y algo está bien
neutral
malo
es como un contador
pero de otra forma
pues os animo
a que lo hagáis
lo podéis hacer
en code sandbox
por ejemplo
que ya habéis visto
que es bastante rápido
entonces vais
dándole a todas las clases
y me comentáis
vamos con ronda
de preguntas
me comentáis
que os ha parecido
la clase
a ver qué tal
y a ver qué tal
a ver qué tal
comentadme
¿cómo estáis?
¿alguna pregunta?
pues explicar
use memo
lo explicaremos
más adelante
Alejandro
hoy no lo vamos
a ver
porque los siguientes
veremos el use effect
veremos
cómo hacer fetching
de datos
en la siguiente clase
y ahora mismo
explicar el use memo
o el use callback
es un poco
saltar
¿vale?
Alena Nick
dice que le encanta
me apunta a este bootcamp
pues tenemos dos clases
tenemos dos clases más
¿vale?
os animo
a todos y a todas
os animo a todos y a todas
a ir a
bueno está en mi página web
que además
mirad
en mi web
hay un artículo
donde tengo
tenéis todas las clases
también
estoy poniendo
todas las clases
en este artículo
que es bootcamp
fullstack gratis
aprende y desarrollo
fullstack
¿vale?
aquí tenéis
además tenéis
el curso de NextDS
el curso de React
también podéis ir
a mi YouTube
que ahí
tenéis todas las clases
para que las volváis a ver
cuando queráis
¿vale?
aquí
ya de nuevo
hay
lista de reproducción
¿vale?
y aquí
tenéis una lista de reproducción
con todas las clases
del bootcamp
para que la repaséis
tantas veces
como queráis
o necesitéis
¿ok?
también en Discord
tenemos un canal
que si eres suscriptor
puedes entrar
y que justamente
pues
ahí comentamos
cosas del bootcamp
¿ok?
Binku dice
siento que ha avanzado rápido
por lo que soy nuevo
sin embargo
ya le voy a coger el tiro
y ya irá bien a tu ritmo
¿vale?
si veis que vamos muy rápido
a ver
pensad que
que es un bootcamp
que es bastante
bastante tocho
o sea
mirad todo lo que vamos a hacer
vamos a hacer un montón de cosas
React
comunicación con el servidor
que es lo que vamos a ver
en la siguiente clase
programando un servidor
con Node.js y Express
testeando
vamos a hacer un montón de cosas
vamos por la parte 3
bueno parte 2
y son 11
así que
vamos a ir
a fuego
los bootcamps
son así
los bootcamps
normalmente
son muy
a cuchillo
¿vale?
son a cuchillo
entonces
lo que os invito
es que podéis revisar
las clases
en YouTube
tantas veces
como queráis
y que
si estáis
si sois suscriptores
en Discord
tenemos un canal
que comentamos
el bootcamp
donde ahí la gente
se apoya
y puede decir
bueno pues lo puedes hacer así
lo puedes hacer asá
y eso está bastante bien
y eso
que os animo a que
que lo reviséis
porque ya os digo
que los bootcamps reales
que cuestan 5000 euros
y este cuesta 0 euros
los bootcamps reales
de 4000 euros
5000 euros
van muy muy a saco
entonces este
no va a ir más lento
porque claro
tenemos que ir bastante rápido
pero
pero creo que
que vamos a un buen ritmo
o sea
hemos dedicado ahora
una hora 40
para toda la parte
de React
más
el otro día
hicimos
una hora
más o menos
también de React
así que
creo que
en dos horas y media
o sea
no he intentado
explicar
todos los conceptos
de React
y no hacerlo
no hacerlo a saco
sino que
que creo que se puede ver
y creo que poco a poco
lo podáis
lo podáis seguir
a ver a ver
que me vais comentando
rápidamente
muy muy buena clase
me encanta que sea detallista
y expliques exactamente
qué ocurre por dentro
de las cosas
claro
quiero explicaros
exactamente
cómo funcionan las cosas
en la próxima clase
veremos cómo manejar
estado de formularios
lo vamos a ver
no veremos ciclo de vida
de los componentes
pero veremos
el use effect
eso sí
el ciclo de vida
de los componentes
era un concepto
que tenía antes React
entonces
con las clases
que he comentado antes
lo que sí que vamos a ver
es
el ciclo de vida
como tenemos ahora
pero más
tirando a funciones
no vamos a ver
el ciclo de vida
antiguo
del component in mount
y cosas así
ok
que lo tengáis
en cuenta
porque creo que son
conceptos antiguos
y que creo que
mucho más interesante
ahora ir a por las funciones
porque veo que
es donde va
le explicas también
que haces que React
parezca muy fácil
muchas gracias
ser chen cop
os digo
tengo un curso
de aprender React
desde cero
totalmente
desde cero
o sea
si os habéis quedado
con ganas
de saber más de React
de más detalles de React
aquí en mi página web
midu.dev
en aprender React
aquí tenéis un curso
totalmente
desde cero
que creo que son
más de
12 o 14 horas
de contenido
haciendo una aplicación
desde cero
de React
creo que es un curso
muy completo
que hace cosas
muy chulas
o sea
si os habéis quedado
con ganas de React
o veis
ostras
es que creo que me falta
entender más
o me gustaría saber más
este es mucho más detallado
porque
es lo que os digo
pero ahí tenéis el contenido
el contenido está disponible
y le podéis dar caña
así que no os echéis para atrás
por supuesto
suscribíos al canal
le dais aquí
a suscribirme
y os suscribís al canal
que me ayudáis
si mi valor inicial
no es cero
¿cómo puedo dar reset
hacia ese valor?
muy buena pregunta
mira
me parece muy buena pregunta
antes hemos visto
vamos a volver aquí
antes hemos visto
que teníamos un set reset
¿vale?
vamos a volver a ponerlo
vamos a poner aquí el reset
vamos a poner aquí
aquí
¿no?
vamos a poner un botón
que haga el reset
vale
vamos a poner un botón
que haga el reset
porque dice
handle reset
reset button
vale
y este handle reset
vamos a hacerlo así
ya sabemos esto
cómo funciona
que tenemos aquí
set counters
bueno
aquí intenté ahora
como lo queremos resetear
en realidad
sí que tenemos que poner
este estado inicial
¿no?
pero
él comenta una cosa
muy interesante
mirad
yo pongo esto
esto por supuesto
si lo quiero resetear
le voy a poner otra vez
el valor inicial
¿vale?
voy a guardar
los cambios
y ahora si
yo le doy al left
y al right
¿no?
vale
voy dándole
y ahora el reset
¡pam!
esto funciona correctamente
pero él me dice
¿vale?
¿pero qué pasa
si yo aquí pongo
left 2
y aquí 4
¿no?
y el mensaje del estado
y pongo aquí esto
yo lo guardo
cuando yo inicio
tengo 2 y 4
pero cuando le doy a reset
claro pone 0,0
y otra vez esto
¿no?
entonces
¿cómo puedo
volver a utilizar esto?
mira
tienes diferentes formas
una
por ejemplo
podría ser
tener una constante
que se llame
initial state
y el initial state
por ejemplo
sería esto
este objeto
lo tenemos aquí
con el 2 y el 4
entonces
le decimos un valor inicial
al final aquí podemos utilizar
lo que queramos
por ejemplo
una variable
de hecho
veremos cómo utilizar
también una prop
como valor inicial
que eso es bastante interesante
y bastante importante
y hay mucha gente
que se lía con esto
pero lo veremos
tranquilos
ahora en este caso
vamos a utilizar una constante
para tener el valor inicial
por ejemplo
initial counter
vamos a poner counter state
que creo que se entiende mejor
¿vale?
tenemos claro
que este es el valor inicial
¿vale?
el estado inicial
y ahora lo podemos reutilizar
por ejemplo
para hacer esto
porque justo queremos
que sea exactamente
el mismo estado inicial
de esta forma
ahora le doy a right
left
y cuando reseteo
ahora vuelve
al estado inicial
justamente
que hemos utilizado
para inicializar
nuestro estado
muy buena pregunta
muy interesante
porque no lo había explicado
y creo que es bastante útil esto
ahora
aunque yo cambie aquí
un valor
lo importante es que
tanto el estado inicial
como cuando lo resetee
va a utilizar lo mismo
de hecho esto es una buena práctica
¿por qué lo he puesto fuera?
porque si lo pones dentro
lo que va a ocurrir
es que esa constante
se va a crear
cada vez que se renderice
el componente
y seguramente
eso es una cosa
que vas a querer evitar
¿vale?
por eso es mejor
si lo pones fuera
y creo que con esto
pues respondería
un poco
tu pregunta
ahora me he perdido
quien lo había dicho
slkpez
lo había preguntado
pues eso
aricanomics
me dice
Edmid
utiliza React en YouTube
la estoy usando
para complementar
este bootcamp
buena elección
gente que me dice
que no se lo diga
a los chicos de Vue
me dice a Elena
no os lo diré
no os lo diré
vale
quiero saber más
sobre el uso de estados
no te preocupes
lo iremos viendo
Elena
use effect
cuando te renderiza
el parámetro
que pasa un array
sin que llame continuamente
veremos el use effect
y lo veremos
o sea
lo vamos a ver
paso a paso
no os preocupéis
el use effect
todavía no lo hemos conocido
pero es el próximo hook
que vamos a conocer
en las clases
¿ok?
¿qué más?
dice use effect
cuando
no
¿qué clase más brutal?
sabía cero de React
y hoy puedo entender
todo claro
brutal brutal
demasiado crack
muchas gracias
tacholas
gracias
nos vemos en la próxima
de un encuentro
canal de discord
tenéis que poner
el comando
exclamación discord
muy agradecido por todo
muy clara la forma de explicar
muy práctico
es un crack
gracias Volta
¿qué más?
¿no sería mejor una función
que devuelva la suma
de click left and right
en vez de crear
un nuevo estado
para almacenarlos?
me dice
lolco
vamos a ver
a ver
si al final
en este caso
es porque hemos hecho
esto de sumarlo
al final
me parece muy interesante
lo que comentas
como os he dicho
lo que tenemos que hacer
es evitar
este tipo de casos
¿qué pasa?
o sea
si al final aquí
pudiéramos
al final
en el use state este
este ya no tiene sentido
porque con el array
lo podemos calcular
la única diferencia
en este caso
por el que no nos funcionaría
exactamente igual
es porque
es diferente
el hecho de tener
un contador inicial
¿no?
o sea
nos obligaría a hacer esto
left
left
right
¿no?
y hacerlos a mano
pero
por supuesto
o sea
si tuviésemos claro
que estos contadores
siempre son cero
lo mejor
sería evitar
totalmente
totalmente
¿ok?
y esto es un ejercicio
que os mando
que siempre tengáis en cuenta
si podéis evitarlo
y al final
totalmente
podríamos hacer esto
quitamos esto
¿vale?
esto es un ejercicio
súper práctico
que vais a necesitar siempre
mirad
claro que podemos hacer esto
podemos quitar esto
y si
a partir de esto
set clicks
lo hacemos así
por ejemplo
ahora
¿cómo podemos calcular esto?
pues decíamos
clicks
o left
vamos a ponerle
el left
podría ser
el
clicks
y sería
filter
de todos
el click
que sea el click
sea igual
a la l
¿vale?
filter es uno de los métodos
que tiene array
para filtrar
elementos
en una lista
en un array
en este caso
vamos a filtrar
todos los que sean
el string l
¿vale?
l porque hemos dicho
que esos sean los rights
y filtramos
aquí
bueno
aquí podríamos hacer
un truquillo
¿no?
de decir
bueno
en realidad
por ahora
lo vamos a hacer así
¿no?
de contar también
los que son derecha
y aquí tendríamos
left
y aquí tendríamos
right
y
esto
vale
en lugar de left y right
lo que tendríamos
sería el número
tendríamos que sacar
el número
de elementos
porque filter
nos devuelve
una array
así que
ya tendríamos esto
y con esto
tendríamos toda la información
en un solo estado
de una forma súper sencilla
o sea
que tiene razón
lo que dice
la única cosa
es que tened en cuenta
que ahora ya
para empezar
desde un contador
un número en concreto
no sería exactamente
lo mismo que antes
ahora tendrías que
poner aquí manualmente
R y L
pero si esto sirve
veis que en un solo estado
tenemos un montón
de información
esto es una súper buena práctica
esto
esto es
lo más difícil
de dominar de React
y mucha gente
le cuesta
¿no?
el hecho de utilizar
el mínimo número
de estados posibles
así que siempre
que veáis
la oportunidad
de evitar estados
hace texto
¿vale?
aquí
súper fácil
hemos podido calcular
el left y el right
alguien puede decir
bueno pero claro
es que aquí estás contando
o sea
antes era un poquito
más óptimo
porque no tenías
que recorrer
un array
para filtrar
los elementos
y contarlos
pero realmente
hay veces
que eso son
micro optimizaciones
es mucho peor
mucho peor
tener dos estados
mucho peor
que hacer este tipo
de conteo aquí
ahora que tienes
10.000 millones
de elementos
en una lista
entonces quizás
lo podríamos revisar
pero este tipo
de elementos
de un array
que a lo mejor
tienes 100
200
500 elementos
ya os digo
que es mejor
contar 500 elementos
y filtrarlos
de esta forma
que son
microsegundos
que no tener
dos estados
que sí que puede ser
no solo un problema
en temas de performance
sino un problema
a la hora
de mantener
tu aplicación
¿vale?
así que
bien visto
bien visto
así me gusta
alguien me contaba
que quiere saber
más sobre el uso
de estados
que no te preocupes
y lo iremos viendo
NextGS
no creo que veamos
en este bootcamp
se va medio
a la cámara lenta
bueno
no sé
a veces
es lo que pasa
que no funciona
muy fino
el streaming
de tantas cosas
¿vale?
vale
el reset
ya lo hemos comentado
muy interesante
¿vale?
muchas gracias Pablo
C y C
por suscribirte
con Prime
¿ok?
tu curso de RIA
que es impresionante
dice Diana
muchísimas gracias
Serchenko
dice
estuve en un bootcamp
en la que me dejé
5000 euros
y las clases de RIA
iniciales
fueron un mojóncete
comparadas con estas
bueno
suele pasar
Serchenko
pero me alegro
que al menos
te estén sirviendo más
¿qué clase más brutal?
el ritmo es bueno
y dedicando un poco
de tiempo a los apuntes
queda todo bastante claro
sí hay que
dedicarle tiempo
también
ojalá
yo puedes estar aquí
mil horas
pero al final
tenéis que terminar
vosotros también
por vuestra parte
¿vale?
Ignacio dice
yo confirmo
aprendí contigo
hace un par de meses
estas suscripciones
porque gracias a ti
estoy trabajando en RIA
muchas gracias Ignacio
me alegro un montón
que te haya servido
tu curso súper completo
con grandes prácticas
dice Maxi Nieto
gracias crack
Ari
Ari reinventada
¿cómo estás Ari?
este curso es increíble
y va más lento
el curso de RIA
voy mucho más lento
¿vale?
así que creo que os sirve
para repasar un montón
de cosas
¿vale?
eso
mirar el tema
de React
si tienes un componente
que hace graper de app
la lógica se mantiene
en ese componente
o en el graper
eso depende mucho
Alejandro
de un montón de cosas
de si quieres compartir
ese estado
si
seguramente lo mejor
es mantener la lógica
en el graper
¿vale?
Asturix
dice
buenas noches
¿qué estás programando?
bueno
hemos programado
una clase entera de React
que hemos programado
qué bueno
¿cuándo decides usar React
y no irte solo
por HTML, CSS y JavaScript?
esa es muy buena pregunta
me cuatro tacholas
normalmente
no siempre hay que utilizar React
por ejemplo
si tu página es estática
y no tiene que responder
a cambios de estado
seguramente
HTML, CSS y JavaScript
es mejor opción
que utilizar React
React
es un framework
que está muy usado
hoy en día
pero viene a responder
la necesidad
de mostrar en la UI
cambios en el comportamiento
del estado
de la aplicación
justamente
¿no?
entonces
si tu aplicación
no tiene mucho estado
es totalmente estática
por ejemplo
pues un porfolio
o un blog
muy pocas veces
tiene sentido utilizar React
a no ser que sea
porque te cuesta mucho
utilizar HTML, CSS, JavaScript
y como entorno de desarrollo
React te ayuda
pero ventajas al usuario
no tiene muchas
así que
cosas así
genial como siempre
mira
esta es muy buena
Xlercy
me dice
¿por qué haces todo esto gratis?
y la verdad
es muy buena esa pregunta
¿por qué hago todo esto gratis?
pues no lo sé
la verdad
o sea
por un lado
quiero ayudar a mucha gente
a subir de nivel
y me hubiera gustado
poder contar
con este contenido
cuando yo estaba aprendiendo
cuando yo estaba aprendiendo
no existía ni YouTube
y lo pasé muy mal
aprendiendo a programar
lo pasé fatal
y tuve profesores
no voy a decir malos
vamos a decir
diferentes
entonces
recuerdo lo mal
que lo pasé yo
en aquellos tiempos
lo pasé fatal
lo pasé fatal
mirando libros y tal
y siempre pues
desde entonces
siempre he tenido un poco
el pensamiento
de decir
ostras
pues quiero enseñar bien
las cosas como a mí
me hubiera gustado
que me los hubieran enseñado
alguna vez
¿por qué lo hago gratis?
pues es verdad
podría
y de hecho quiero hacer
algún curso
¿no?
de React
por ejemplo
bien grabado
y a ver si la gente se anima
pero también
porque espero que la gente
diga
ostras
si me está ayudando
esta persona
a subir de nivel
en mi carrera
o me ha ayudado
a encontrar trabajo
o me ha ayudado
a aprender esto
o lo otro
pues que se animen
a suscribirse a Twitch
al Patreon
que en el Patreon
pues me ayudan bastante
o
ni siquiera eso
¿no?
darle like
compartir
y yo que sé
o sea que no sé exactamente
por el lado gratis
pero sé que es una cosa
que disfruto haciendo
y mientras lo disfrute
pues creo que lo seguiré haciendo
y tal
y mientras haya gente
a la que realmente
le esté
le esté
cambiando la vida
de alguna forma
y mucha gente me escribe
y hay veces que me emociono
y todo
casos que me dicen
mira vivo
en este país
lo estoy pasando mal
es difícil
pero gracias a ti
he encontrado este trabajo
y me ayudas
a poder ayudar
a mi familia
que está en esta situación
pues joder
la verdad es que emociona
¿no?
y digo joder
pues por estas cosas
valen la pena
así que no sé
supongo que lo hago
un poco por todo
porque me gusta mucho
porque
porque me hubiera gustado
que esto
me hubiera encontrado
yo cuando estaba aprendiendo
y porque da una forma
y un retorno
que yo aprecio
y que bueno
que ojalá pueda vivir de esto
sé que es difícil
¿no?
sé que
es complicado
pero no sé
es un sueño
que tengo
y
de sueño se vive
pues eso
¿cuándo crees
que empiecen
las clases duras?
no va a haber clases duras
no os preocupéis
aquí
mientras aprendemos
aquí no va a haber clases duras
¿tienes un muñeco de Gihab?
dice Elena
toma
muñeco de Gihab
a ver
aquí
muñeco de Gihab
lo tengo en la mano
además
me está acompañando
genial como siempre
tío Midu
últimamente está trabajando
más con CSS y JavaScript puro
así que esta clase de React
me ha venido genial
para refrescar mi memoria
nada
¿tu curso de Platzi
en qué difiere al de YouTube?
me tacholas
el curso de Platzi
es un curso de React avanzado
más sobre el ecosistema de React
yo creo que el de YouTube
es más completo
si quieres aprender React
porque es React desde cero
te explica
por qué React
por qué razón
se creó React
y va a incrementar
en ese sentido
mi curso de Platzi
es más React avanzado
pero más con GraphQL
más
cómo utilizar el context
que eso también se ve en YouTube
entonces
creo que es diferente
os digo
hoy es la tercera sesión
y que sepáis
que todas las clases
las tienes en midu.tuve
¿vale?
¿qué más?
gracias Midu
por este curso
yo voy haciendo el bootcamp
por mi cuenta
durante la semana
y resuelvo mis dudas
los domingos aquí
nada genial hombre
lo hace gratis
porque es buena gente
hola
soy el hijo de Manu
tengo 8 años
la verdad
la clase es bastante interesante
hostia
qué grande
8 años
qué fuerte
¿cuándo crees que empecé?
nada
no soy Google Developer Expert
tengo entendido
que este contenido gratis
te puede ayudar
en caso de que aún
no tengas ese estatus
no soy Google Developer Expert
pero soy GitHub Start
la verdad es que no
no sé
no sé
no sé
no sé
porque no soy Google Developer Expert
no sé
aquí hay que pedírselo
si Google
hay que escribirle a Google
o algo
no sé
no sé cómo se consigue
o sea
me invitaron a ser
me presenté
pero por el tema del COVID
pues me escribieron
me dijeron que se había paralizado
un poco
pero tampoco he insistido
tampoco creo que
no sé
lo bueno vuelve
nos ayudamos un montón
gracias por este bootcamp
en mi caso me va a servir
para consolidar
lo que hice en otro bootcamp
y actualizar
bueno sí
es lo que espero
que esto os ayude
pues a consolidar
algunos conocimientos
y tal que tengáis por ahí
eres súper increíble
gracias hombre
gran corazón
el que enseña
trata de ayudar a los demás
bueno muchas gracias
vengo haciendo
tres cursos distintos de RIA
para poder entender
cómo funciona correctamente
no sólo lo que hay que hacer
y nadie explica mejor
la lógica de trata
funcionalidad que vos
gracias Alfa
bueno al final llevo muchos años
trabajando con RIA
llevo trabajando
por lo menos
seis años
con RIA
entonces
ya lleva tiempo
ya lleva tiempo
bueno pues
muchísimas gracias a todos
nos hemos quedado 273
al final
de estas dos horas
muchísimas gracias a todos
por manteneros
hasta el final
ya sabéis
la mejor forma
de ayudarme
la mejor forma
de que me podéis ayudar
y no es dinero
es compartiendo todo
mi contenido
dándole like
hablando de mí
a la gente
eso me ayuda
lo que no sabéis
cuánto
para seguir creciendo
la comunidad
y cuanto más seamos
pues mejor
así que ya sabéis
eso ya sabéis
que me ayuda a mil
cualquier cosa
vídeos de youtube
lo que sea
así que ya sabéis
me podéis seguir
por midu.tuve
estoy en instagram
también
en twitter
y en twitch
que de vez en cuando
voy haciendo directos
y si no pues
nos vemos en discord
muchas gracias a todos
cuidado mucho
que tengáis un buen
inicio de semana
y nos vemos
en la cuarta clase
la semana que viene
domingo
a las 8 de la tarde
para seguir con
los formularios
en react
fetching de datos
y muchas cosas
más
que son apasionantes
como todo el desarrollo
web y full stack
hasta luego
cuidaos mucho
chao
nos vemos en la siguiente
retransmisión
adiós