Porque hoy vamos a hacer una prueba técnica de RIAG desde cero.
Fíjate, hoy mismo tenemos un compañero que en el chat,
en el chat, fijaos, en el chat, a ver si lo encuentro,
ahora no sé dónde lo ha puesto.
Ah, no lo encuentro. Aquí, sí, mira.
Matutito, Matutito, hoy ha tenido una prueba técnica de RIAG
y ha dicho, y ha dicho, lo ha hecho, nada, hace media hora,
o sea, hace media hora.
Dice, me citaron a las 4 por Google Meets,
me advirtieron de antemano que la entrevista
iba a ser bastante difícil y duradera.
Porque por lo menos iba a ser de una hora hasta dos horas.
Por ende, eso ya me hizo generar un poco de miedo.
La verdad, muy mal por la empresa decirte
que va a ser bastante difícil y duradera.
No hagáis eso.
Si vas a hacer entrevistas algún día,
no le metas miedo al candidato o a la candidata.
No tiene sentido meterle miedo.
Muy mal por la empresa.
Bueno, dicho esto.
Apenas me levanté, se puso a practicar,
practicó con la entrevista técnica de Midu,
la que agarraba la API, bla, bla, bla.
Y me hice después un to-do relativamente sencillo
para practicar principalmente Use Context y Use Reducer.
Todavía no lo hemos visto en el curso,
pero no os preocupéis que lo veremos en la próxima clase, de hecho.
La cosa es que empiezan la entrevista
y los dos entrevistadores, el CEO y el cofundador,
se presentan, me cuentan,
y dice que podías usar Google tanto como quisiera,
no necesitaba explicar nada,
simplemente querían que tú te pusieses a escribir y googlear,
no podías utilizar GitHub o Pilot,
podías utilizar Visual Studio Code
y hacer como siempre todo sin ninguna limitación.
Y le dieron una API y le dijeron que lo único que tenía que hacer
era hacer un fetch y renderizar en pantalla
nombre, apellido e imagen.
Ya veis.
O sea, esto es tipiquísimo.
Esto es tipiquísimo.
Esto es súper típico.
Siempre os van a pedir que hagáis un fetching de datos
en cualquier prueba técnica de React.
Hasta ahí bien, ¿vale?
Eso, seguro.
Bueno.
Por ende, mi miedo no iba a poder googlear
de que me iban a hacer crear un proyecto de React desde cero,
se desvanecieron.
Así que inicié creando un proyecto con mpncreate.v,
todo bien, me limpié todo, me creé mis componentes,
hice el fetch, rendericé lo pedido y listo, fácil.
El problema llegó cuando me pidió
que agarre los usuarios de la API
y que muestre solo los primeros 25
y que fuera renderizando los otros
a medida que iba scrolleando.
Vamos, hacer un infinity scroll.
De ahí no supe cómo hacerlo
y básicamente por esto me terminó yendo mal
porque no pude seguir después.
Vale, no vamos a hacer hoy esta prueba,
pero igual me la puedo preparar
para que la hagamos en otro momento
porque es interesante.
Esta, la verdad, me parece un poco trampa,
pero bueno, no es imposible.
Podrías usar Google.
Bueno, lo que tenía que haber hecho aquí
con el infinity scroll, lo mejor,
de hecho esto lo haremos en el curso
para que veamos cómo hacer un infinity scroll desde cero,
tenéis que utilizar el intersection observer.
Utilizáis el intersection observer
y esto lo suscribís en un use effect
y vais a ir detectando cada 2 por 3
si estás al final.
Cuando estás al final,
pues le cambias el estado a la siguiente página
y así todo el rato.
Importante, obviamente si te dejaban utilizar dependencias,
pues podrías haber buscado algún use near screen
o alguna dependencia que te permita hacer esto.
Este use near screen no será mío, ¿verdad?
Esto es mío, tío.
O sea, esto es mío.
Esto es mío.
Bueno, pero ya veis,
aquí en este caso, por ejemplo,
hace un lazy load de las imágenes
que cuando te vas acercando,
pues haces un lazy load de las imágenes.
Pero es muy típico, ¿veis?
Aquí el use near screen,
pues aquí tendrías la lógica,
aquí tendrías la lógica
que tendrías que haber hecho la prueba técnica.
Pero, sinceramente,
yo la verdad no estoy muy de acuerdo
de hacer un use near screen.
No me parece una prueba técnica para junior trainee.
No sé si era para junior trainee.
Yo en este caso no lo hubiera hecho.
O sea, me parece que saber de intersection observer
es un poco trampa, la verdad.
No me parece.
No me parece una buena prueba.
Pero bueno, eso es lo que le han pedido, ¿vale?
Que lo sepáis, solo para que lo sepáis.
Entonces, nosotros vamos a hacer una prueba
desde cero totalmente distinta, ¿vale?
Y os voy a comentar un poco
de qué va a ser la prueba.
Y está basada en una prueba
que muchas veces se hace en empresas.
Como habéis visto,
no suelen pedir mucho más
que que hagas un fetching de datos.
¿Cuál es la prueba?
La prueba, mira, la vamos a dejar por aquí.
Vamos a dejarla por aquí.
Os la voy a poner.
A ver, vamos a crear un proyecto.
A ver, ¿dónde pongo esto?
Para que lo podáis ver.
La prueba es esta de aquí, ¿vale?
Esta es la prueba que vamos a hacer hoy.
Dice prueba técnica.
Vamos a poner esto.
Prueba técnica para University of Nice.
Esto lo quitamos.
Esto por aquí.
Normalmente, en cualquier prueba técnica,
lo que te van a hacer es darte como mínimo una API.
Como mínimo.
Pero normalmente te van a dar dos.
Pueden pasar diferentes cosas.
Una, que te den más de una API.
Que te den una API,
pero que luego te pidan hacer algo extra,
como por ejemplo lo del Intersection Server,
o sea, lo del Lazy Load,
lo del Infinity Scroll.
O, por ejemplo,
hacer validación de datos y cosas así.
Y luego, lo que tendríamos seguro, seguro,
sería el fetching de datos.
O sea, fetching de datos seguro.
Seguro.
Ahora, pruebas suelen ser sencillas,
pero suelen tener bastante trampa.
Por ejemplo, en este caso tenemos
la prueba técnica para University of Nice de React
en Live Coding.
Normalmente, esto lo hacen en Live Coding.
Si te mandan una prueba,
te van a mandar algo más.
Pero cada día más están haciendo Live Coding.
Ya sea por tiempo.
A este chico le han hecho en Live Coding.
Igualmente, prepararte un Live Coding,
o sea, es vital,
porque cada vez hay más
y te va a ayudar a prepararte mejor tus pruebas.
¿Qué hay que hacer en esta prueba técnica?
Recupera un hecho aleatorio de gatos
utilizando la primera API
y muestra una imagen de un gato
con la primera palabra del hecho
que hayas recuperado
utilizando la segunda API.
Así de sencillo.
Pero alguien dirá,
joder, es muy fácil.
Ah, tiene trampa.
Tiene alguna trampa.
¿Por qué?
Porque lo primero es que con esta prueba
vas a tener que ver
si eres capaz de hacer fetching de datos,
que lo vamos a explicar,
porque en el curso todavía no lo hemos explicado,
hoy lo vamos a hacer.
Pero es que además
vas a tener que manejar dos estados
que uno depende del otro.
Y ahí es donde está la trampa.
Y ahí es justamente
donde se demuestra
si una persona sabe utilizar
al menos mínimamente React.
Porque cuando tú utilizas un solo estado
es bastante sencillo.
Pero en todas las pruebas técnicas
te van a pedir que manejes dos estados.
Y normalmente,
que un estado dependa del otro.
Fíjate en el ejemplo del Discord de este chico.
Fijaos.
Aunque es con un Infinity Scroll,
lo que ha hecho,
lo que ha hecho,
es que tenía que hacer primero
una API,
un estado,
pero luego le pedían
un segundo estado.
Esto en todas las pruebas técnicas
siempre, siempre, siempre lo van a hacer.
Dos estados.
Y uno depende del otro.
Puede ser con dos fetching de datos,
puede ser con un fetching de datos
y luego tener que hacer algo el usuario,
lo que sea.
Pero lo van a hacer a saco.
Entonces,
la prueba esta es un poco similar
a la que ya tenemos en YouTube,
pero hoy, además,
te voy a explicar buenas prácticas.
O sea,
la voy a hacer yo
y te voy a explicar
cómo la resolvería yo desde cero,
desde el principio,
cómo la iría haciendo en incrementos,
la iría mejorando
y además te voy a explicar
cómo hacer custom hooks.
O sea,
vamos a hacer la prueba técnica
y vamos a seguir con el curso de React
donde vamos a ver
cómo hacer fetching de datos,
cómo hacer un custom hook,
por qué es importante
hacer un custom hook,
qué buenas prácticas puedes seguir
e incluso vamos a hacer
testing end-to-end.
¿Por qué?
Porque al finalizar nuestras pruebas
muchas veces te van a preguntar
la pregunta trampa
¿y ahora qué harías?
Y mucha gente se equivoca aquí
porque dice
ahora le pondría estilos,
ahora,
yo qué sé,
ahora añadiría nuevas features,
ahora,
no sé,
tonterías,
no.
Si tienes más tiempo,
lo primero que tienes que decir
es que harías el test
más importante
que puedes hacer en tu aplicación
y el test más importante
que le puedes hacer a tu aplicación
es un test end-to-end.
Si tuvieses tiempo
de hacer un solo test,
un end-to-end
y lo vamos a hacer,
¿vale?
Lo vamos a hacer con Playwright
para que veáis
cómo lo tenéis que hacer.
Y entonces esto sería
pues la prueba,
la prueba redonda,
la prueba redonda,
¿ok?
¿Tú que eres un tío
tan trabajado en normal
que una empresa
me queda contratado
con desarrolladores freelance
en vez de contratarme ellos?
Hombre, depende,
depende de muchas cosas.
Eso es bastante complejo.
A veces sí,
a veces no.
Depende de que vivas ahí cerca,
de que sea externa,
lo que sea.
Sos un puto genio,
te amo,
gracias por todo lo que nos enseñas.
Nada,
un placer,
amigos.
Así que,
ya veis,
prueba técnica
de Junior Trainee,
dos estados,
uno que depende del otro.
Ahí os voy a contar
trampas,
cosas que tenéis que tener
en cuenta
en las pruebas técnicas estas,
¿vale?
Porque al final,
si sos prolijo en estado,
no debe ser difícil esa prueba.
No,
pero claro,
es que para ser prolijo
tienes que ser,
por eso es de Junior Trainee,
¿no?
O sea,
tiene su cosa.
Más adelante,
haremos otras pruebas
un poquito más complicadas.
Así que,
vamos a ir encrechendo.
Vale,
hay un problema importante
con esta prueba.
Y os voy a explicar,
para empezar ya.
A este chico,
parece ser que le han dejado
utilizar VIT
para crear su proyecto
desde cero.
O sea,
puede utilizar
NPM,
Create,
VIT,
¿vale?
Puedes utilizar esto,
tú lo puedes hacer
como tú quieras,
si sabes Webpack,
si quieres hacerlo
con Career Rackup,
con Next.js.
Y muchas veces,
pues,
React,
prueba técnica,
¿no?
Pues haces esto
y aquí te dejan
utilizar React.
Vale.
Ojo con esto.
Hay muchas empresas
y entre ellas,
la última
en la que yo trabajaba,
que no te dejan hacer esto.
No te dejan,
te dicen,
puedes googlear
lo que quieras,
puedes buscar documentación,
puedes hacer lo que quieras,
pero no puedes inicializar
un template
que ya esté hecho
con React.
Y entonces,
te dan diferentes opciones,
como por ejemplo,
que tú instales
lo mínimo de VIT
y tú lo configures.
Ojo,
cuidado con eso.
¿Por qué?
Porque lo que dicen,
mucha gente lo que dice,
es que para saber React
tienes que ser capaz
de inicializar
tú mismo el proyecto.
Yo lo voy a hacer así,
porque,
para que lo aprendas,
para que lo tengas
ahí en mente siempre,
pero si te dejan,
oye,
buenísimo,
acuérdate de aquí,
elegir simplemente React
y ya está.
Pero yo lo voy a hacer
con Vanilla
para que lo veas
cómo lo harías
desde cero
con VIT.
¿Vale?
Para que veas
cómo pasamos un proyecto
que es Vanilla
a React.
Y nosotros ponemos
el punto de entrada.
Es súper importante,
son tres líneas de código,
no hay mucho.
No pierdas una oportunidad
por no saber
tres líneas de código.
De verdad,
yo lo voy a hacer
para que lo veas,
¿vale?
Pero hay empresas
que no te van a dejar
utilizar Quereo de Acab
porque te van a decir,
ah, no,
es que eso ya te viene
con el punto de entrada,
quiero que tú crees
el punto de entrada
porque eso es básico.
Y te lo van a decir
y conozco muchas empresas,
entonces yo te lo explico
y tú haz lo que tú quieras.
Pero lo hacemos así,
¿vale?
Vamos a utilizar,
en este caso,
voy a utilizar yo VIT,
pero lo vamos a ir configurando
paso a paso,
¿vale?
Así que yo le pongo Vanilla,
utiliza React si quieres,
le ponemos el JavaScript.
Yo aquí,
yo aquí si utilizamos VIT,
yo sé que le diría,
oye,
ya existe un plugin,
igual que me instalaría
un plugin como Babel
para Webpack,
ya existe un plugin de VIT
que te permite hacerlo,
no te van a dar problema
en este punto
porque ellos lo que quieren
es ver cómo creas
el punto de entrada
de la aplicación.
Así que el plugin
sí que te van a dejar,
seguro,
seguro.
Y si no,
ya más difícil todavía.
Pero a ver,
yo creo que sí,
aquí sí que te van a dejar.
El plugin al final
tú vas a tener que crear
la configuración,
o sea que instalamos
el plugin de React
¿vale?
Con la "-e",
para que tenga la versión exacta.
Vamos a abrir este proyectito
por aquí.
Ya tenemos nuestro proyecto,
se ha iniciado,
ya hemos visto muchas veces
como ha iniciado un proyecto
en VIT,
así que no vamos a explicar.
Pero lo más interesante aquí
es que cuando vayamos
al package.json
no tenemos React.
Así que ya aquí
lo que quieren ver es,
oye,
pero ¿sabes qué dependencias
hay que instalar,
¿verdad?
¡Hombre!
En PM install
lo que hay que instalar
son dos dependencias,
React y React DOM.
Una que es la que tiene
los bindings con el navegador
y otra que es la biblioteca de RIA
que es la que tiene
el useState y todo esto.
Así que ya tenemos esto.
Ahora,
vamos a crear nuestra configuración
de VIT.
Esto no es muy difícil
porque al final
lo puedes,
como te dejan mirar
en la configuración,
o sea,
te dejan mirar documentación
normalmente,
no vas a tener ningún problema.
Pero no hace falta
de toda esa parte de memoria,
esto lo podrías revisar,
pero tienes que saber exactamente
dónde buscarías
esta información.
Eso sí, ¿vale?
Aquí es tan fácil
como definir la configuración,
importar el plugin
que acabamos de importar,
le decimos el VIT
plugin React,
¿vale?
Exportamos por defecto
el define config,
define config,
y aquí en plugins
simplemente utilizamos
el de React,
¿vale?
Que es el que hemos importado.
Ya está,
no tienes que hacer más.
Ahora,
igual te dejan
inicializar la configuración,
igual te dejan,
pero aún así
no está de mal
que entiendas
cómo hacer esto
y que lo tengas
un poco interiorizado,
¿vale?
Que simplemente
define config,
esto lo puedes hacer aquí,
mira,
con el control así,
¿ves que tienes un autocomplete?
Pues ya tienes aquí plugins.
En plugins,
si le quitas
el copilot
vas a ver que tienes
que utilizar React,
aquí no vas a tener
autocomplete,
ah, sí, mira,
tenemos aquí React,
ojo,
pues si queda
y autocomplete,
no está mal,
no está mal.
Ahora,
que lo quieres hacer
sin plugins,
es un poco más difícil
hacerlo sin plugins,
pero si lo quieres hacer,
te puedes ir
básicamente al
bit.js
plugin React
y verlo,
mucho más difícil,
nadie te lo va a pedir,
así que no te preocupes.
No quieren ver esto,
lo que quieren ver
es si puedes hacer
el punto de entrada
de tu aplicación.
¿Y qué es el punto
de entrada
de tu aplicación?
Vale,
cuando iniciamos
nuestro proyecto de bit,
fíjate que tenemos aquí
un index.html
y el main.js.
En el index.html
es que esto
te lo van a preguntar,
te van a decir,
oye,
¿y por qué está importante?
¿Y por qué es este archivo
y no otro?
Pues le tienes que decir,
oye,
es que en el index.html
yo tengo un script
que es el que estoy cargando
al principio
en mi página web,
que es este main.js
y este main.js
es el punto de entrada
de mi aplicación
y por lo tanto
te dirán,
vale,
¿y cómo es el punto
de entrada
de tu aplicación?
¿Cómo inicias
una aplicación con React?
Y le dirías,
muy fácil,
como este es el primer archivo
que se va a cargar
en mi aplicación,
lo primero que voy a hacer
es importar
del React DOM
el create root.
Así que de react.dom
barra client
me traigo el create root.
El create root
lo que tengo que hacer
es traerme
con create root
me hago un document.getElementById
donde quiero renderizar
mi aplicación
y entonces mirando
el index.html
tengo este div
con el id app.
Aquí dentro
es donde quiero renderizar
mi app de React.
¿Vale?
Ahí lo tenemos.
Por lo tanto,
vale,
createElementById
pues le decimos aquí
la app
y este root
dentro de este root
es donde voy a querer renderizar
mi aplicación.
así que hago un root
punto render
y aquí tenemos
el h1
hello world.
Ya está.
Son tres líneas.
Son tres líneas.
Lo puedes hacer incluso más corto.
Pero esto lo tienes que entender
y lo tienes
tienes que ser capaz
de expresarlo
y explicarlo.
Luego,
también voy a hacer una cosa.
Hay errores
que sé que van a ocurrir.
¿Vale?
Hay errores
que sé que van a ocurrir.
Por ejemplo,
hay un error ahora
que os va a pasar
y que también está bien
que sepáis explicar.
¿Vale?
Así que vamos a echarle un vistazo.
Si yo esto lo dejo tal cual
y ya tengo mi aplicación.
Yo con esto
ya tengo mi aplicación.
Perfecto.
O sea,
mpn run dev
pam
mpn run dev
vale
y falla, ¿no?
O sea, pone aquí
root punto render
hello
no sé qué
no sé cuántos.
¿Qué es lo que pasa aquí?
Pues lo que está pasando aquí
es que este JSX
este
oye, ¿funciona?
Que dice que se cortó.
¿Qué se cortó?
¿Hola?
¿Estáis ahí?
Buena gente,
esto se hubiera canal de YouTube.
Joder, cuántas veces ha preguntado.
No sabe transpilarlo.
JSX
¿Vale?
¿Funciona?
Sí, sí, se ve bien.
Vale, vale.
Todo bien.
Vale, vale.
Que había dicho dos personas
que se habían cortado.
Vale.
Bueno, pues esta sintaxe de JSX
no está activada.
No pasa nada.
¿Qué pasa?
Que tenemos que entender
que en bit
los archivos que tienen extensión .js
no están preparados
para funcionar con JSX.
Y lo explicamos.
Le dicen,
mira, tenemos que cambiar esto
a JSX
porque si no,
no es capaz de transpilar el código.
No está preparado
el plugin de bit
que hemos instalado.
Y además tenemos que cambiar
el index.html
porque ahora queremos importar
como punto de entrada
main.jsx.
Ya está.
Hacemos estos dos cambios
y ahora sí,
ya tendríamos nuestra aplicación.
Se la levantamos otra vez.
Pues aquí tenemos el 51.73.
¡Hala!
Ya hemos empezado
con nuestra aplicación.
Ya tenemos aquí.
Ya hemos entendido
el punto de entrada
de nuestra aplicación
y lo hemos hecho desde cero.
Hay veces
que no os hacen
escribirlo vosotros
pero os van a preguntar
oye, un momento,
¿por qué?
O sea,
lo van a preguntar
aunque no lo escribáis, ¿vale?
O sea,
que es súper importante esto.
Vale.
Ahora que ya tenemos esto
vamos a...
vamos con un poquito
con una cosa
básica
que no se te puede olvidar jamás.
No lo hagas.
No sigas.
Una vez que has hecho esto
lo que tienes que hacer
primero
tienes que evitar
que tu página
esté en blanco.
Vale.
Ya lo hemos conseguido.
La página en blanco
lo que quiere decir
es que no estás enseñando
ningún progreso.
Pero cuando lo consigas
oye,
paras un momento
y lo que haces es
instalar el linter.
No sigas una prueba
sin instalar el linter.
El linter te va a ayudar
infinito.
Es buenísimo
que tú pares un momento
y digas
oye,
NPM install
yo utilizo estándar.
Utiliza lo que a ti te dé la gana.
Si quieres utilizar estándar
pues estándar.
Lo que tú quieras.
Pero el linter
que no se te olvide
no hagas una prueba técnica
sin linter
porque te vas a poner
a poner espacios raros
a poner un montón
no a lo hagas
o a utilizar constantes
que no uses
no lo hagas.
Utiliza el linter
que tú quieras
el de Airbnb
que yo lo odio
el que tú quieras.
Yo ya sabéis
que me encanta este
y es súper fácil
súper fácil.
Sea cual sea
el que queráis utilizar
tenéis que saber
configurarlo rápido
y sin titubeos.
¿Vale?
Para no perder tiempo
en esto.
Ya está.
Yo ya he hecho esto
he instalado
de MPM install
he puesto tres líneas
yo ya tengo mi editor
configurado perfectamente
y ya está
ya tengo el linter
ya tengo el linter
y lo tengo en todos sitios.
Así que esto
que no se os olvide.
¿Ok?
Porque veo mucha gente
que esto no lo hace
y luego lo pasan fatal.
Vamos con nuestra primera versión
de la aplicación.
Vamos a poner aquí
voy a poner en el Ritmi
si os parece
a ver
tenía por aquí
voy a poner
la descripción
de la prueba técnica
en el Ritmi.
¿Vale?
Prueba técnica
recupera un hecho
aleatorio de gatos
de la primera API
y muestra una imagen
con la gato
en la primera palabra
del hecho
recuperado
usando la segunda API.
¿Vale?
O sea
hay que utilizar
las dos APIs.
Muy bien
pues venga
vamos con ello
vamos con ello
ponemos esto por aquí
esto es lo que tenemos
que hacer en nuestra
prueba técnica.
Lo que yo te recomiendo
es que el punto
de entrada de la aplicación
ya lo dejes tranquilo
y no lo vuelvas a ver
nunca más.
Entonces ya te creas
una carpeta
puede ser source
puede ser lo que tú quieras
y aquí pues tienes
tu app.jsx
y ahí empezamos a tirar
para empezar a construir
nuestra aplicación.
Lo que te decía
es súper importante
que conforme vas programando
se vaya viendo algo.
¿Por qué?
Porque así da la sensación
de que realmente
estás avanzando.
Esto parece una tontería
lo que estoy diciendo
pero es mucho más importante
de lo que parece
y hay mucha gente
que falla
porque lo que hace
es que hasta que no está
al final de la prueba
no se ve nada.
Así que tenedlo en cuenta.
Vamos a importar
nuestra aplicación
¿Vale?
Import app
vamos a hacer aquí
export function app
¿Vale?
Return
y aquí tenemos
app de gatitos.
¿Vale?
Siempre, siempre
incremental
o sea ya tenemos
aquí esto
pues vamos a traernos
a ver
el source
source
app.jsx
¿Vale?
Pues ya
estamos
renderizando
nuestra aplicación
¿Ok?
Venga
app de gatitos
Venga
Ahora
¿Qué es lo primero
que tendríamos que hacer?
Tendríamos que mentalmente
separar
la prueba técnica
en pequeños trocitos
¿Por qué?
Ya sabemos que
recupera un hecho aleatorio
de gatos
de la primera API
Esto parece una cosa
¡Pum!
Y dice
y muestra una imagen
de un gato
con la primera palabra
¿Vale?
Pues antes de
mostrar una imagen
tenemos que
recuperar
la primera palabra
del hecho
¿Vale?
Y luego
muestra
una imagen
de un gato
con la primera palabra
Entonces ya
lo podemos separar
en tres hitos
¿Vale?
Luego te vas a dar cuenta
de otra cosa
Normalmente
lo que hacen
las empresas
es que
la prueba técnica
es bastante sencilla
porque no te preocupes
cuando terminemos
la prueba técnica
vamos a tener
que nos van a empezar
a decir
a preguntar cosas
nos van a decir
oye
haz esto
haz lo otro
y lo vamos a hacer
¿Vale?
Pero lo importante
aquí
es que
ya lo hemos separado
mentalmente en tres cosas
como en tres hitos
que tenemos que conseguir
y el primero
obviamente
es recuperar
un hecho aleatorio
y ese hecho aleatorio
vamos a enseñarlo
¿Vale?
No vamos a
recuperar la imagen
y entonces lo enseñaremos
vamos a hacerle
que vean
que estamos
de forma incremental
haciendo la prueba
así que
vamos a utilizar
el user state
para tener un estado
en nuestra aplicación
vamos a tener aquí
el hecho
y el set fact
¿No?
Ahora
lo que podríamos hacer
es decir
bueno
vamos a poner aquí
un lorem
ipsum
cat fact
whatever
fíjate
lo que te digo
incremental
incremental
incremental
porque si vas dando
pasos pequeñitos
esto te va a ayudar
un montón
justamente
a que vayas construyendo
con más seguridad
así que venga
ya primero
renderizamos esto
además son cosas
que necesitamos
vale
la de gatito
ya tenemos el lorem
ya estamos enseñando algo
no es obviamente
lo que todavía necesitamos
tenemos que hacer
un fetching de datos
un fetching de datos
ya vimos en la anterior clase
que podíamos utilizar
el use effect
para administrar eventos
y todo esto
pero una de las cosas
más importantes
del use effect
es utilizarlo
para hacer fetching de datos
aunque más adelante
veremos que hay otras formas
mucho más potentes
la forma más básica
es utilizar un efecto
así que
para hacer un fetching de datos
no lo podemos hacer aquí
no podemos hacer un fetch
y aquí
hacer esto
y luego aquí
papapá
¿por qué?
porque esto
se ejecuta
cada vez que se renderiza
nuestro componente
así que cada vez
que ejecutásemos esto
por ejemplo
si nosotros cambiamos esto
cada vez que se renderiza esto
al cambiar el estado
haríamos un loop infinito
no estamos controlando
el flujo de renderizado
de nuestra aplicación
así que esto
está prohibido
y esto muchas veces
muchos juniors
hacen esto
se vuelven locos
se empiezan a hacer
una wait
importantísimo
use effect
¿vale?
así que utilizamos
el use effect
¿para qué?
para decirle
que la primera vez
que se va a montar
nuestro componente
por lo tanto
array de dependencias vacío
vamos a hacer
el fetching de datos
y vamos a hacer
el fetching de datos
con la API
que nos han pasado aquí
que es justamente esta
¿vale?
ahora
esto
fácil ¿no?
des
la respuesta
la transformamos
en json
si utilizas axios
no necesitarás
hacer esto
yo te recomiendo
que sepas utilizar
fetch
porque también
por desgracia
hay empresas
que te pueden decir
no puedes instalar
dependencias
que te faciliten
el renderizar
o sea
que por ejemplo
no puedes usar
react query
no puedes usar
swr
no puedes usar
axios
apolo
yo que sé
¿por qué dicen esto?
porque muchas veces
las empresas
uno
no utilizan
ninguna de esas tecnologías
y no les interesa
un pepino
dos
en realidad quieren ver
si eres capaz
si has entendido
de una forma más básica
porque es más básico
o sea
el fetch es más básico
que react query
el fetch es más básico
que axios
lo que quieren ver
es realmente
si tu conocimiento
ha ido de básico
hacia arriba
o sea
si has construido
sobre la base
o lo que has hecho
es saltarte
algunos escalones
y has ido directamente
a algo que
te abstrae
de la base
una persona
que sabe las bases
va a crecer
mucho mejor
que una persona
que se ha saltado
tres peldaños
y directamente
está aquí
porque cuando tenga problemas
si cambia la tecnología
o lo que sea
su conocimiento
le va a costar más
y las empresas
normalmente esto
lo valoran
no todas
solo te lo digo
para que lo sepas
pero sí que me he encontrado
muchas veces
que hay gente
que a lo mejor
no sabe usar un fetch
y solo sabe hacer
la petición
utilizando una librería
en concreto
bueno
el fetch
es la forma más básica
entonces no está de más
que como es básico
lo aprendas
porque se aprende
en un momento
ya ves que son tres líneas
de código
yo me aconsejo
otra persona
os puede decir otra cosa
yo os aconsejo esto
y que queréis utilizar axios
oye perfecto
pero imagínate
que no te dejan
pues mira
mejor
mejor
por si las moscas
luego
una vez que tenemos
un fetch
devuelve una promesa
cuando resolvemos la promesa
tenemos la respuesta
pero tengo la respuesta
que todavía no hemos transformado
a json
ya sabemos
que esta api
devuelve un json
¿cómo lo sabemos?
porque tenemos que hacer
otra cosa bastante importante
cuando tengamos el readme
con las dos apis
importante
lo primero que vamos a hacer
no es ponernos a codear
como locos
¿vale?
primero vamos a entender el problema
lo vamos a leer bien
lo vamos a separar
y vamos a acceder también
a las apis
vamos a echarle un vistazo
para saber exactamente
qué es lo que hacen
hay veces que os dan la api directamente
por ejemplo
aquí me han dado la api directamente
y ya me dan el json
pero hay otras veces
que os dan la documentación
o sea os dicen
yo que sé
os dicen mira
de esta documentación
de esta documentación
os dicen
entra en esta documentación
y busca
un endpoint
que te permita
recuperar
una imagen
y esto
te lo van a decir
porque lo que quieren ver
es cómo escaneas
la información
y cómo te buscan
la vida con una documentación
así que lo primero que hacemos
antes de ponernos a codear
como locos
especialmente con la primera api
que va a ser la más importante
es entrar en la documentación
y asegurarnos
que entendemos
exactamente
cuál es el endpoint
que necesitamos
en este caso
imagínate que me hubieran puesto esto
vale
me pone esto
y macharrando
me dice
busca la api
que te dé justamente esto
vale
pues aquí buscaría
vale
cuál me da la imagen
bueno pues buscaríamos
vale
aquí parece que este
tiene buena pinta
cat6
y se le puede pasar el texto
pues podríamos ver un ejemplo
vemos aquí el ejemplo
esto nos da la imagen directamente
imagínate que no hay una
que te da la imagen
que hay una que te da el json
vale
aquí veríamos que hay una
que te da el json
porque pasándole el json true
le da
te da el json
bueno pues ya empezaría a decir
vale pues aquí cat6
no sé qué
le paso el texto
aquí le puedo pasar
query params
vamos a utilizar esta
y en esta le vamos a pasar
que el json es true
y una vez que tenemos
la api
que sabemos que es la correcta
nos la copiamos
y decimos
vale pues esta
esta api
para usar
o endpoint
mejor
endpoint para usar
y lo ponemos así
vale
para que no se nos olvide
como en este momento
lo tenemos fresco
para que no se nos olvide
también está bien
que ya directamente
lo pongáis como un template string
y digáis
lo que tenéis que cambiar
por ejemplo
aquí tendría que ser
first word
y ya está
porque aquí va la primera palabra
y ya está
ya lo dejáis así
y podéis o dejarlo así
o ponerlo ya en una constante
también
lo dejáis aquí
ya ponéis
api
o cat
endpoint
image
url
vale
lo dejáis aquí
y luego lo podéis seguir
pero al menos
que tengáis claro el endpoint
porque si no
os ponéis a programar
no sabéis exactamente
cómo funciona la api
y la
o sea
la liáis pardísima
esto lo he visto 80.000 veces
que decís
ostras
me pongo a hacer el fetch
y todavía no sé
ni lo que devuelve
ni lo que hace
ni nada de esto
vale
así que tenedlo en cuenta
vale
entonces
lo dejamos ahí en la constante
luego más adelante lo veremos
lo mismo aquí con la
con este
esta constante
también la vamos a poner por aquí
cat
endpoint
random fact
vale
la ponemos por aquí
y ya la podemos utilizar
vale
la utilizamos aquí
guardamos aquí los cambios
y al menos aquí
ya tendríamos
el set state
de nuestra
nuestro data
punto fact
si miramos aquí
la api
vamos a ver la api
que tenemos aquí
tenemos el punto fact
y es justamente
este texto
el que necesitamos
así que
data
nos devuelve
todo este objeto
vale
todo este objeto
que tenemos aquí
nos lo devuelve
data
y en data
accedemos al punto fact
que tenemos aquí
vale
vale
pues con esto ya hemos hecho
el primer fetching de datos
utilizando el use effect
y esto es súper importante
uno
por ninguna razón
por ninguna razón
tenéis que
olvidaros de esto
las dependencias
de hecho voy a dar un consejo
cuando escribáis el use effect
por primera vez
vale
use effect
lo que tenéis que hacer
es
hacer esto
primero escribís el array vacío
y luego escribís la función
es
esto es súper importante
que lo tengáis mentalizado
vale
porque
si estáis nerviosos
si os pasa lo que os pasa
lo que sea
una cosa que os va a ocurrir
es que se os puede olvidar esto
si se os olvida esto
la habéis liado parda
¿por qué?
porque vais a tener loop infinito
se os va a quedar bloqueada la máquina
seguramente
se os va a calentar el ordenador
os vais a poner muy nerviosos
el ventilador va a estar ahí on fire
y la vais a liar
yo os recomiendo
que
antes de nada
lo que hagáis con el use effect
es que pongáis
las dependencias
lo primero
¿vale?
y luego que pongáis esto
si esto lo hacéis
como una forma
normal
¿sabes?
lo automatizáis
aunque estéis nerviosos
lo vais a hacer
porque os vais a acordar
de
vamos
os vais a acordar
fijo
os vais a acordar fijo
en el inter
nos dice esto
en el inter
nos dice
nos va a decir
aquí en el inter
nos va a decir
si utilizáis
si no tenéis dependencias
¿sabes?
si tú te olvidas esto
el inter
no se queja nada
así que
este es mi consejo
para que no se os olvide
porque esto es otro error
que he visto
y que la gente aquí
se cae abajo
porque no tiene
no sabe qué está pasando
porque
y entonces
es que es normal
que se te olvide
me he olvidado
mil millones de veces
una vez que ya tenemos esto
tenemos el efecto
hacemos el fetching de datos
cambiamos la respuesta a JSON
lo guardamos en el estado
y nos aseguramos
que este efecto
solo se ejecuta
la primera vez
que se renderiza
nuestro componente
¿no?
se renderiza
solo la primera vez
bueno
pues con esto
si guardamos los cambios
y vamos por aquí
¿vale?
vemos que no tenemos nada
empezamos bien
vamos a ver
ah
first word
vale
porque aquí
este first word
que he puesto aquí
esto
lo tenemos que poner
con un comentario
¿vale?
venga
vamos aquí
vale
pues ya tenemos aquí
kittens
remind
with
o sea ya tenemos aquí
un hecho
curiosidad
de los gatos
vamos a quitar ahora
el valor inicial
que teníamos aquí
lo puedes dejar vacío
para que esté undefined
yo te recomiendo
que no se muestre
directamente esto
¿vale?
¿por qué?
porque aquí
al menos
van a empezar a ver
que aquí
ya dominas
el renderizado
condicional
¿vale?
más adelante
si tuvieses tiempo
harías otras cosas
pero al menos aquí
ya se van a dar cuenta
de ah mira
pues sabe hacer
renderizado condicional
o sea al menos ya tal
o sea que
al menos empiezas a
mostrar algo
de lo que sabes
vale ya tenemos
la cita
¿no?
hasta aquí
el random
ahora ya tenemos
un hito
ya lo hemos enseñado
estamos mostrando
información
ya saben
que sabemos
qué es el estado
sabemos hacer
peticiones de datos
con fetch
utilizar el use effect
hasta aquí
va la cosa
bastante bien
pero todavía
nos queda
más de la mitad
y ya veremos
qué más
a ver
os leo un momento
en el chat
para ver si hay alguna duda
antes de continuar
¿qué opinas de crear
el proyecto de coger
en nexies?
me parece perfecto
en caso del fetch
cuando solo quieres hacer
un fetch
apenas se ha renderizado
la página
después nunca más
pues aquí por ejemplo
el use effect
tú tú tú
¿qué más?
¿qué más me comentáis?
para mí tienes que pasarle
la dependencia
de setFact
ya que está dentro
del componente
este setFact
este de aquí
no es necesario
porque el setFact
no se vuelve a regenerar
o sea el setFact
este de aquí
este
¿cuándo se tienen que poner
aquí dependencias?
aquí se tienen que poner
dependencias
dependencias
que pueden cambiar
y el setFact
no debería
no es una de ellas
la puedes poner si quieres
pero no es una de ellas
no debería cambiar
el setFact
siempre va a ser el mismo
porque el useState
devuelve
siempre el mismo setFact
otra cosa
es que utilices dentro
el fact
si tú pones esto
por decir algo
¿vale?
entonces sí que sería importante
porque el fact
sí que puede cambiar su valor
pero el setFact
no debería cambiar nunca
o sea
siempre debería ser
la misma
el linter de Webpack
si te pide dependencias
en el array
el linter
el linter no es de Webpack
será un linter que instales
¿por qué un useEffect
tiene esas dependencias?
porque como vimos
en la clase anterior
al useEffect
le tenemos que decir
cuándo el efecto
se tiene que renderizar
o sea
cuándo se tiene que ejecutar
y aquí en las dependencias
le tenemos que decir
cada vez que cambien
esas dependencias
se ejecutará el efecto
por defecto
aquí sería
cada vez que se renderiza
el componente
se ejecuta el efecto
esto sería
solo la primera vez
y si pusiéramos
setFact por ejemplo
sería
la primera vez
que se renderiza
el componente
y cada vez
que el valor
de setFact
cambie
entonces a veces
es interesante
obviamente
vale
en qué caso
se usa un useEffect
sin declaración
de dependencias
o sea
sin
esto
cada vez
que queremos
cada vez
que se renderiza
el componente
quiero que se ejecute
esto puede ser
interesante
por ejemplo
para
para tracking
o para
para hacer cambios
en la UI
utilizando el DOM
para recuperar un elemento
lo que ocupa
cosas así
si piden el fetch
con async await
si piden el fetch
con async await
que es raro
yo le diría
aquí no podéis utilizar
async await
o sea
no podéis hacer esto
vale
esto
esto no funciona
el useEffect
siempre
siempre tiene que ser
tiene que ser
con
por cierto una cosa
porque veo que no me está pillando
aquí no se le puede poner async
porque el efecto
siempre tiene que ser
una función síncrona
lo que podéis hacer
en todo caso
sería envolverlo
podéis poner async
function
get
random
fact
yo os recomiendo
una cosa
normalmente
y esto lo podéis hacer
aquí
random fact
y aquí
esto ya lo podéis transformar
en un await
podéis hacer res
await
fetch
luego esto
const
el json
await
tal
y aquí
setfax
json data
lo cierto
es que la sync await
suele ser
más código
aunque sea un poquito
más simple
ay mira
ves
que está haciendo esto
porque se me ha olvidado
lo de las dependencias
que os he dicho antes
veis
ahí podéis ver
que se ejecuta
constantemente
cada vez que se renderiza
como cada vez
que cambias el estado
se vuelve a renderizar
lo que está ocurriendo
es que hay un loop infinito
vale
para manejar el error
en caso de que la API falle
como se haría
o no es necesario
eso lo comentamos después
vale
que hiciste después
de instalar el estándar
que se me cortó
pues todo lo demás
puedo usar un objeto
como dependencia
cuando cambia una prop
se puede utilizar
sin problemas
puedo poner fact
debería un bucle infinito
o no
claro
si yo le pongo fact
aquí pues tendríamos
un loop infinito
efectivamente
porque como fact cambia
le estamos diciendo
cada vez que fact cambie
ejecuta este efecto
bueno
pues aquí tienes
un loop infinito
cada vez que
como cada vez que se ejecuta
esto cambia fact
pues ahí tienes
tu loop infinito
ay no
claro
por el loop infinito
seguramente me han
ves
por esto también es súper importante
seguramente me han baneo
ahora de la API
la leche
la madre que me parió
bueno
no pasa nada
veis porque es importante
lo del loop infinito
no pasa nada
ahora lo arreglamos
y si pidieran varios datos
bueno pues recupera varios datos
no sé
o sea tampoco
me puedo poner en todas las situaciones
porque son parte de la programación
¿no?
os pueden pedir diferentes datos
más datos
menos datos
pero no sería lo mismo
que colocarlo fuera del useEffect
no
no sería lo mismo
no podéis utilizar un
esto no lo podéis utilizar
fuera del effect
¿vale?
o sea no podéis hacer el fetch
fuera del effect
o sea sea
con otro loop infinito
tendréis otro loop infinito
directamente
¿vale?
vamos a poner esto por aquí
vale
ya se ha arreglado esto
¿vale?
¿es mejor usar bit
o configurar a mano?
es mejor usar bit
seguramente
si te dejan
ni os lo penséis
¿eh?
¿qué peligro react?
ya
explícales por qué ponen
el API en una constante
que casi me matan
por decirlo antes
de que lo hicieras
bueno o sea
esto es una tontería
pero obviamente
obviamente es mejor
que lo tengáis en una constante
más que nada
porque uno
queda más limpio
dos
esto lo podréis separar
luego en un archivo
y quedar más limpio
también vuestro componente
y es que es una buena práctica
en general
luego si vas a cambiar
este endpoint
solo lo tienes que cambiar aquí
y no tienes que entrar
a las entrañas
de tu código
buscando dónde está
este string
para cambiarlo
es una buena práctica
que utilicéis constantes
para justamente
cosas que son constantes
¿vale?
¿por qué se hacen dos den?
bueno
porque uno
porque estoy concatenando
las promesas
lo que estamos haciendo aquí
este fetch
devuelve una promesa
entonces hago esto
y este rest.json
devuelve una promesa
y la estoy encadenando aquí
¿vale?
¿se puede trabajar un fetch
para recibir varios endpoints?
ahora lo vamos a ver
¿vale?
vamos a ver
entonces
vamos
vamos con el tema
hasta ahora
tenemos ya parte
terminada
¿vale?
ya tenemos el hecho
de que estamos haciendo
un fetch
hemos aprendido
cómo hacer el fetch
perfecto
¿qué era lo siguiente
que tenemos que hacer?
recupera un hecho aleatorio
de gatos
de la primera API
¿vale?
ahora recupera
la primera palabra
del hecho
yo lo que te recomiendo
cuando hagas la prueba técnica
es que
vayas a cuchillo
o sea
primero
intentes hacer la prueba
y luego ya te preocuparás
de mejorar
refactorizar
y tal
no refactorices
hasta que no
uno
no sea muy claro
o dos
no tengas un problema
si no tienes un problema
oye
ve tirando
y luego ya tendrás
tiempo de refactorizar
así que
¿qué vamos a hacer?
como necesitamos
que
recuperar el hecho
aleatorio
y luego
recuperar la primera palabra
¿dónde tenemos
el hecho aleatorio?
lo tenemos aquí
¿no?
vale
pues lo vamos a hacer aquí
luego te voy a enseñar
cómo utilizar dos
use effects
para hacer esto
cosa que puede quedar
bastante bien
porque significa
que entiendes muy bien
el use effect
y ahí la gente
va a decir
ostras
interesante
explícame por qué esto
y si lo explicas
luego te lo explico
entonces
vamos a ver
vamos a recuperar
del data
recuperamos el hecho
¿ok?
y aquí tenemos el fact
ahora
vamos a recuperar
la primera palabra
aquí normalmente
es súper normal
que te pongas a buscar
sobre todo
si no puedes utilizar
GihackoPilot
pero
como mínimo
tienes que saber
que puedes utilizar
el split
el split
lo que te permite
es
dividir una cadena
de texto
a partir del token
el separador
que tú le digas
y le vamos a decir
que nos lo haga
a través de los espacios
y que nos devuelve
el split
nos devuelve
un array
así que una vez
que tenemos el array
lo que deberíamos decir
es vale
pues la primera palabra
pues debería ser
la que tenemos
en la parte
en el número cero
¿no?
o sea nos quedamos
con la primera palabra
pues el número cero
¿qué pasa?
hay veces
que te piden
quédate con las
tres primeras palabras
lo que quieren ver
es
si eres capaz
de buscar documentación
porque esto muchas veces
la gente no se lo sabe
o también
lo que puede ser
es que quieren ver
cómo manipulas
arrays
strings
y todo esto
con la primera palabra
sería así
¿no?
tú tienes fact.split
y ya como tengo un array
me quedo con la primera palabra
si yo pongo aquí
un console.log
del first word
pues vamos a ver aquí
que tenemos
la primera palabra
la tenemos aquí
hay veces
que os van a decir
las tres primeras palabras
vale
no pasa nada
pues lo mismo
que hemos hecho aquí
con split
tendrías que utilizar
el slice
¿no?
para quedaros
pues con las
tres primeras palabras
bueno
pues lo haríamos así
y luego tendrías que utilizar
el join
¿por qué?
porque necesitáis justamente
saber
cómo
cómo juntar
las tres primeras palabras
en un string
el join lo que dice es
esto devuelve un array
el split devuelve un array
de muchas posiciones
me ha dividido ahí
todo el array
o sea
toda la cadena de texto
por los espacios
tenemos un array
de 15 posiciones
de aquí me quedo
del 0 al 3
ya tenemos
las tres primeras
las tres primeras palabras
y luego
las juntamos otra vez
en una cadena de texto
con el join
y así tenemos
de jishan mao
vale
una forma muy chula
de hacer esto
es que el split
tiene un segundo parámetro
que le puedes decir
cuántos son los que
tiene que
te tienes que quedar
así que le puedes poner
aquí directamente
el 3
si no te acuerdas
de esto
no pasa nada
pero al menos
lo otro te tienes que acordar
porque el split
y el join
son súper típicos
si no te acuerdas
de memoria
que es normal
que no te acuerdas
de memoria
lo que tienes que hacer
para buscar esto
es
mdn
primero mdn
vale
y luego puedes decir aquí
separate
separate string
by token
por ejemplo
lo puedes utilizar
a mi me gusta más
hacerlo en inglés
pero bueno
si lo quieres
lo puedes poner también
separar
string
por separador
por ejemplo
ok
separador
fíjate que las dos veces
me ha salido el primero
el split
ok
o sea
es súper importante
que sepas buscar
correctamente
¿por qué?
porque si te pones a buscar
y te cuesta
lo primero
que das una mala señal
y lo segundo
que de alguna forma
vas a perder mucho tiempo
y necesitas el tiempo
para no ponerte nervioso
así que
es súper importante
que sepas buscar
exactamente
correctamente
te recomiendo esto
mdn
para que no acabes
en mitad de la prueba
en un blog random
así que
mdn
porque sabes
que si estás buscando
documentación
no vas a fallar
con mdn
si te sabes
cualquier otra forma
de buscarlo
súper bien
hazlo
pero tenlo en cuenta
¿vale?
mdn
es la clave
ten cuidado
con blogs random
que te va a costar
escanear la información
y todo esto
siempre a tiro fijo
mdn
separar string
por separador
luego mdn
eh
quedarte
con los
con
con x
número
número de
elementos
de array
o tal
bueno
aquí frame
pero ya ha salido
de slides
o sea
que ya más o menos
lo tenéis
¿vale?
o sea
ya vais viendo
un poco
por donde va el tema
mdn
juntar
elementos
array
en cadena
de texto
join
¿veis?
o sea
esta es la forma
que tenéis que buscar
no busquéis cosas raras
y nunca
nunca
busquéis
la solución
porque uno
os van a pegar un toque
o sea
no os van a permitir
hacer esto
get
first
three
words
in
string
javascript
esto es buscar la solución
que esto
es un poco complicado
si es un live coding
es totalmente normal
y os van a dejar
por ejemplo
al chico este
ves que podía usar google
tanto como quisiera
pero
lo que es importante
es que uséis bien google
¿vale?
no solo que lo uséis
no hagáis esto
¿vale?
no hagáis esto
de buscar la solución
tenéis que buscar
la documentación
si buscáis la solución
lo único que le estáis diciendo es
no tengo ni puñetera idea
de hacerlo
y tampoco sería capaz
me voy a stack overflow
habéis visto la diferencia
de hemos buscado en mdn
cómo hacerlo
a he buscado la solución
en stack overflow
si te ven buscando
en stack overflow
os van a
¿vale?
así que
o sea
va a tener
sé que lo hacemos todos
yo lo sé
lo hago yo
lo hace todo el mundo
todo el mundo lo hace
pero no debe ser
en una entrevista técnica
lo que tenéis que hacer
estos son tips
que me gustaría daros
porque ya sé
que al final
si no
luego me decís
bueno pero tal
bueno
yo creo que está en la clave
el tema
aquí con esto
hemos conseguido
las tres primeras palabras
lo que tienes que hacer
primero
es solucionar
ya el problema
y el problema que teníamos
era con este
cat endpoint
no sé qué
no sé cuánto
¿no?
bueno
pues esto mismo
por ahora
mira
lo voy a usar tal cual
y una vez que tenemos
la primera palabra
vamos a hacer el fetching de datos
con el otro endpoint
porque uno depende del otro
así que hacemos el fetching de datos
con la nueva API
que diga
el gato
que diga
la primera palabra
bueno
las
three first words
¿vale?
first words
no sé si aquí
esto permitirá
lo vamos a ver
si esto permite
si no ahora veremos el error
¿vale?
then
res
res.json
y then
la respuesta
y una vez que tenemos la respuesta
aquí
claro
tú puedes ir tirando
no pasa nada que vayas tirando
de la consola
¿no?
y por ejemplo
aquí con el console ninja
esto es una maravilla
porque fíjate
que es en abrir la herramienta de desarrollo
tenemos aquí la consola
y esto queda aquí
buenísimo
y entonces ya puedes mirar fácilmente
cuál es el objeto
cómo es el objeto y tal
otra
otra recomendación que te doy
hay mucha gente que dice
que utilizar console.log
te elimina en entrevistas
yo eso no lo he visto en mi vida
nunca
puede ser que exista
no utilices debugger
a no ser que realmente
sepa lo que estás haciendo
y realmente lo necesites
el debugger a veces
es muy lento a la hora de debuggear
en lugar de debuggear
para hacer esto de la respuesta
esto que hemos hecho
si no quieres utilizar console.log
en lugar de utilizar el debugger
yo te recomiendo
que tires de la API
que veas directamente la API
o sea
vayas aquí
y digas
vale
si yo pongo aquí
Pepito
por ejemplo
¿qué es lo que me devuelve?
mejor que hagas esto
que no que te pongas a meter
debuggers y tal
va
seguramente
para ver la respuesta de una API
va a ser un poco raro
porque se va a notar
que
oye
pero que está haciendo este
como que
debugger aquí
y como encima
no lo tengas muy de la mano
te va a costar más
que otra cosa
aquí
hazlo como tú quieras
pero sobre todo
que estés cómodo
con lo que estás haciendo
bueno
console.logger.response
bueno ya podemos ver aquí
la respuesta
que tenemos la URL
la URL además
no viene con el prefijo
o sea
que tenemos que tener en cuenta
que tiene que poner el prefijo
ah mira
fíjate aquí
un like other cats
o sea
aquí me ha puesto esto
de un like other cats
porque el split
aquí tenemos que ponerle
el join
que luego se me ha olvidado
pero lo importante
es que con eso
lo tendríamos
y aquí tendríamos que recuperar
la URL
pues de la respuesta
recuperamos la URL
y obviamente esto
necesitamos guardarlo
en un estado
ya vemos que necesitamos
dos estados
así que tenemos aquí
el image
bueno
image URL
set image URL
y le ponemos el null
y aquí un poco lo mismo
o sea que si tenemos
image URL
pues vamos a poner la imagen
bueno
primera cosita
primera cosita aquí
una vez que tenemos esto
que ya tenemos la imagen
y todo esto
a ver
en el alt
una de dos
una
no dejes el alt
vacío
dos
no pongas un alt
que no tiene sentido
poner gato
es un poco raro
que se te note
que al menos tienes
una ligera sensibilidad
por el
por la accesibilidad
fíjate que ya
para empezar
yo he utilizado un main
no he utilizado ningún dip
por ahora
no he hecho absolutamente nada
o sea
que al menos
algo de ligera
cosa que se te note
que sabes
para qué sirve el alt
vale
bueno
qué puedes poner aquí
podrías poner
por ejemplo
image extracted
using the first three words for fact
esta podría ser una
y le puedes decir
oye
es que no puedo poner
una descripción más idónea
pero al menos voy a decir
que entiendan
de dónde ha salido esta imagen
lo ideal sería
describir la imagen
pero no puedes
porque es imposible
así que al menos
puedes decir esto
vale
no dejes un cat
o no dejes un image
que esto mucha gente lo hace
para que el linter
no moleste
ah
me está molestando el linter
image
entonces queda como un poco raro
bueno
pues pon algo
en condiciones
ya que te sale el error
pues que te llame la atención
vamos a setear aquí
el set image url
con esta url
pero nos vamos a dar cuenta
de un problema
cuando guardamos los cambios
la imagen está rota
¿por qué?
porque como hemos visto
en el url
había que ponerle
el prefijo
de todo esto
o sea la imagen
habría que prefijarla
con lo que tiene la app
aquí tienes dos opciones
¿vale?
una sería
hacerlo aquí
podrías fijar esto aquí
y aquí poner la url
¿no?
y con esto
lo arreglarías
pum
ya tendrías aquí tu imagen
y tal
vale
te voy a explicar
por qué esto
funcionar funciona
no pasa nada
¿vale?
no pasa nada
pero
puedes hacerlo mejor
y además te pueden preguntar
porque te pueden preguntar
¿por qué podría ser buena idea
que no añadas
el prefijo
en el estado?
¿por qué podría ser buena idea?
lo primero
en el estado
siempre debemos tener
lo mínimo
necesario
y esto es una parte
que es totalmente
es totalmente estática
por lo tanto
si siempre en el estado
tenemos que tener
la mínima información
necesaria
para renderizar
nuestros datos
significa que eso
lo podríamos extraer
y sacarlo fuera
y hacer la concatenación
realmente fuera
siempre
siempre
lo que se tiene que hacer
para los estados
no es
setear
todo lo que necesitas renderizar
sino que lo que necesitas
es
setear
la mínima información
y luego
calcular
lo que tienes que renderizar
así que
seguramente
lo mejor que puedes hacer
sería
yo creo que no pasaría nada
porque hagas lo otro
¿vale?
pero yo te lo explico
lo que puedes hacer aquí
pues es otra vez
cat
prefix
image URL
¿vale?
tienes esto
y aquí
por ahora
lo podemos hacer así
podemos meter aquí esto
esto aquí
y esto aquí
obviamente esto
luego lo podemos mejorar
¿por qué?
porque podemos sacar
esta lógica
de otro sitio
uy
espérate que me la había cargado
vale ya está
esto lo podríamos sacar
de otro sitio
¿vale?
pero por ahora
lo podríamos dejar así
al menos
que se note
que sabemos por qué
y lo puedes explicar
mientras lo haces
oye voy a meter
la mínima información
total
esto es una parte
además
esto puede cambiar
porque podemos tener
diferentes
variables de entorno
según
si es local
pues que esto
tire de otro sitio
¿no?
lo podemos empezar
a hablar de diferentes sitios
¿vale?
vale
hasta aquí
tendríamos
nuestra prueba mínima
¿qué pasa aquí?
aquí ahora
vendría un montón de cosas
hostia
artiles
gracias por regalar
6 subs
muchísimas gracias amigo
muchas gracias
gracias
gracias
hasta aquí
teníamos la prueba
y lo decimos
¿no?
oye
ya hemos terminado
lo que nos estaba pidiendo
el enunciado
aquí no termina la prueba
esto es el inicio
de la prueba
¿por qué?
siempre en este tipo
de pruebas técnicas
como le pasó
a nuestro compañero
es que para que veáis
que es que esto es real
real como la vida misma
ves que aquí le dijo
la cosa es que empieza
la entrevista
¿no?
y le dice
ah
haz un fetch de datos
y tal
y luego le dice
le dice
no no
pero luego tienes que hacer
no siempre
siempre te van a decir
para no asustarte
esto lo hacen
es normal
siempre te van a decir
un trozo de la prueba
si te dicen todo
lo que tienes que hacer
y es mucho
esa empresa
no sabe hacer entrevistas
pero te van a decir
muy poquito
algo que dentro de que cabe
es fácil
aquí normalmente
te van a decir
oye
esto está muy bien
pero por favor
nos ha llamado
el diseñador
y el diseñador
nos ha dicho
que quiere que esto
quede totalmente
que quede centrado
¿vale?
quiere que todo
quede centrado
y claro
no lo ve centrado
¿qué podrías hacer?
bueno
lo típico
pues para
porque lo que quieren ver
es saber realmente
utilizar estilos
entonces le puedes preguntar
oye
¿es importante
que separe los estilos
en un archivo
o no importa
porque me gustaría
optimizar el tiempo
porque quiero tener
la feature lo antes posible
¿lo hago con estilos en línea
o queréis que los separe?
ahí os pueden decir
no
mejor separalos
o te pueden decir
hazlo como tú prefieras
lo que tú creas
que es mejor práctica
te pueden decir
sí, sí
hazlo en línea
no hay problema
si te dicen que no hay problema
hazlos en línea
si te dicen que sí que hay un problema
los sacas
¿vale?
y dices
vale
pues import
app
CSS
los sacas aquí
y rápidamente
sé que
muchos de vosotros
en los estilos
os dan
cosa
no sé
os da ahí
no sé
que no os gusta y tal
tenéis que saber
de CSS
una cosa que es súper importante
que es flex
tenéis que saber
alinear elementos
con flex
porque es casi siempre
lo que vais a necesitar
en una entrevista
en este caso
¿vale?
y súper importante
de que no
de que se note
de que nos va a costar
¿vale?
así que
podéis poner flex
flex direction
column
¿vale?
bajamos esto por aquí
esto por acá
ya tenemos esto por aquí
y aquí pues le decís
justify
además
intentar utilizar
lo mínimo posible
¿vale?
o sea no empecéis a estilarlo todo
y no sé qué
¿vale?
bueno pues ya lo tendríamos
y luego ya pues si os queréis lanzar
pues empezáis
y al menos un poquito
no hace falta mucho más
que esto normalmente
¿vale?
no hace falta mucho más
es simplemente
hacer lo mínimo
para que se note
que sabéis ¿vale?
aquí también por ejemplo
si os vais muy sobrados
pues ponéis aquí
place
items
center
¿vale?
y ya está
o sea
algo así
punto
pim pam
pim pam
o sea
más o menos
que vean que sabes utilizar flex
también os podéis decir
por ejemplo
esto lo he visto muchas veces
porque es un poquito
más complicado
no más
mucho más complicado
pero normalmente
es un poco trampa
porque no solo os dicen
que lo hagan de columna
sino que os dicen
que lo hagáis en horizontal
¿vale?
os dicen
que quede uno al lado del otro
o sea
os dicen
este
el fact
en un lado
y la imagen
en otro lado
¿vale?
cosas así
os lo pueden decir
no pasa nada
pues lo que podéis hacer aquí
es poner un section
¿vale?
separáis esto
lo podríais aquí
aquí dentro
ahora obviamente
se rompe otra vez
¿no?
pero lo que hacíais
con el section
os dejo los dos
para que os suenen
¿vale?
flex
justify
vamos a poner esto por aquí
¿veis?
ya tenemos esto aquí
le ponemos aquí
align item center
ya tenemos esto aquí
y para que queden
un poco más separados
le ponemos un gap
¿vale?
así se separan
lo podemos hacer
un poquito más exagerado
e incluso podéis hacer
que en el section
el image
pues tenga una
para que no sea
muy grande la imagen
lo hacéis así
¿vale?
y al menos
pues tenéis algo así
más o menos
¿vale?
pero lo importante
es que tengáis claro
una
esto sería
en fila
para alinearlo en fila
y otro sería
para hacerlo en columna
cualquiera de los dos
os sirve
lo importante
es que los tengáis clarísimos
los dos
con que los tengáis claros
esto os va a salvar la vida
en el
98%
de las pruebas técnicas
que os digan
en algún momento
hacer esto
¿ok?
así que no hay ningún problema
literalmente yo el de la foto
¿vale?
sí
backend developer
no os asustéis
pero con esto ya lo tenéis
o sea es bastante fácil
¿eh?
diferente entre flex y flexbox
son lo mismo
te quedó más lindo que mi porfolio
hombre tampoco es eso
¿eh?
tampoco es eso
no van a pedir mucho más que esto
lo que sí que os pueden pedir ya
pues es hacer responsive
y a veces
lo mejor de responsive
es que
utilizáis el de columna
para móvil
y el de section
o sea este
lo utilizaríais para
para el otro
y ya está
¿vale?
bueno vamos a quitar
el gato ese
que da un poquito de miedo
¿ok?
vale
muy bien
vamos a dejar el main
solo por simplificar
os quito el del section
que ahora que ya lo habéis visto
solo para
que lo tengamos así
como un poquito más grande
y ya está
¿qué más os pueden pedir?
aquí
hay una cosa que
cuando tú tienes este código
os va
va a parecer que
ostras
es un solo
use effect
¿habría alguna forma
de
mejorar esto?
esto es un poco
nos van a decir
puede ser que nos lo pregunten
pero os voy a enseñar
una forma
en la que esto
puede quedar mucho mejor
y vais a demostrar
que realmente
sabéis
cómo funciona
el use effect
¿vale?
¿cómo podéis hacer esto
con dos use effects?
el otro día aprendimos
cómo utilizar el use effect
y alguien me preguntó
¿se puede utilizar más de uno?
y yo dije
por supuesto que sí
y claro que sí
que se puede utilizar
más de uno
y en este ejemplo
lo vas a ver clarísimamente
y por qué a veces
puede ser incluso interesante
y va a hacer tu código
más mantenible
más interesante
para detectar
cuáles son las dependencias
que tiene el renderizado
y todo
mira
aquí tenemos un efecto
que solo se tendría
esto de recuperar
la cita
o la curiosidad
del gato
solo tendría que hacerse
la primera vez
que entras al componente
y lo que estamos haciendo aquí
es que
una vez que ya tenemos
esos datos
pues vamos a hacer también
esto de aquí
no pasa nada
no está mal
pero podemos hacerlo mejor
lo que podemos hacer es
vale
pues esto
me lo voy a llevar
esto lo dejamos así
y ya tendríamos aquí
un efecto
porque está bien
y es buena práctica
que los efectos en React
solo tengan
una responsabilidad
no tengáis efectos
que tienen muchas responsabilidades
porque son muy difíciles
de depurar
os queda un efecto
de 50 líneas
y cualquiera luego
mete mano ahí
y tal
y entonces ya que estáis
pues aquí
por ejemplo
hay veces que os dicen
bueno
podrías hacerlo
de otra forma
los efectos
a ver no sé qué
vale
pues le dice
vale
no pasa nada
tenemos aquí un efecto
para recuperar la cita
al renderizar
al cargar la página
perfecto
y ahora vamos a tener
para recuperar la imagen
cada vez que tenemos
una cita nueva
vale
así que aquí
vamos a tener un use effect
le copiamos el código
que habíamos hecho antes
y que hacemos
que en las dependencias
le cambiamos el fact
y le decimos
vale
cada vez que cambie el fact
bueno
no sé por qué ha apetado
ahora lo veremos
cada vez que cambia
ah
porque este fact
vale
ahora os explico
es normal que haya petado
cada vez que cambia el fact
tiene que ejecutar este efecto
¿por qué peta?
porque obviamente
la primera vez
fíjate que el fact
es nul
tenemos que controlar
aquí con un if
en este efecto
en el de recuperar la imagen
le tenemos que decir
si tenemos
o si no tenemos un fact
hacen un return
y si tenemos un fact
hacer esto
lo puedes hacer de las dos formas
yo te recomiendo
que hagas la corta
que sería esta
¿vale?
y ya está
así de esta forma
tienes separado
directamente
en dos efectos
esto
te queda
siempre en tu código
tienes que evitar
la anidación
o sea que te empiece a ver
una cascada
hacia abajo a la derecha
¿no?
con lo otro
ya ves que habíamos tenido
abajo a la derecha
un montón
pero un montón de anidación
con esto
lo que hemos conseguido
es que la anidación
sea mínima
tenemos un efecto separado
que se ve claramente
lo que está haciendo
y otro efecto separado
que se ve claramente
lo que está haciendo
y además esto
muchas veces
lo que nos va a permitir
es hacer un custom hook
y ahora te lo voy a enseñar
¿vale?
pero os voy a preguntar
hasta aquí
si lo habéis entendido todo
¿es buena práctica entonces
tener varios efectos
en la misma dependencia
pero que hagan cosas diferentes?
totalmente
¿sí?
¿por qué?
de por tú
¿lo vas a ver ahora?
te lo voy a explicar ahora
porque vas a ver que
separar efectos
para diferentes responsabilidades
es bastante interesante
porque va a permitir
que tu código luego
se pueda refactorizar mejor
con esta
estás un 60% dentro
totalmente
¿qué pasa si la request falla?
luego lo vemos
lo de que la request falle
y eso es bastante importante
está bien que generéis errores
lo vamos a ver después
pero está bien que
si por lo que sea queréis
empecéis a generar estados
también para esto
¿no?
por ejemplo
tener
fact
error
set
error
fact
error
¿no?
tener esto aquí
y decir
vale
pues vamos a poner aquí
que si
y también te tienes que saber
manejar los errores
porque
esto
es un poco
¿vale?
para manejar aquí el error
por ejemplo
tendrías que decir
si la respuesta
no es ok
entonces
vamos a poner
set for error
no se ha podido recuperar la cita
¿no?
y si tenemos este error
podríamos hacer alguna cosa
está súper bien
que en vuestra prueba técnica
os digo una cosa
está súper bien
que en la prueba
manejéis errores
pero
también os recomiendo
que no sea lo primero
podéis hacer dos cosas
una
poner un comentario
por ejemplo
to do
handle
error
if
res
ok
¿vale?
y puedes decir
esto lo voy a hacer después
porque quiero realmente
que primero se vea
que he terminado
vamos a ponernos
con el happy path
¿vale?
voy a terminar el happy path
y luego
si tengo tiempo
manejo todos los errores
porque me parece una buena práctica
¿vale?
súper importante
pero
os recomiendo que no sea
lo primero que hagáis
¿por qué?
si es lo primero que hacéis
vais a perder mucho tiempo
con los errores
se pierde mucho tiempo
vais a empezar a mezclar
un montón de código
yo os recomiendo
que primero
terminéis
ya habéis visto
lo hacemos un momento
yo os lo estoy explicando
pero que primero terminéis
y luego
digáis
ahora voy a hacer
y lo puedes ir diciendo
¿vale?
happy path
happy path es el camino feliz
¿ok?
y por qué no con un catch
el fetch
devuelve los errores
en dos casos
uno
si tienes un status code
por ejemplo
si tienes un status code
que no es correcto
entonces aquí
podríamos hacer un throw
un new error
que no sería mala idea
y entonces aquí sí
hacer un catch
porque el catch
en el fetch
el catch en el fetch
entra solo directamente
cuando
ha habido un problema
con la petición
no con la respuesta
¿vale?
así que es súper importante
si haces
si quieres mirar
puedes hacer esto
si no es ok
y esto es un boleano
throw new error
y entonces aquí tendrás tanto
tanto si
hay un error
como si
si hay un error
con la respuesta
como si hay
un error
con la petición
en el catch
en el catch
si tú no haces esto
en el catch
solo entra
si ha habido un problema
en la petición
como por ejemplo
que se te corte internet
cosas así
¿sabes?
algo así
si haces el use effect
con async await
entonces haces el try catch
si no
mejor hacer el if throw
claro
si haces async await
tenés que hacer el try catch
¿vale?
res ok
res json
promo y rejec
yo prefiero que no hagáis
un premium rejec
yo prefiero hacer
un throw new error
aquí dentro
y no utilizar el promise
checha
yo aquí en este caso
esto pasa solo en el fetch
si utilizáis axios
por suerte axios
si que tienes en el catch
tienes todos los errores
¿vale?
así que
bueno
pero es por el tema
de los errores
que luego lo vemos
luego hacemos cositas con eso
mire me pregunto
con un solo use effect
¿no puede pasar que el segundo fetch
se haga con el valor
desactualizado del fact?
no
no podía
no podía porque nosotros
a ver
voy a
un momento
voy a guardarlo
y te lo enseño
pero no
no podía
porque
hemos hecho
hemos hecho
a ver
fíjate
no podía porque
este fact
que teníamos aquí
era el que estamos recuperando
de la API
¿ves?
este set fact
al final el fact
que tenemos en este contexto aquí
era este de aquí
o sea
estamos utilizando este
no el del estado
¿vale?
no el del estado
¿vale?
hostia
que la lío
vale
vamos a volver al código
vale
¿ok?
¿hasta aquí bien?
¿todo bien?
venga
pues vamos a continuar
porque todavía hay
hay chicha aquí
que cortar
¿ok?
vale
ya teníamos nuestra app
¿ahora qué pasa?
normalmente
aquí
te van a pedir
todavía está dentro del den
no
ahora está bien ¿no?
lo hemos separado
en dos yosefe