Así que vamos con el tema de recuperar información del servidor que me parece súper interesante. Aquí habla de utilizar el JSON server. Es un servicio súper interesante que os recomiendo un montón que lo miréis porque esto es lo que os permite
es como falsear una REST API. REST al final es una arquitectura que se utiliza mucho en las APIs que lo que te permite es trabajar con recursos
y utilizar sus endpoints, su dirección, utilizando diferentes acciones sobre esas direcciones. Puedes leer el recurso, actualizar el recurso, borrar el recurso
y está bastante interesante. De hecho, es la forma de arquitectura más típica de APIs que hay hoy en día.
Aunque más adelante veremos que aparte la alternativa ahora sería utilizar GraphQL, que es totalmente compatible una con otra.
A mí me gusta mucho este servicio, el JSON placeholder, que está basado justamente en el JSON server, que es exactamente lo mismo.
Pero esto está, digamos, en internet y entonces esto le da un poquito más de sentido a hacerlo en tu aplicación que no tenerlo en local, ejecutándose y tal.
Así que lo que podemos hacer es transformar nuestra aplicación para que utilice esta API.
Vamos a hacer como lo podríamos hacer. Vamos a copiar primero, podría copiar, ah, que por cierto, os recomiendo bastante esta extensión,
JSON formatter, para justamente cuando entráis a una API verla bien así de esta forma, formateada, que si no lo vais a ver, súper chungo, ¿vale?
No lo vais a ver así de bonito.
Vale, pues esta sería como lo está utilizando. Tendría user ID, ID, title y body.
Pues por ahora, lo que vamos a hacer aquí, vamos a cambiar un poco.
Uy, he abierto sin querer el Visual Studio Code.
Vamos a cambiar nuestra aplicación que tendría ID, user ID, title.
Pues esto sea el body.
Aquí es, por ejemplo, el title.
Y podríamos poner, no sé si copiármelo directamente.
Sí, ¿no? Vamos a copiarlo.
Copiar. A ver si esto se copia bien.
Y de esta forma ahora lo arreglaremos.
Esto por aquí, esto por aquí, por aquí.
Venga.
Las notas, obviamente, no se muestran, ¿no?
Porque no sé exactamente qué es loco.
De hecho, esto ahora sería otra cosa.
Al final, lo que podemos hacer es ver dónde estábamos pasando toda esta información.
No teníamos categorías, esta categoría afuera.
El de tenemos, tendríamos aquí el title y el body.
Title y body.
Y esto, justamente, hay una cosa interesante aquí,
que es que si hubiéramos utilizado lo de enviar todo el archivo,
o sea, todo el objeto, ahora tendríamos que hacer menos cambios.
Esto es una ventaja, justamente, de algo que hemos hablado antes.
¿Veis? Yo ahora aquí, como estoy haciendo esto,
ya no tengo que preocuparme de volver a cambiar aquí todas las props.
Esto es una ventaja de hacerlo así.
Como veis, todo tiene sus ventajas y sus desventajas, ¿vale?
No es tan sencillo como decir, ah, no, esto de esta forma y esta de otra, ¿vale?
Esto, el filtro, pues nada, lo vamos a eliminar,
porque este filtro ya no tiene sentido.
Vamos a quitar todos estos filtros.
Filtro fuera.
Filtro fuera, ¿vale?
Y esto del formulario, no sé si dejarlo, a ver, date.
Este date, es que se está quejando este date,
no sé de dónde está, no sé de dónde se está quejando.
Ahora, vale.
Por ahora lo vamos a dejar así.
Esto vamos a transformarlo también, id, title y body,
pues vamos a dejar aquí title y body y vamos a poner que sea justamente lo mismo, ¿vale?
Ya lo tendríamos.
Pam.
Para crear el estado tendríamos así.
Pero por ahora, si añadimos aquí, pues se volvería a añadir.
He puesto que el title y el body sean el mismo, pero bueno,
básicamente lo que estamos haciendo es igualarnos al playholder que teníamos aquí.
Ahora tendríamos un user id,
pero lo importante es que más o menos es exactamente lo mismo,
con el title y el body.
Aquí tendríamos este contrato ahora, ¿vale?
Podríamos añadir notas que sean exactamente lo igual y ya está.
Ahora, lo interesante de esto es que esto teníamos aquí las notas
que las teníamos creadas,
pero ¿cómo podemos hacer que podamos recuperar esta información
desde una API externa totalmente para verlo en nuestra aplicación?
De hecho, aquí podemos ver este post que tenemos aquí
que nos devuelve toda esta información.
No sé si hay, me imagino que sí, a ver, no, no hay forma.
Podríamos recuperar todos estos posts y mostrarlos y ya está.
Como ya nos hemos asegurado que el contrato del objeto
es exactamente el mismo, pues no deberíamos tener ningún problema.
¿Cómo podemos hacer esto?
¿Dónde debemos que hacer esto?
Si volvemos a nuestra app, veis que aquí estamos recibiendo por props,
estamos recibiendo este props.notes, ¿vale?
Pues esto lo vamos a eliminar.
Vamos a quitar todas estas notas que teníamos aquí a mano
y ya no le va a llegar por props absolutamente nada de esto, ¿vale?
Venga, habíamos dicho que una buena práctica
era inicializar el estado con el tipo de dato que íbamos a tener.
Así que el tipo de dato que va a tener las notas,
hemos dicho que es un array.
Muy bien.
Así que estas props ya las podemos eliminar
y ahora mismo las notas están totalmente vacías.
No tenemos notas de ningún tipo.
¿Cómo podemos acceder justamente a esta información?
Una forma de hacer una petición a un recurso,
la más típica, es utilizar un fetch.
¿Pero dónde tienes que hacer el fetch?
Claro, si pensamos hacer un fetch,
fetch al final es un método que lo que nos permite
es recuperar datos de internet a partir de una dirección,
una dirección web.
En este caso aquí tendríamos que poner la dirección
de la que queremos hacer un fetch, ¿vale?
¿Cuál es la dirección?
Es esta de aquí, la que tenemos aquí.
¿Vale?
Vamos a hacer un fetch, vamos a hacer una petición a esta URL.
¿Cuál es el problema?
Que fetch al final lo que está haciendo es una petición a una URL
y esto está ocurriendo de forma totalmente asíncrona.
¿Qué quiere decir asíncrona?
Pues que nuestra aplicación no va a esperar.
No va a esperar a que esto termine.
Nuestra aplicación, como puedes ver aquí a la derecha,
esto sigue funcionando.
Pero no va a esperar a que tú hagas una petición
y vuelva esta información.
Eso está ocurriendo.
De hecho, voy a guardar los cambios
y vamos a ver que yo he puesto este fetch aquí
y si voy aquí, voy a ver los cambios.
Vamos a inspeccionar alimentos.
Lo hemos visto en la primera clase, súper importante.
Mirad la network.
Vamos a ver.
Y aquí en XHR and fetch, ¿ves?
Puedes ver este tipo de peticiones.
Aquí tenemos la nuestra.
Y aquí puedes encontrar que esta petición
la está haciendo aquí en este punto.
Bueno, ahora se me pone eso.
Pero ¿veis que en la barrita pone la hecha en un punto?
Pues la petición la he hecho.
Pero esto no está esperando a renderizar esta aplicación.
Esto es totalmente asíncrono.
No está bloqueando que nuestra página siga funcionando.
JavaScript, por defecto, bloquea cada una de las líneas que vemos.
Pero al final, cuando haces peticiones de este tipo
o haces algunos tratamientos de datos,
puede hacer que sea asíncrono y no bloquee el proceso.
Así que lo que estamos haciendo aquí es hacer este fetch.
Y entonces, ¿cómo funcionaría?
Aquí lo que está haciendo el fetch
es devolver lo que se dice una promesa.
Vamos a verlo.
Si yo hago un console.log de este fetch,
o mejor todavía, en lugar de un console.log,
vamos a ir a la cierta de desarrollo
y a la consola voy a hacer el fetch.
¿Veis? Aquí dice promise y dice pending.
Al final, fetch lo que nos devuelve
es un tipo de datos un poco especial
que se llama una promesa.
Una promesa es un objeto que guarda un valor futuro.
¿Qué quiere decir esto?
Una promesa es como decir, vale, yo me quedo haciendo esto.
Por ahora, en este caso, estoy pendiente,
estoy haciendo cosas,
pero en algún momento esta promesa se resolverá.
Ya sea de forma positiva, que ha ido bien,
o de forma negativa.
Nos está dando como un valor futuro.
Nos está diciendo, bueno, ya en un futuro,
por ahora yo estoy pendiente,
pero en algún momento te devolveré algo.
Ya sea un error o ya sea la respuesta que tengo.
Para que esto funcione correctamente,
lo que podemos hacer es guardar en una variable el fetch,
por ejemplo.
Ahora, si le doy a la A,
¿ves ahora qué ha pasado?
Que como he tardado un rato,
cuando yo he intentado ver cuál era el valor de A,
fíjate, me ha dicho que la promesa ya se ha cumplido.
Y ya tengo aquí la respuesta.
Si hubiera sido súper rápido,
súper rápido,
a lo mejor todavía hubiera visto pending.
Pero como he visto que la A,
lo he hecho después de un rato,
dice, no, no, ya la promesa,
tienes una promesa y ya está,
ya tengo la respuesta.
Ya ha sido completa
y ya tengo aquí la respuesta.
Y podríamos ver aquí que tengo la información justamente
que necesito, ¿vale?
Así que esto es lo que haría un fetch.
Pero claro, ¿cómo podemos hacer esto y utilizarlo aquí?
Claro, cuando tú tienes una promesa
para recuperar ese valor futuro,
tienes que decirle, vale,
tú haces el fetch y entonces
haces un paso más.
Y aquí tienes que pasarle una función
para tratar la respuesta del fetch, ¿vale?
Una vez que tenga el valor
de esta respuesta,
entonces transformame la respuesta
a un JSON.
¿Y qué es lo que hace esto justamente?
Pues devolver también una promesa.
Por lo tanto, puedes encadenar
otra resolución de esta promesa, ¿vale?
Pues entonces,
cuando tenga ya el JSON,
entonces hago algo, ¿vale?
Entonces si ponemos aquí
un console.log del JSON,
¿vale?
Vamos a refrescar esto
y veis aquí,
ya tenemos aquí la respuesta de la promesa.
De hecho,
si lo copiamos aquí
para que lo veáis más claro,
vamos a copiar esto
y lo hacemos aquí.
Y esto, ¿veis?
Al principio me ha devuelto un pending,
pero al rato esto se ha resuelto
y ha ejecutado este console.log
y aquí tendríamos todo este JSON, ¿vale?
Entonces, aquí hay un problema.
Aquí hay un problema.
Y es que,
como ya vimos en la clase anterior,
si yo aquí actualizo el estado,
si yo aquí hago un setNodes,
¿qué pasa con esto?
Que el setNodes
vuelve a renderizar el componente.
¿Y qué pasa cuando se renderiza el componente?
Que llama al fetch.
Y cuando tiene la promesa,
vuelve a llamar aquí al setNodes.
Y cuando llamas al setNodes,
¿qué pasa?
Que se vuelve a renderizar.
Y que cuando se vuelve a renderizar,
¿qué pasa?
Pues que llamas al fetch.
Y cuando llamas al fetch,
¿qué pasa?
Que te vuelve una promesa.
Y la promesa, ¿qué pasa?
Ya sabes lo que pasa, ¿no?
Lo que está pasando aquí
es un render infinito.
Esto es un loop infinito
que lo que haría
es que nuestro componente
no pare de renderizarse
porque está haciendo un fetch,
actualiza el estado,
se vuelve a renderizar,
llamas al fetch,
plop, plop, plop, plop.
¿Vale?
¿Cómo puedes evitar esto?
¿Cómo puedes controlar
ese flujo de renderizados
para el componente este de la app?
Para recuperar los datos,
pero solo hacerlo una vez.
Pues lo que tenemos que hacer
es utilizar otro hook
que se llama useEffect.
El useEffect es un hook
que se ejecuta cada vez
que se renderiza nuestro componente.
Aunque veremos
que podemos controlar de alguna forma
cuántas veces se tiene que renderizar.
Pero lo importante
que hay que saber hasta ahora
es que es un efecto.
Es como una función
que quiero que se ejecute
cada vez que se renderiza
mi componente.
Así que este fetch
no lo vamos a hacer aquí
porque queremos tener
ese control granular.
¿Vale?
Queremos controlar
cuando se ejecuta este fetch.
No que pase siempre.
¿Vale?
Así que lo que vamos a hacer aquí
es un useEffect
y aquí le pasamos una función.
Y esta función
es la que vamos a querer
que se ejecute
solo cuando nosotros controlemos.
Voy a poner un console.log.
¿Vale?
Y voy a poner aquí
useEffect
para ver cuándo se está ejecutando esto.
Vamos a limpiar aquí esto.
Voy a renderizar otra vez.
Venga.
Pues en la consola
veremos que el efecto
se ha ejecutado una vez.
¿No?
Si yo añado una nota
y por lo tanto actualizo el estado
mira
fíjate que cada vez que escribo
se está ejecutando este efecto.
¿Por qué?
Porque como te he dicho
cada vez que se renderiza el componente
se tiene que ejecutar este efecto.
Cada vez que estamos escribiendo
justamente estamos actualizando
este estado de la nueva nota.
¿Vale?
Porque esto lo estamos guardando
en un estado.
Cada vez que hacemos un
tecleamos en el input
actualizamos el componente
se vuelve a renderizar todo
y esto lo que está haciendo
es que este efecto
se vuelva a renderizar.
Para evitar que esto se renderice
se ejecute tantas veces
lo que le podemos decir
es las dependencias
que dependen
de que este método se ejecute.
¿Cómo le dices las dependencias
y qué es esto de las dependencias?
Vamos a pasarle un array vacío.
A ver lo que pasa.
Voy a guardar los cambios.
Vamos a refrescarlo aquí.
Y ahora si escribo
no está volviéndose a ejecutar.
Fíjate que solo se ejecuta una vez.
¿Por qué?
Porque lo que estamos diciendo
aquí al efecto
es, vale,
pues este efecto
lo tienes que ejecutar
cuando no cambie nada.
Pero claro,
o sea,
esto lo que quiere decir
es que no tienes ninguna dependencia
y por lo tanto
solo se va a ejecutar una vez
cuando se ejecuta
por primera vez el componente.
Esto es muy parecido
si sabes de cómo funcionaban antes
los componentes en React
era con clases, ¿vale?
Antiguamente con clases
esto es lo más parecido
a un component inbound.
Esto es lo que quiere decir
este efecto se va a ejecutar
solo la primera vez.
Esto es justamente
lo que necesitamos,
que solo se ejecute
la primera vez
este efecto
cuando se renderiza
el componente.
¿Por qué?
Porque si ponemos aquí
que se ejecute
siempre que se renderiza,
pues no lo estamos
controlando correctamente
y al final
también va a ocurrir
un loop infinito.
Así que es aquí
donde tenemos que copiar
el fetch.
Vamos a hacer aquí el fetch.
Vamos a hacer el fetch
de estos datos del post.
Cuando tengamos la promesa
la respuesta
la vamos a convertir
en JSON
y cuando tengamos
este JSON
lo que vamos a hacer
por ahora
es un console.log.
Vamos a ver
lo que tenemos aquí.
Vamos a guardar los cambios
y ya podemos ver aquí
que haces el efecto
y ya tenemos aquí
el console.log
con toda la información
que queremos.
Esta información justamente
es la que queremos guardar
en el estado.
Pues ya aquí
lo único que tenemos que hacer
es llamar al setNotes
y decirle que este JSON
lo guardamos en las notas.
Y ahora, fíjate,
ya ha hecho la petición
y ha guardado
toda esta información
y ya la estamos mostrando.
Pero una cosa importante,
súper importante,
voy a poner un timeout
para que esto,
timeout,
para que esto lo veas claro.
Esto, el timeout,
lo vimos en la primera clase,
¿vale?
Vamos a decirle
que tarde dos segundos
en ejecutar este fetch.
¿Por qué?
Porque esto es importante.
Porque quiero que veas
que cuando tú renderizas
las notas,
primero se renderiza
sin las notas,
¿vale?
O sea,
lo que va a hacer
es que el componente
se renderiza al principio.
Vamos a poner aquí
un,
por ejemplo,
vamos a poner aquí
si las notas están vacías,
como hemos hecho antes,
¿vale?
Si las notas
no tienen resultados,
hola,
midu bootcamp,
¿vale?
Fíjate,
primero se renderiza,
es lo que te decía,
¿vale?
No se va a esperar al fetch.
Esto es otro error
bastante común
que tiene que tener en cuenta,
que esto no está esperando.
React lo que siempre va a hacer
es renderizar
lo que pueda cuanto antes.
Entonces,
lo primero que va a hacer
cuando tú entras a la página
es,
hola,
midu bootcamp,
porque primero renderiza esto.
Una vez que has renderizado eso,
ejecuta este useEffect
y de hecho lo vamos a ver
más claro con otro,
mira,
con un console.log aquí,
que lo vamos a llamar render.
Vamos a reemplazar,
render,
pasan dos segundos,
ejecuta
este timeout,
¿vale?
Ahora,
vamos a poner aquí useEffect,
useEffect
y esto ahora
es cuando
seteando
las notas
de la API.
Vamos a guardar los cambios.
Ok,
vamos a refrescar.
Hola,
midu bootcamp,
renderizamos
luego el efecto,
pasan los dos segundos,
ahora empezamos
y luego cuando tenemos
el resultado,
seteamos las notas
de la API
y una vez que seteas
la API,
o sea,
seteas el estado,
seteas la respuesta
de la API
en el estado,
entonces se vuelve
a renderizar el componente,
¿vale?
Aquí estamos viendo
un poco todo el ciclo.
Primero se renderiza
sin ejecutar
nada de esto,
entonces una vez
se ha renderizado
ejecuta el efecto
porque los efectos
son cuando
ha ocurrido
el renderizado,
¿ok?
Entonces se ejecuta
el efecto.
Como aquí le hemos dicho
que esperamos
dos segundos,
pues hasta que no pasan
dos segundos
no hace el fetch,
entonces pasa
dos segundos
y dice ahora
hace el fetch,
esto ocurre
de forma totalmente
asíncrona
y luego ya por fin
pues setea las notas
con lo que ha tenido
de la API.
Es súper importante
de que veas
que todos los renderizados
ocurren sin esperar,
por ejemplo,
podríamos tener aquí,
que esto es lo típico
del mundo,
otro estado
que le vamos a llamar
loading,
¿vale?
Vamos a poner
que esto es false
y una vez que tenemos
esto de fetch,
aquí podríamos hacer
un set loading
a true.
Justo antes
de hacer el fetch
vamos a decirle,
vale,
ahora estás cargando
y cuando termine
la promesa
vamos a decir,
vale,
ahora ya no estás cargando,
¿vale?
O sea que tendríamos
estos dos casos,
¿no?
Cuando estás cargando
y cuando no estás cargando.
Ahora lo que podemos hacer
en lugar de decir esto
cuando tenemos
el array
y está vacío
lo podemos dejar
pero aquí
en lugar de dejar esto
podríamos hacer
un renderizado condicional.
Ya vais viendo
cómo vamos utilizando
todas las cosas
que hemos visto
en clases anteriores,
¿eh?
Así que ya vamos a tener
un montón de cosas
para revisar.
Esto lo vimos
en la clase anterior.
Ahora,
si estás cargando
pues vamos a poner aquí
cargando
y si no,
pues un stream vacío.
No ponemos nada.
Vamos a refrescar
a ver cómo funciona
todo esto.
¿Vale?
Al principio
hola middle bootcamp
saldrá rápidamente.
Claro,
es tan rápido
lo del loading
que no lo vimos.
El loading está ocurriendo.
Claro,
es que el fetch
es bastante rápido.
Voy a ponerlo aquí
solo para que veamos
que en realidad
no está esperando,
¿vale?
En realidad sé que lo renderiza
pero no le da tiempo
a renderizarlo
al final.
Hola middle bootcamp
¿vale?
Loading
que me estoy...
A ver,
set loading
false
ta ta ta
a ver que no lo estamos
viendo el loading.
No lo estamos viendo.
¿Qué le está pasando?
Ah,
porque,
claro,
porque está entrando
aquí,
¿vale?
Está entrando ahí.
Vale,
ahora sí que lo vamos a ver.
Vale,
¿veis?
cargando.
¿Vale?
Está cargando
y luego
pues ya podrías enseñar
aquí un spinner,
hacer una carga,
lo que sea.
Pero lo interesante de esto
es que puedes ver
que está ejecutando el efecto,
has actualizado el estado,
eso se está renderizando
por ahí,
tú haces el fetch,
es totalmente asíncrono,
no está esperando React
a que el fetch termine
ni nada,
eres tú el que le está indicando
que tienes que cambiar el estado
y entonces React
reflejará
esos cambios en la UI.
¿Vale?
Tú no estás diciendo
espera el fetch.
No, no.
React va tirando.
¿Vale?
Y no te espera para nada,
no espera nada ni a nadie.
Tú lo que le vas a ir diciendo
es, vale,
ahora tienes este nuevo estado.
Entonces React dice,
vale,
yo me voy renderizando,
¿vale?
Yo voy haciendo esto,
voy haciendo lo otro,
pero no va a esperar a nadie.
Una cosa que podríamos hacer
es el tema de ponerle dependencias.
El tema de las dependencias
es que
¿cuándo se tiene que ejecutar este efecto?
Ahora,
como no tiene dependencias,
pues solo se ejecuta
la primera vez que se renderiza.
Pero le podríamos decir,
vale,
cada vez que cambie un valor,
entonces renderízate.
Entonces ejecuta este efecto,
no renderízate.
Cada vez que cambie algo,
renderízate.
¿Cómo lo podemos ver esto?
Mira,
con el new node,
esto es un estado
que va a ir cambiando.
Vamos a ponerle aquí
new node.
y ahora vamos a refrescar esto,
lo vamos a poner,
voy a cambiar esto
y vamos a ver esto.
Yo refresco,
¿vale?
Y esto está cargando
y entonces me muestra todo esto,
perfecto.
Ahora,
¿cómo puedo hacer
que este efecto
vuelva a ejecutarse?
Ya veis aquí
que tengo render,
useEffect,
¿vale?
Voy a hacer esto,
clear,
no,
no funciona aquí.
Console.clear,
a ver si funciona.
Sí,
ahora sí.
Vale,
¿cómo puedo hacer
que esto vuelva a ejecutarse?
Este efecto
tiene una dependencia
que es este,
el new node.
Lo que vamos a hacer aquí
es que si yo
ahora tecleo algo aquí,
este efecto
va a volver a ejecutarse.
¿Por qué?
Porque cuando yo tecleo aquí
debería actualizarse
el estado del new node
y este new node
vendrá aquí
y actualizará el estado,
¿vale?
Y cuando actualizaré el estado
dirá,
este efecto
depende del valor
del new node.
Si el valor
del new node
cambia,
entonces vuelve
a ejecutar el efecto.
Esto lo vais a ver
súper claro
cuando vayáis jugando
con esto
y haciendo más pruebas,
más ejemplos y tal,
¿vale?
Pero esto es un ejemplo
para que veáis al menos
con una dependencia.
Vais a ver,
yo voy a hacer ahora,
voy a tipear
algo del teclado,
¿veis?
Renderizado,
useEffect
y esto ha vuelto
a ejecutarse.
Este efecto,
lo que le estamos diciendo,
este efecto
depende
de esta dependencia.
Cada vez que cambie
esta dependencia
ejecuta esta función
de aquí,
¿vale?
Así que le vamos
a volver a dar,
¿veis?
Y otra vez
se ejecuta el efecto.
Es lo que le estamos diciendo.
En este caso,
no tiene sentido
que dependa
de ese valor,
¿vale?
Pero,
para que lo sepas,
ahí lo tendrías.
¿Vale?
Pues con esto tendríamos
el tema de recuperar datos
del formulario y tal.
Aquí habla
de que justamente
podríamos utilizar axios.
¿Pero qué es esto
de axios y tal?
Axios,
al final
es un graper
de fetch.
Fetch
es este método
que tenemos aquí.
Es una forma,
la forma,
digamos,
más sencilla
de hacer un fetching
de datos
de un servidor.
Y funciona muy bien,
sobre todo
para cuando tienes
pues APIs
que son solo hacer
get y ya está.
Se puede utilizar
para todo tipo de APIs,
pero al final
el código que tienes
que empezar a escribir
a lo mejor
es demasiado complicado.
Para empezar,
lo mejor es fetch,
entenderlo,
porque además
es parte de la plataforma,
así que no te lo pierdas
y utilízalo
porque es la forma
más sencilla.
Pero cuando empieza
a complicarse las cosas
lo que puedes hacer
es utilizar un paquete
que se llama Axios.
Este paquete
es de nuevo
un cliente
para hacer peticiones
HTTP
que también está
basado en promesas
y lo que te permite
además es que
si fetch
no está soportado
en el navegador
por lo que sea,
utilizas a lo mejor
Internet Explorer 11,
pues Axios
sí que tiene soporte.
Además de que tienes
un montón de ventajas
con Axios,
¿vale?
porque puedes hacer
de una forma
más sencilla
un post,
otro tipo de acciones
sobre una URL,
un endpoint
de una API REST.
Así que en este caso
vamos a ver con Axios
cómo sería
porque nos va a venir bien
justamente para luego
hacer el post.
En este caso
aquí puedo crear
y añadir
una dependencia así,
pero si tuvieses
un proyecto
haces en PM install
Axios
y ya lo tendrías.
Ahora que tenemos Axios
pues puedes importar Axios
de Axios
¿veis?
Aquí podemos ver
que tiene un export
por defecto
esto es importante
porque ahora
puedes ver la diferencia
fácilmente
y en este caso
para utilizar Axios
pues solo podrías
hacerlo de unas cuantas formas
pero quizás
la más sencilla sería
Axios.get
no hace falta
hacer este
esta transformación
a .json
ya lo detecta
automáticamente
ahora aquí
ya tendríamos
el JSON
y vamos a ver
lo que tendría
este JSON
¿vale?
porque ahora veremos
que no es exactamente
el mismo
aquí tendríamos
directamente
la respuesta
si hacemos
un console.log
de la respuesta
veremos
que lo que está
haciendo Axios
bueno he puesto
dos segundos esto
es que nos devuelve
un objeto
con más información
por ejemplo
el status code
que nos ha devuelto
la API
los headers
la configuración
que ha utilizado
lo importante
es que en data
es donde tenemos
justamente
la respuesta
de la API
así que vamos a utilizar
vamos a recuperar
data de response
y ahora
vamos a hacer
el set notes
con data
¿vale?
y con esto
ya estaríamos
utilizando Axios
exactamente lo mismo
que hemos hecho
con fetch
pero con Axios
ya ves que
hemos quitado
hemos simplificado
un poco
como estamos
haciendo ese get
y nos va a ayudar
bastante con el tema
del post
que ya veremos
como lo hacemos
voy a quitar
todo el timeout
para simplificar
esto
esto al final
era un ejemplo
vamos a hacer
esto por aquí
esto
el set loading
aquí lo pasamos
a false
también importante
para que no
se quede el cargando
ahí
y ya lo tendríamos
¿vale?
esto sería con Axios
pero de nuevo
te recomiendo muchísimo
que conozcas fetch
porque es parte
de la plataforma
y también es bastante
sencillo de utilizar
y si tienes que hacer
pruebas técnicas
hay veces
que la gente
te pregunta directamente
ah pues hazlo con fetch
en lugar de hacerlo con esto
¿vale?
entonces
aquí tenéis los ejercicios
que son bastante interesantes
son bastante sencillos
y ya veis
que vais a tener que utilizar
todo lo que he explicado hoy
os animo a que los hagáis
porque os va a ayudar
un montón
a entender
todo lo que hemos visto
en la clase de hoy
y cualquier cosa
pues ya sabéis
en Discord
tenemos el canal
del Bootcamp
por si no habéis entendido algo
pues que lo podamos comentar
ahora
vamos a pasar
al tema de alterar
los datos
que tenemos en el servidor
¿vale?
porque
justamente lo único
que hemos hecho
es recuperar los datos
así que vamos a ver
cómo podemos alterar
que normalmente
lo que vamos a querer
es crear datos
¿no?
aquí
como hemos visto antes
estábamos creando notas
a ver
aquí
una vez que recuperamos
aquí
las notas
lo que está pasando aquí
si vamos abajo del todo
que aquí podríamos crear
una nota
¿no?
midu bootcamp
y le damos a crear nota
¿ves?
y se crea aquí
pero cuando refrescas
esta nota
desaparece
esto no tiene sentido
¿no?
lo que queremos justamente
es que esta nota
persista
y para persistir
tenemos que grabarla
en algún sitio
hay un montón de técnicas
bases de datos
esto lo veremos
en el bootcamp
porque vamos a hacer
con Express
vamos a hacer un servidor
así que
lo veremos más en detalle
por ahora vamos a utilizar
el servidor que ya está hecho
que en este caso
es este
JSON Placeholder
y puedes ver
que aquí en las rutas
no lo he probado
pero
vamos a confiar
que esto funcione
que básicamente
lo que se puede hacer
es hacer un post
mira
aquí justamente
y es muy interesante
que tenéis
una guía
que te indica
cómo hacer
cómo crear un resource
¿veis?
aquí utiliza siempre fetch
y aquí se ve
cómo se haría un post
con fetch
tendrías que
ir a esta ruta
como puedes ver
la ruta es exactamente
la misma
para hacer un get
para recuperar
todos los recursos
que para crearlos
esto es lo típico
de una REST API
¿vale?
esta típica arquitectura
en la que la misma URL
sirve para recuperar
los datos
para borrar datos
para crear datos
y bueno
me parece muy interesante
que aquí tenéis una forma
de cómo se haría
desde
desde fetch
este post
de crear el recurso
¿vale?
así que
con axios
¿cómo lo haríamos?
pues es que
ya lo tenemos hecho
así que
ya está esto preparado
¿qué podríamos hacer?
podríamos entonces
aquí con axios
voy a hacer esto
un poquito más chiquitito
voy a hacer esto
también más chiquito
esto lo voy a quitar
porque esto no lo necesitamos
y así
creo que veremos mejor
con axios
podríamos hacer
un post
y aquí el post
como os he dicho
es la misma URL
lo importante
es la acción
que queremos hacer
sobre esa dirección
así que ahora que tenemos
el post
lo que tenemos que hacer
con axios
si miramos cómo se hacen
los post
es que tú le dices
la URL
pero también le tienes que decir
cómo quieres crear el recurso
así que aquí lo que le tenemos
que pasar
es toda la información
que queremos crear
entiendo que la idea
si miramos aquí
¿veis?
la idea
se crea sola
normalmente esto es
súper típico
la idea del recurso
en realidad
la está creando
directamente
la base de datos
el servidor
o quien sea
en este caso
nosotros solo
tenemos que decir
el título
el cuerpo
y el user ID
así que ahora mismo
por user ID
ya teníamos esto
¿veis que aquí
estábamos creando
este node
to add to state?
pues esta ID
no la vamos a crear
pero le vamos a pasar
un user ID
que sí que es necesario
¿vale?
y esta constante
que estamos aquí
para crear la nota
vamos a ponerla aquí
y este node
to add to state
se lo vamos a pasar
a axios justamente
en lugar de ponerle
aquí el objeto
le vamos a decir
el objeto que tienes
que crear
es justamente este
con el título
el body
y el user ID
y ahora
por ahora
voy a modificar
esto
voy a quitar
este set nodes
¿vale?
y vamos a ver
si esto funciona
realmente
y luego veremos
cómo opino
realmente
la respuesta
de todo esto
¿vale?
voy a abrir
las herramientas
de desarrollo
vamos a ir a
Nickwork
y vamos a ir
abajo del todo
y aquí abajo del todo
pues ponemos aquí
midu bootcamp
¿vale?
le voy a dar
enter
y ya vemos
que hemos hecho
una petición
una vez que hemos
hecho el enter
el status code
201
a ver
status code
cats
a ver si
os recomiendo
mucho esta página
para conocer
qué significa
cada status code
201
básicamente
lo que nos dice
es que ha creado
el recurso
¿vale?
aquí nos lo dice
con gatitos
pero 201
significa
todo ha ido bien
y he creado
el recurso
que me has pedido
así que
no hemos
no ha habido
ningún problema
podemos ver
con headers
podemos ver
lo que le hemos enviado
¿vale?
la información
que le hemos enviado
¿ves?
le hemos enviado
el body
el title
el user id
y la respuesta
y la respuesta
fíjate
nos está devolviendo
lo que hemos creado
y nos está devolviendo
la id
o sea
y esto es
otra forma típica
en la que funciona
en este tipo
de APIs
¿vale?
en la que nosotros
creamos
el recurso
sin la id
y nos devuelve
la información
del recurso
que hemos creado
a veces
con más campos
del que hemos usado
en este caso
la id
es algo que ha creado
el servidor
y nos lo ha devuelto
esto es súper típico
incluso hay veces
que puede haber
más campos
imagínate que
además del title
además del body
y el user id
pues solo pasándole
el user id
nos devuelve aquí
información como
el avatar del usuario
o cosas así
¿vale?
esto puede ocurrir
normalmente
lo más típico
es la id
pero que no os extrañe
si a lo mejor
creáis algo
con solo el title
y el body
y luego
te añade más cosas
por ejemplo
esto lo puedes pensar
con el tweet
creas un tweet
y lo que te devuelve
no solo es
el texto
que has creado
del tweet
no solo
tu avatar
y tal
sino que a lo mejor
el número
de me gusta
que tiene
obviamente
será cero
pero esto
te va a ayudar
justamente
a inicializar
la UI
con la información
correcta
así que
esta información
que es justo
la que nos ha devuelto
aquí tenemos
dos opciones
¿vale?
y estas
son opciones
bastante interesantes
aquí que tenemos
igual que hemos hecho
con el get
de axios
aquí
que hemos hecho
el get
y hemos hecho
.den
y tenemos la respuesta
en el post
podemos hacer lo mismo
aquí tendríamos
la respuesta
podríamos recuperar
el data
de la respuesta
y entonces
podríamos hacer
un set notes
donde tendríamos
por un lado
las notas
que teníamos antes
¿veis?
esto es muy parecido
a lo que estamos
haciendo antes
teníamos las notas
previas
y a las notas
previas
le vamos a concatenar
la nueva
¿vale?
y de esta forma
esto nos funcionaría
pero ahora
se pueden hacer
un montón de cosas
sobre esto
¿vale?
ahora lo vamos a ver
vamos a ver si esto funciona
y
pasaremos a otra cosita
venga
voy a refrescar
para que
si esto lo hemos hecho bien
desde el principio
¿veis?
aquí tenemos todas
nuestras notas
entonces aquí
pues creamos
creando
una nueva nota
le damos a crear nota
¿vale?
y veis
pues ahora
una vez que se ha creado
pues se ha añadido aquí
y esta que se ha añadido
debería tener
la ID
que nosotros hemos utilizado
lo podríamos mirar
con los componentes
con esto
podríamos inspeccionar aquí
y veis
la key
era la ID
y es la 101
que es justamente
la que nos ha devuelto
en la Nickware
la ID
es la 101
como podéis ver
esto no tiene persistencia
¿vale?
esto no tiene
ningún tipo de persistencia
¿por qué?
porque si esto
lo guardase
en una base de datos
a lo mejor lo tumbarían
y tal
pero sí que podemos ver
si se están creando
los recursos
si todo funciona bien
ya nos preocuparemos
de que haya una persistencia
real de base de datos
porque eso lo veremos
nosotros en el bootcamp
pero lo importante
es que veáis
que esto está funcionando bien
y que está ocurriendo
y tal
hay un tema aquí
que es interesante
¿vale?
y es que
aunque nosotros
estamos haciendo aquí
esto
aquí hay un impas
en el que tú
aquí
si yo añado una nota
¿veis?
se queda vacío
y entonces aparece la nota
¿vale?
veis que yo estoy escribiendo aquí
crear nota
bueno claro
esto me está devolviendo
siempre 101
pero hay un momento
en el que yo escribo
parece que no pasa nada
y entonces se crea
claro
porque como el post
es totalmente asíncrono
pues hay que tener en cuenta
que esto tarda
¿no?
una cosa que se suele hacer
este set notes
se puede hacer de forma optimista
que se llama ¿vale?
se puede hacer
antes de incluso hacer el post
añadir
esta nota que hemos creado
con una idea falsa
la podemos intentar calcular nosotros
o lo que sea
para que visualmente
el usuario lo vea
pero luego lo que hacemos
es asegurarnos
si ha funcionado o no
no sé si lo veremos en el bootcamp
pero aquí puede ser interesante
por ejemplo hacer un catch
esto lo vais a ver un montón
en Twitter
Facebook
de que vosotros hacéis un tweet
y entonces ese tweet
ocurre de repente
o sea aparece el tweet
de golpe
pero entonces hay un problema
en la red
y te dice
ah no he podido hacer el tweet
y tú te quedas
pero si yo lo había visto
o sea yo he visto claramente
ahí como
como estaba funcionando
¿no?
y esto es porque
está funcionando
de forma optimista
¿vale?
esto es lo que se dice
de forma optimista
de hecho aquí podríamos ver
un poco el tema este
de la promesa
que si no existe
pues que haga algo y tal
ahora
una buena práctica
que podemos hacer ya
y esto es súper interesante
es que como podéis ver
estamos haciendo un montón de cosas
voy a dejar esto como estaba
con el set notes dentro
estamos haciendo ya
lógica de negocio
con componentes de React
y que quiere decir esto
de lógica de negocio
y tal
la lógica de negocio
es lo que puedes hacer
en tu aplicación
sin necesidad
en realidad
de que dependa de React
por ejemplo
el que tú hagas
una nueva nota
esto o esto
esto de recuperar una nota
esto lo podrías hacer
con React
sin React
lo podrías hacer
de cualquier forma
¿vale?
entonces lo ideal
sería extraerlo
y como hemos visto
como se harían los módulos
una cosa que podrías hacer
aquí en source
podríamos por ejemplo
crear una carpeta
que se llama servicios
y aquí en servicios
podríamos escribir notes
y dentro
he creado un archivo
perdón
o sea podríamos crear
otra carpeta
aquí cada uno
podríamos hablar
de arquitectura
un montón
pero por ahora
esto sería al menos
lo mínimo
¿vale?
crear una carpeta
se llama notes
dentro de notes
podríamos tener
get all notes
¿vale?
y aquí poder crear
un archivo
donde tendríamos
esta lógica
¿no?
así que vamos a hacer
export const
y podríamos llamarle
get all notes
y esto funcionaría así
ahora aquí
esto devuelve esto
y lo que va a hacer
es
y esto es súper importante
recuperar la respuesta
pero lo único
que va a hacer esto
es devolver
la información
y esto
funcionaría así
¿vale?
quitamos esto
¿por qué?
porque aquí no tiene que pasar
nada de React
esto tiene que ser
totalmente agnóstico
a React
vamos a importar aquí
la dependencia
de axios
pero ya tenemos
como un servicio
totalmente agnóstico
a React
que lo que hace
es recuperarme
todas las notas
¿por qué es importante esto?
porque si el día de mañana
yo cambio React
esto lo puedo utilizar
en Vue
en React
en Svelte
en JavaScript Vanilla
en otra aplicación
que tenga en React Native
lo que sea
si por lo que sea
solo cambia la API
pues podría venir aquí
y cambiar este get
y poder poner aquí
pues la API que yo tenga
y ya está
¿vale?
esto podría ser una
por ahora
podríamos empezar así
esto sería
yo creo que lo más importante
que podrías hacer ahora
sería esto
¿vale?
más incluso
que veremos
que podemos hacer
custom hooks
y tal
pero esto
esto es mínimo
esto es lo básico
que tienes que hacer
si alguien te dice
que dejes así tu código
no sé
preocúpate
esto es lo mínimo
que deberías hacer
¿vale?
separar al menos
este tipo de lógica
en ficheros
totalmente aparte
así que ahora
que tienes este
get all notes
lo importante
es que sabes
que te devuelve una promesa
donde tienes
esta información
así que ahora
en lugar de hacer esto
de axios
no sé qué
no sé cantos
pues tenemos
get all notes
esto lo importamos
¿ves?
ya se ha importado
automáticamente
de servicios
notes
get all notes
y haríamos exactamente
lo mismo
porque esto devuelve
una promesa
aquí tendríamos
las notas
y ahora esto
es lo que sí
que haríamos aquí
¿vale?
esto sería parte
de
parte de React
el actualizar
el estado
el si es loading
si no es loading
así que ahora
utilizamos el notes
y ya tendríamos esto
recuperamos las notas
y una vez que tenemos esto
pues resolvemos la promesa
con las notas
y ya está
lo mismo
iría con
escribir las notas
¿no?
podríamos crear aquí
otro fichero
que sea
pues create note
¿vale?
y exactamente
exactamente lo mismo
vamos a extraer esto
lo hacemos aquí
importamos axios
que lo vamos a necesitar
export
const
create note
y
vale aquí
se me ha olvidado un igual
¿vale?
ahora lo interesante de esto
es que justamente
necesitamos más información
cuando creamos una nota
tenemos que decirle
el title
el body
y el user id
así que ahora esto
es ya
el title
el body
y el user id
y esta información
es la que usaríamos
justamente
para crear la nota
¿vale?
ahora
¿qué hacemos?
pues este set notes
no lo hacemos aquí
devolveríamos la información
una vez que la tengamos
y ahora aquí
en lugar de hacer esto
hacemos el create note
y aquí
¿qué le pasamos?
pues el note
to add to state
que tiene justamente
el title
el body
el user id
que le va a llegar aquí
para crear esto
¿vale?
y ahora aquí
hacemos un then
y ya tenemos aquí
la nueva nota
y esta nueva nota
es la que vamos a utilizar
para el set notes
y quedaría limpio
de axios
¿vale?
súper importante
que quedase totalmente
limpio de axios
sé que me estáis diciendo
que
utilizar
custom hooks
y tal
pero lo primero
que deberíais hacer
es esto
antes de un custom hook
luego un custom hook
puede utilizar
este servicio
exactamente igual
¿vale?
y ya veremos
cómo creamos custom hooks
lo veremos en el curso
así que no os preocupéis
pero
lo primero
primero
primero que deberíais hacer
antes de probaros
un custom hook
es esto ¿vale?
extraer a un servicio y tal
luego el custom hook
por supuesto
podría utilizar esto
y no habría ningún problema
luego
una vez que estáis aquí
podríais utilizar
a sync await
que iremos viendo
en el curso
podríamos ver
cómo podemos manejar
la sincronía
de diferente forma
por ahora
solo hemos visto promesas
pero a lo largo del bootcamp
vamos a ver
que aparte de promesas
que al final
son también promesas
podemos utilizar otra cosa
que se llama
async await
pero por ahora
vamos a dejar con esto
así
de esta forma
hemos creado también
tanto crear
como recuperar
aquí he puesto
este date
aquí
ahora este
new node
en lugar de data
sería new node
¿vale?
entonces
la ventaja
alguien me pregunta
la ventaja
entre fetch y axios
fetch
digamos que es
la forma más sencilla
más rápida
cero
ocupa cero
porque ya está
en el navegador
a no ser que utilices
un navegador muy antiguo
es parte de la plataforma
fetch
¿vale?
no es una dependencia
fetch
está en la API
del navegador
es parte
de la plataforma
y es la forma
más rápida
en la que puedes hacer
pues un get
o incluso un post
sin necesidad de instalar
absolutamente nada
ahora
axios
lo que tiene
es una envoltura
de lo que hace
fetch
que te permite
de una forma
quizás más sencilla
si vas haciendo
cada vez cosas
más complicadas
puedes interceptar
requests
puedes crear
por ejemplo
envolturas sobre APIs
puedes crear
un cliente
en el que siempre
esté llamando
a los mismos endpoints
puedes hacer
de forma muy sencilla
cuando haces el get
ya te lo transforma
en un JSON
claro
tienes toda
toda una envoltura
que te simplifica
mucho la API
entonces
yo
creo que es súper importante
conocer fetch
porque es parte
de la plataforma
pero cuando va creciendo
tu aplicación
normalmente
puede ser interesante
tener axios
porque te permite
crear una instancia
de una API
en la que siempre
le vas a pasar
un token
o puedes tener
todos los métodos
ya sin necesidad
de pasarle cabeceras
porque fíjate
aquí para hacer un post
que tienes que indicar
method post
pasarle el body
asegurarte que eso
pasas como un JSON
stringify
todo esto
te lo está haciendo
justamente axios
de gratis
¿vale?
entonces hay veces
que puede ser interesante
utilizar axios por esto
pero ¿qué pasa?
todo tiene un coste
¿vale?
todo tiene un coste
axios por ejemplo
pues ocupa
4,5 kilobytes
¿es la dependencia
más grande del mundo?
no
¿es la peor?
tampoco
pero Fetch
ocupa cero
¿vale?
entonces hay veces
si tienes una aplicación
que sea lo suficientemente
sencilla
igual Fetch
ya te hace
lo que necesitas
de hecho
creo que normalmente
hay gente
que utiliza
axios de una
y puede ser
que
por un lado
no sepa exactamente
lo que está haciendo
por debajo
que creo que
es
una de las mejores
formas de aprender
cosas
es saber
qué está ocurriendo
por debajo
y lo segundo
es que a lo mejor
está haciéndolo
sin ninguna necesidad
porque a lo mejor
solo hacen un
get en toda su aplicación
que podrían hacer
con un Fetch
en tres líneas
de código
entonces creo que
todo tiene su
uso
¿vale?
pero claro
si al final
tienes una API
en la que siempre
pasas el token
mira
aquí tenemos un ejemplo
¿no?
de crear una instancia
con una URL base
y tal
pues esto
con Fetch
sería mucho más complicado
todo tiene su uso
todo tiene sus ventajas
y sus desventajas
¿vale?
que eso es lo realmente
importante
entender
cuando tienes que utilizar
uno u otro
no hay una respuesta
blanco o negro
¿vale?
de utiliza siempre Fetch
o utiliza siempre Access
no
siempre
tienes que entender
cuál es la mejor herramienta
que tienes que utilizar
en tu caso
¿ok?
entonces
Cores puedes hacerlo
en Fetch
sin ningún problema
si el tema de Cores
es un problema más
de servidor
que no de
de hecho en Fetch
podrías hacer un
no Cores
que te vendría
la respuesta
de una forma opaca
pero
Funcionarte
podría funcionar
bueno mira
esto está haciendo
exactamente
lo mismo
que hemos hecho
nosotros
del Node Service
mira
en este caso
este también es uno
interesante
en el que
lo que hace
es crear un servicio
nosotros hemos creado
como más de uno
pero en su caso
esto podría ser
al final esto es
como vosotros queráis
podríais utilizar
Nodes
bueno
vamos a llamarle
index.js
y aquí podríamos
exportar
por ejemplo
podríamos exportar
el create
podríamos exportar
el get all
vale
esto también
podría funcionar
en lugar de hacerlo así
pues hacerlo
de esta forma
vale
al final esto
como podéis ver
es un poco
como vosotros
prefiráis hacerlo
y en esta
bootcamp
no nos vamos a meter
en
quería explicaros
lo de la lógica
negocio
porque me parece
bastante importante
pero
no
tampoco quiero
entrar en temas
de arquitectura
porque ya os dije
que esto iba a ser
muy desde cero
para gente
que supiese
un poco de programación
pero que
no hacía falta
tener conocimientos
avanzados
más adelante
a lo mejor en twitch
nos animamos con esto
pero esto podría ser
de otra forma
vale
tenemos
en lugar de importar
esto ya no lo necesitamos
en lugar de importar
de forma separada
podríamos tener
un solo servicio
servicios
notas
esto ya no necesitaríamos
ni esto
y tendríamos
el de create
y el de get all
pues esta podría ser
de otra forma
vale
así que
podríamos tener
create
y esto
podríamos decirle
as create note
y get all
as
get all notes
por ejemplo
y utilizar estos
en lugar de los otros
que teníamos antes
y de esta forma
lo tendríamos
en un solo archivo
ya veríamos
que esto
dependiendo
de la complejidad
que tuviese
nuestros servicios
pues podría ser
un solo archivo
separarlo unos por otros
y cosas así
vale
esta sería una forma
si
a ver
que más
que más
dice por aquí
a ver
que sea interesante
para crear
bueno
esto sí que lo hemos visto
ya
lo de los objetos
de los literales
y
yo creo
bueno
lo de los errores
sí que puede ser interesante
al final
una cosa que puede estar bien
es tener en cuenta
que
cuando tú haces
este
este get
y haces un punto den
tú puedes hacer aquí
por ejemplo
cuando creamos la nota
vale
cuando creamos la nota
aquí podríamos hacer un catch
y mirar el error
que nos está dando
por ejemplo
si yo aquí creo
una nota
sin esta información
vamos a crear
vamos a poner esto
esto debería dar un error
de algún tipo
vale
entonces vamos aquí
voy a refrescar
si yo intento crear una nota
con esta información
¿qué problema?
dice
vale
bueno
eso es el inter
si yo intento crear una nota
con esta información
¿veis?
esto está petando
me dice que title
is not defined
bueno esto
esto está petando
pero más por mi culpa
que no por
no
porque dice
title is not defined
esto es
aquí
en este create node
está intentando
extraer title
vale
voy a intentar
a ver si me peta
la API
que es lo que quiero
que me pete la API
title is not defined
otra vez
ay
es que no es esta
perdón
es que ahora lo estamos
haciendo aquí
¿vale?
que no le he puesto aquí
la información esta
que quería añadirle
he creado el create
aquí súper rápido
y no
ahora
vale
vale
vamos a ver si peta la API
no peta la API
pensaba que iba a petar la API
a ver
si
el JSON playholder
este tenía algún
mecanismo
de decir
si no me envías esto
peto
porque podríamos ver
entonces
vamos a intentar que pete
crear nota
¿veis?
me está diciendo
si, si
yo me lo he comido
con patatas
esto
solo le he pasado
el user ID
y esto funciona
igualmente
a ver
error
no
quería ver
si podía evitar
esto
bueno
si no lo que podemos hacer
es forzar el error
podríamos hacer aquí
un throw
new
error
something
something
bad
happened
¿vale?
esto es forzando el error
¿eh?
no hagáis esto en casa
¿vale?
veis que aquí me está dando un error
que dice
oye que aquí ha pasado algo
que no sé qué
no sé cuánto
una cosa que podría
aquí
bueno
claro
esto en realidad
para
podríamos hacer un
promise
reject
¿vale?
lo que estoy haciendo es forzar el error
de la API
como que ha petado de alguna forma
¿vale?
veis que aquí dice
something bad happened
¿no?
como ha pasado algún error
estoy como forzando
como si la API estuviese petando
¿vale?
solo para que veamos
lo que podríamos hacer
esto lo voy a volver a comentar
porque ya veo que la API esta
no podemos forzar el error
¿vale?
igual que hacemos un punto den
en las promesas
también puedes hacer un punto catch
como os he dicho antes
¿vale?
como os he dicho antes
en las promesas
son totalmente asíncronas
lo que al principio
tiene un estado de pendiente
en la que está haciendo
lo que tenga que hacer
para que ocurra
el poder recuperar el valor
o hacer lo que
le has dicho que haga
de forma asíncrona
primero está pendiente
y una vez que pasa
a resuelta
claro
puede haber pasado dos cosas
una que se ha resuelto
bien
¿no?
que se ha resuelto
y otra es que tiene un error
que se ha
es rechazado
¿vale?
es un reject
que se ha rechazado la promesa
así que por un lado
tendrías el punto den
donde se ha resuelto
pero por otro lado
tendrías la de
se ha rechazado
y entonces
si se ha resuelto
lo puedes resolver
con el punto den
nunca mejor dicho
resolver
y si se ha rechazado
puedes capturar el error
¿vale?
aquí tendríamos el error
y aquí podrías
capturarlo
y evitar que tu aplicación
reviente
y decir
ostras
pues ya que ha petado
voy a hacer un console
lot del error
pero podría aquí
hacer
y setear un estado
por ejemplo
vamos a tener un estado
que le vamos a llamar
set error
y aquí le voy a poner
pues
la API
ha petado
¿vale?
entonces
este set error
para que
vayas viendo
todas las partes
todas las cosas
que podemos ir haciendo
hacemos el seterror
por defecto
el seterror
obviamente es
false
o sea no tenemos
un error
vamos a poner un stream vacío
por ahora
¿vale?
si es stream vacío
es que no tenemos error
entonces
cuando peta
este seterror
pues le ponemos
la API ha petado
¿qué podemos hacer aquí?
pues de nuevo
renderizado condicional
podríamos hacer mil cosas
¿vale?
aquí error
pues aquí
si tenemos el error
pues mostramos el error
y si no
pues un stream vacío
por ejemplo
esto como
vamos a ponerlo abajo
para que lo veamos
más fácilmente
vamos para abajo
y aquí
pues si yo he intentado
crear la nota
y da un error
creamos
¿ves?
la API ha petado
de hecho
pues ya
ya esto
deberíamos
ir sabiendo
¿no?
style red
perdón
color red
está guay esto
pero
tampoco tanto
¿vale?
por CSS
con el style error
le decimos
venga error
crear nota
¿vale?
la API ha petado
porque
¡ay no!
es que no se puede utilizar
en style en línea
esto es porque yo
he ido aquí
muy de listo
el estilo en línea
tiene que ser un objeto
¿vale?
importante
no utilices estilos en línea
de hecho
luego veremos ya
cómo funciona
esto correctamente
¿vale?
crear la nota
¿veis?
pues aquí tendríamos
el error
así que
y luego
obviamente
como esto es un estado
siempre
siempre tendríamos
que limpiar
el estado
¿vale?
si antes de crear la nota
queremos limpiar el error
¿no?
pues entonces
si yo cuando ahora
le dé a crear nota
si funciona bien
no quiero
que vuelva a aparecer
pues debería limpiar
¿vale?
así que antes de crear la nota
lo limpio
y ya debería estar
o podrías limpiarlo
después de un timeout
o podríamos hacer
un use effect
para limpiar el error
podrías hacer tantas cosas
podrías hacer tantas cosas
así que
bueno
hoy no hemos visto
a sync await
porque
quería enfocarme
sobre todo
si me pongo ahí
a promise
a sync await
taoma
use effect
y tal
vamos a intentar
siempre como ir poco a poco
creando nuevo contenido
y viendo
el lenguaje
de forma iterativa
¿vale?
ya os dijimos que
vamos a intentar
poco a poco
pues ver
las cosas
de una forma más
encrechendo
¿vale?
no lanzar aquí
un montón de cosas
he intentado
que fuese
lo más
iterativa posible
¿vale?
de forma que
entendáis
lo que va ocurriendo
en cada paso
¿no?
cómo lo hemos creado
el estado
en local
pero luego
lo hemos hecho
con una API
el use effect
que ir creando
bueno
hemos seguido
el full stack
open
yo lo he estado
cambiando un poco
porque hay cosas
que me parece
que el orden
no es el correcto
pero bueno
que hemos podido
ir viendo
que todo
tiene un sentido
cuando lo vamos
montando
¿no?
que no
toma
así se hace
la API
¿no?
¿por qué
se hace así
la API?
pues porque
esto
tiene un render
infinito
¿cómo lo evito?
pues venga
aquí tiene la dependencia
¿no?
cómo lo hemos ido
haciendo de forma
totalmente
iterativa
no me ha dado tiempo
pero he ido
escuchando
con Prime
que se me iba
rejuntando gente
así que
mucha gente
todo el mundo
que me ha pagado
la hidratación
y no he utilizado
ahora sí
tenía la garganta seca
pero muchas gracias
a todos los que me han
seguido mientras
a Rubén Eno
por suscribirse
con Prime
muchas gracias
a todos los que
habéis pagado
la hidratación
que os lo agradezco
aunque yo
pues he ido a saco
a los que han sugerido
encuestas como
context or redax
cuándo usar
y por qué
eso lo he comentado
tantas veces
pero lo veremos
lo veremos
en otro
lo vamos a ver
¿vale?
vamos a ver redax
en el full stack
bootcamp
y explicaremos
cuándo uno u otro
¿vale?
más adelante
gracias andresino87
por suscribirte con Prime
muchas gracias
a Kaina Cero
por suscribirte con Prime
muchísimas gracias
el chico nube
que se ha suscrito
un mes
con el nivel 1
también
muchas gracias
Julio Burgos
por suscribirse con Prime
muchísimas gracias
a Jaime Dordio
espero no dejarme a nadie
que se ha suscrito
con Prime
y es que
claro
aquí hay tanta
tela que cortar
Sergio
Edo 33
que ha regalado
una suscripción
de la comunidad
de nivel 1
muchísimas gracias
por apoyarme
y por además
regalar
¿vale?
muy buena clase
MiduF
me voy a ver
de nuevo la clase
muy bien
os digo
todas las clases
las vais a tener
en midu.tv
así que ya sabéis
en mi youtube
ahí os podéis
registrar
os suscribís
de hecho mira
aquí tengo la última clase
que es aprendiendo
javascript y tal
en listas de reproducción
o si no
si bajáis aquí
creo que la
creo que la he puesto
no
no la he puesto todavía
vale
pues nada
lo pondré
pero si no
en listas de reproducción
tenéis aquí el
bootcamp full
está gratuito
bienvenidos
¿veis?
esta fue la primera clase
tenemos la segunda
tenemos la clase anterior
de React
donde hablamos del estado
del componente
y todo
así que
en mi canal de youtube
podéis seguir
todas las clases
que las voy a subir ahí
y ahí las podéis compartir
con gente
lo podéis hacer
la podéis revisar
tantas veces como queráis
así que ahí se queda
¿vale?
muy buen curso
qué pedazo de clase
gracias crack
gracias a vosotros
gracias Diana
grande
midu clase
como siempre
eres un crack
gracias señor
dead
esta clase la tendré
que volver a ver
pero también me miraré
la playlist
desde el curso de React
si os gustaría
aprender más de React
verlo desde otra perspectiva
con otros ejemplos
pues de nuevo
también igual
en mi canal de youtube
tenéis un curso de React
completo
que se explica
de forma más tranquila
porque son más horas
¿veis?
este curso de React
desde cero
pues tenéis una lista
ah mira
esta sí que está aquí
si bajáis aquí
tenéis el curso de React
desde cero
que son 12 horas
entonces no me ha quedado claro
el use effect
ahí lo explico de otra forma
más pausadamente
pero bueno
yo creo que
el verlo aquí
y verlo allí
pues al final
pues haces como la imagen completa
y dices
ah bueno
pues aquí
aquí lo otro
muchas gracias
a ti Marcos
muchas gracias
Midu
reforzando conocimientos
mientras cocino
que grande
que grande
y con el hambre que tengo
encima yo
Brando Vidal
grande crack
muchas gracias
¿cómo limpias el estado
del componente
cuando se desmonta?
el estado del componente
cuando se desmonta
no lo tienes que limpiar tú
lo limpia
o sea
desaparece el componente
si se está desmontando
no necesitas preocuparte
por el estado del componente
otra cosa es
limpiar efectos
que eso lo veremos
más adelante
¿vale?
gracias a vosotros
todos los
gracias por ser mi valentine
¿verdad?
es que es
agregar dependencias
a ver
en este caso
hemos visto
cómo agregar dependencias
aquí directamente
¿no?
veis aquí
esto no es una extensión
para agregar dependencias
en vuestro proyecto
sería
npm install axios
¿vale?
eso en vuestro proyecto
eso si es una dependencia
de producción
tendrías que hacer esto
npm install axios
si es una de desarrollo
tendrías que poner
guión guión
development
¿vale?
si fuese una extensión
de desarrollo
como por ejemplo
el inter
no se programar
dice que ha sido
la mejor cita
que ha tenido
en san valentín
agregar dependencias
eso lo hemos visto
muchas gracias
a todos los que
estáis súper agradecidos
os agradezco
un montón
de corazón
tu canal
es una joya
y para joya
a mi comunidad
eso sí que es una joya
pues eso
que me he saltado
Kira4489
muy buena clase
me voy a ver de nuevo
la clase
directamente
gracias a todos
los que habéis pagado
la postura
que os habéis preocupado
por mi espalda
he ido muy a saco
pero porque ya os digo
que el full stack este
pues al final
la idea es que lo repaséis
¿vale?
que le echéis un vistazo
¿alguna sugerencia
respecto a la cantidad
máxima de estados
en un componente?
al final
eso
es una muy buena pregunta
Pablo
yo diría
los mínimos posibles
como vimos
en la clase anterior
que esto lo expliqué
¿no?
de intentar
tener los mínimos posibles
intentar tener los estados
que al final
marcan la diferencia
para ti
en el sentido de que
si puedes tener
valores
que puedas calcular
que evites
tener un estado
para ello
¿vale?
y luego
más adelante
veremos
como
creo que veremos
y si no lo veremos
en algún sitio
o en mi curso de React
está
el utilizar
el reducer
para simplificar
estados muy grandes
pero
los mínimos posibles
esa sería
no hay un número mágico
los mínimos posibles
ericestro
dice
madre mía
midudev
te ruego
que cuando quieras
ejemplificar
varias cosas
a la vez
limpiemos el sandbox
porque después
está dando encima
que no creo
no es relevante
para ejemplificar
por ejemplo
el axios
bueno
ericestro
como ves
al final
el axios
sí que ha tenido
un sentido
o sea
lo he hecho
a posta
porque
por ejemplo
yo lo he dejado
aquí
para que veáis
que no debería
estar aquí
¿no?
porque hemos visto
que hemos cambiado
el fetch
al axios
y lo he hecho
todo en el componente
pero
a ver
que tampoco
si miráis
son 69 líneas
de código
que puedes decir
hostia son muchas
pero tampoco son tantas
para todo lo que hace
esto ¿no?
que es una aplicación
de notas
y tal
yo os animo
a que ahora que tenéis
esto
pues por ejemplo
este formulario
pues lo paséis
a un componente
qué problemas
puedes encontrar
cosas así
pero la gracia
de esto
de meter el axios
aquí
y ejemplificar
esto
era
veis
he creado
el fetch
al axios
pero ahora
imagínate
yo ahora
puedo crear
en lugar de
preocuparme
de axios
y todo esto
ahora aquí
es donde tengo
el axios
si yo aquí
utilizo fetch
o axios
solo lo cambiaría
aquí y no
en el componente
¿vale?
ahí está
donde estaba
un poco
la gracia
Miguel
eres una máquina
de lo mejor
que he visto
con profesor
muchas gracias
Nick Javos
muchísimas gracias
qué pedazo
de comentario
me llena
de orgullo
y satisfacción
pero lo mejor
soy vosotros
¿eh?
¿cómo limpias
un componente?
como el component
will mount
a ver
que me lo preguntáis
me estáis preguntando
mucho
pero el tema
es que aquí
en este componente
no necesitáis
limpiar nada
¿vale?
pero en el caso
de que tuvieseis
que limpiar
y para la gente
que dice
pero cómo se puede
limpiar
que no sé qué
no sé cuánto
el useEffect
tú puedes limpiar
el efecto
esto lo veremos
más adelante
¿vale?
donde esto es extra
los efectos
pueden devolver
una función
que se ejecuta
cuando justamente
se desmonta
ese componente
¿vale?
así que
si se desmontase
este componente
pues aquí podrías
ejecutar código
pero ahora
no lo veríamos
porque este
este efecto
no se desmonta
en ningún momento
a ver
podríamos
¿qué pasa?
que los efectos
además
a ver
lo podría poner
lo puedo poner
removeEffect
y voy a poner
como dependencia
que esto hemos visto
antes
el new note
¿vale?
de forma que
este efecto
se ejecuta
cada vez que cambia
el estado
del new note
voy a refrescar
aquí
y vas a ver
que esto
si yo ahora
voy para abajo
voy para abajo
y yo hago aquí
y le doy un clic
veis que
ejecuta
removeEffect
¿por qué?
porque está ejecutando
todo este código
y cuando va a volver
dice
vale
lo he renderizado
una vez que se renderiza
y detecta
un nuevo valor
al new note
lo que hace
es ejecutar
primero
esta función
y entonces
vuelve a ejecutar
el efecto
¿vale?
de hecho
mejor si pones
useEffect
y aquí ponemos
removeEffect
lo vas a ver aquí
clarísimo
ya verás
entonces
le voy a poner
Console Clear
para que se limpia
la consola
si le doy a la A
¿vale?
primero se limpia
el efecto
y luego se ejecuta
el efecto
primero se limpia
el efecto
luego se ejecuta
el efecto
esto sería lo más parecido
a lo que comenta
el component wheel mount
esto ahora
no tiene mucha utilidad
aquí
pero si aquí
tuvieses un
te añadieses
a un evento
o lo que sea
pues aquí
podrías
desuscribirte
a ese evento
aquí podrías hacer
un montón de cosas
de ese estilo
¿vale?
¿vale?
tu canal es una joya
gracias
gracias por todo
lo que aporta
gracias
sois un amor
de verdad
sois un amor
dos preguntas
¿por qué set show
y no set show?
vale
Dana Bayardi
me pregunta
creo que aquí
no tenemos este ejemplo
que me está comentando
¿vale?
pero me está preguntando
claro
me tenía que haber
cambiado
me tenía que haber
guardado mejor
el componente
que tenía antes
pero básicamente
antes teníamos
un estado
que era tal
que así
set show
¿no?
y hacía esto
¿no?
show all
y os he comentado
que aquí podéis
actualizar el estado
de las formas
¿no?
y la otra sería
así
prep show all
prep show all
a ver
estas dos formas
funcionan bien
no hay ningún problema
entre la una y la otra
a ver
lo he comentado
para que no salgan
los errores
pero estas dos formas
funcionarían bien
son diferentes
en el sentido
de que una lo haces
con una función
y utilizas el valor anterior
para justamente
actualizarlo
y esta
utilizas el valor
que tienes en ese momento
en el estado
¿qué pasa con esto?
que esto puede ser peligroso
si se queda
dentro de por ejemplo
aquí en una promesa
o lo que sea
si tú esto lo haces
aquí dentro
mira
aquí
mira
este es un buen ejemplo
este es un buen ejemplo
mira
esto es un buen ejemplo
vamos a dejarlo
como
así
tendríamos aquí
notes
vale
estas dos funciones
hacen lo mismo
pero
de forma
un poco diferente
¿por qué?
la primera
se ejecuta
con el valor
de notes
que tiene
de antes
¿vale?
este valor de notes
está aquí
entonces ¿qué pasa?
que puede ser
que cuando esta promesa
se resuelva
el valor que tenía aquí
notes
no es el que esperas
no es el que esperas
porque
esto tiene una referencia
antigua
¿vale?
este notes
es el que tienes
aquí
aquí arriba
entonces es una referencia
antigua
y puede causar problemas
¿vale?
es una mala práctica
porque tú no sabes
cuando esta promesa
se resuelva
que las notas
en realidad tengan
las últimas notas
porque como veis
el estado
se puede actualizar
un montón de formas
por ejemplo esto
lo puedes actualizar
justo después
no lo controlas
por lo tanto esto
a lo mejor
las notas
que tú crees
que tienes aquí
no son las que hay
ahora
no son las últimas
en cambio
la línea 44
sí que te aseguras
que las notas
que te llegan
por parámetro
son las últimas
que tienes
porque fíjate
esto es
un scope
nuevo
que estás creando
aquí
en un parámetro
que te va a llegar
ahí
el último valor
que tiene el estado
así que
aunque parece
que hacen lo mismo
son dos formas
diferentes
de actualizar el estado
y el valor
que tiene notes
puede ser diferente
así que
en este tema
que es asíncrono
lo ideal
sería hacer esto
esto sería lo correcto
te evitarías
problemas
posibles problemas
porque no eres capaz
de saber
si alguien
desde otro sitio
ha hecho esto
notes
pues yo que sé
actualiza aquí notes
y lo pone vacío
entonces
claro
si tú haces esto
así
cuando tú creas
aquí se ha actualizado
con notas vacías
lo intentaré
intentaré sacar un ejemplo
de que funcione
pero básicamente
es esto
aquí se actualiza
el estado
de forma
totalmente libre
luego se resuelve esto
y este notes
que tú crees
que es este nuevo valor
no
este notes
es el de antes
por eso
la forma correcta
sería asegurarte
utilizando este
entonces
yo creo que lo importante
aquí es entender
este concepto
más allá de que
a veces utilices
uno u otro
por ejemplo
aquí el set error
lo estamos haciendo a saco
porque no tiene sentido
no tiene sentido
utilizar aquí una función
cuando estamos machacando seguro
pero cuando quieres utilizar
el valor anterior del estado
puede ser buena práctica
utilizar la función
para asegurarte
que estás utilizando
justamente
el último estado
¿vale?
por eso se hace
no es que sea uno
más correcto que el otro
sino que simplemente
es diferente
y por eso
es importante
conocer cuál es la
la diferencia
entonces
claro
el toggle
que tú decías antes
pues
puede ser así
pero
esto lo que te está diciendo
es vale
el valor que tenía
en ese momento
pero claro
como a lo mejor
no es el último valor
por eso se hacía
con la función
no sé si esto te ha ayudado
Dana
espero que sí
que con esto
te haya quedado
más claro
y se pueden tener
tantos useEffect
como queráis
¿vale?
o sea aquí
tú puedes poner
mirad
useEffect
y aquí pues
creamos otro useEffect
al final
y además
cada useEffect
puede tener
dependencias diferentes
y veréis
que este es el efecto 2
y puedes tener
tantos efectos
como queráis
obviamente
como el estado
¿vale?
cuanto menos tengáis
mejor ¿no?
mejor se entienden
lo mejor es
dividir en diferentes
componentes
pero ves
useEffect
efecto 2
efecto 3
y este pues puede ejecutarse
cada vez que cambie
este puede ser aquí
este puede ser cuando
cada vez que se cambie
el new node
de esta forma
veo que solo el efecto 2
¿ves?
ahora cuando se renderiza
por primera vez
se ejecutan todos los efectos
y luego
si vamos aquí
pa pa pa pa
y yo le doy a la A
solo el efecto 2
el efecto 2
es el que se está ejecutando
porque es el que depende
del new node
cambia el valor
pues ejecuta el efecto
tantos efectos
como queráis
¿vale?
vale
¿recomiendas usar
Async Await
en vez de Promise?
lo veremos
pero en realidad
como os digo
no recomiendo
blanco o negro
o sea
Async Await
puede tener una utilidad
ideal para ciertos casos
luego el Promise
puede tener otros
yo creo que lo mejor
es conocer los dos
y creo
yo diría que
lo que es un error
es utilizar siempre
Async Await
o utilizar siempre Promise
creo que cada uno
tiene momentos ideales
en los que encajan mejor
¿vale?
o sea que
recomiendo conocer los dos
no recomiendo uno u otro
recomiendo conocer los dos
eso sería un poco
¿vale?
muy bien
pues
amigos y amigas
muchísimas gracias
de corazón
por haber asistido
al Full Staff Bootcamp
una semana más
clase 4
la semana que viene
vamos a darle
Node.js
el servidor
vamos a dar parte del servidor
vamos a ver backend
¿vale?
así que
wow
yo estoy súper emocionado
no sé por vosotros
y vosotras
pero yo
estoy emocionadísimo
ya dejamos un poquito
React
para pasar a la parte
del backend
para que esto sea realmente
Full Stack