Practicas de React — Serie I
La practica hace al maestro
En esta serie de ejercicios de react, exploraremos las diferentes fase del desarrollo, para convertirnos en grandes programadores. Los ejercicios describen en detalle los problemas a resolver y avanzan de lo fácil a lo difícil, poniendo a prueba tus habilidades.
Sólo un componente
Crear un componente que muestre título que diga “El la programación es a React, como el lenguaje es a Viajar”.
Título aleatorio
Dado un componente que muestra un título, como el anterior, hacer que al darle clic, muestre un título diferente, extraído aleatoriamente de un arreglo.
Pista
Citas aleatorias
Crear un componente <Cita> que muestre una cita aleatoria, obtenida de un arreglo de frases celebres. Crear otro componente que repita tres veces el componente anterior usando [...new Array(3)].map(() => ...), devolviendo en el callback del map el componente <Cita>.
Nota: Ten cuidado de ponerle la propiedad
keya cada cita, con un valor diferente, por ejemplo,<Cita key={`cita-${index}`}para evitar el error de claves duplicadas o no asiganadas mostrada en la consola.
Cita con Autor
Estructura los datos de cada cita como titulo, autor e imagen de tal forma que la cita se vea de la siguiente forma.
Cita Aleatoria II
Haz que al pulsar la imagen del autor, se cambie la cita por otra aleatoria. El resultado debería ser otra cita, otro autor e imagen.
Cita Reducida
Crea un reductor, que retenga en su estado, la cita, el autor y la imagen, y que posea las siguientes acciones.
- CHANGE_CITE — Cambia la cita, el autor y la imagen por una aleatoria
Cita con Memoria
Modifica el reductor, para retener el estado, el identificador de la cita y un arreglo que guarde los identificadores de las citas que han sido cambiadas.
Pista — Al enviar la acción CHANGE_CITE, agrega en un nuevo arreglo, todas las citas vistas, más el identificador de la nueva cita aleatoria.
Cita no permitida
Al cambiar la cita a otra aleatoria en la acción del reductor, verifica si el identificador de la nueva cita no está contenido en el subarreglo de los últimos tres elementos. De ser así, genera una nueva cita aleatoria, hasta que no se cumpla la condición.
Nota: limita a 10 intentos máximos, para no ciclar el programa en caso de que no encuentre una cita distinta
Pista
Cita Asíncrona
Agrega al estado del reductor un valor para retener si la cita está disponible llamado lock y las acciones LOCK_CITE y UNLOCK_CITE, que cambien el valor de lock a true o false según sea el caso. Cea un adaptador que contenga la acción asíncrona NEW_CITE, la cuál debe despachar la acción LOCK_CITE, esperar 3 segundos de forma asíncrona, despachar la acción CHANGE_CITE y finalmente despachar la acción UNLOCK_CITE. Modifica el componente <Cite> para que muestre un logo y el texto “Esperando la frase…” sin autor. Finalmente, haz que al pulsar la imagen, despache NEW_CITE en lugar de CHANGE_CITE.
Pista — Detén tres segundos de forma asíncrona con await new Promise(resolve => setTimeout(resolve, 3000)).
Interfaz useCite
Crea un hook personalizado, que exponga una interfaz simple para consumir el reductor de citas. Abstrae el reductor, para que mediante el change() despache la acción CHANGE_CITE y con el método refresh() despache la acción adaptada NEW_CITE.
En esta serie revisamos la programación en react, desde lo más sencillo, hasta usar reductores asíncronos y hooks personalizados, como hemos aprendido en los otros artículos.
Espero que te hayan gustado los ejercicios de esta primer serie. Si no lograste llegar al final, deja en los comentarios tus dudas. También puedes proponer retos para la siguiente serie.
Documentación
Documentación oficial de React
Crear componentes y el JSX
Componentes y propiedades
Listas y propiedades key
Hooks
Uso de hooks personalizados
Uso de reductores
Uso de reductores asíncronos
Gist oficial de Dragon Nomada
Stackblitz oficial de Dragon Nomada
