unidad 7

Nivel 1

Ejercicio 1

De manera análoga a lo que vimos en la lección 6, realizar una aplicación que lea un fichero json con los textos de una obra teatral y muestre cada uno de los textos en pantalla.

Utilizsaremos un componente llamado Linea para mostrar cada una de las líneas de texto.

Este será el fichero JSON que vamos a recorrer:

[
  "Hola Romeo.",
  "Hola Julieta",
  "Te amo, Romeo",
  "Y yo a tí Julieta",
  "Fuguémonos a Mexico",
  "Mejor no, no le caes bien a mi familia y si seguimos adelante con nuestro amor, esta historia acabará mal",
  "Poz vaya"
]

El ejercicio debería quedar así:

unidad 7 1

Nivel 2

Ejercicio 2

Maquetar la aplicación utilizando styled-components.

Nivel 3

Ejercicio 3

En este paso vamos a mostrar sólo una línea en lugar de todas las de la aplicación.

Añadiremos los botones de avanzar y retroceder que nos permitirán ir avanzando o retrocediendo entre las líneas de la aplicación para mostrar sólo una de cada vez.

unidad 7 2

Ejercicio 4

Vamos a mostrar todas las líneas de la aplicación pero a resaltar sólo una de cada vez, que irá cambiando a medida que pulsamos los botones de avanzar o retroceder.

unidad 7 3