Aplicación textos teatro

Ejercicio 1

Importar el siguiente fichero JSON y recorrerlo para mostrar todas sus líneas en la aplicación.

Utilizaremos 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í:

Aplicación textos teatro 1

Ejercicio 2

Maquetar la aplicación utilizando styled-components.

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.

Aplicación textos teatro 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.

Aplicación textos teatro 3

2. Añadir los botones de anterior y siguiente.

3. Aplicar styled-components para el diseño.

5. Cambiar de párrafo al pulsar sobre los botones de anterior y siguiente.

Descargar código fuente
← Valores por defecto
Trivial con ReactJS →

Aviso Legal | Política de privacidad