Compito: Creazione di una fonte enciclopedica

In questo compito, verrà creata una fonte enciclopedica composta da due schede. Ogni scheda mostrerà un'immagine e una descrizione. L'obiettivo è esercitarsi nella creazione di componenti funzionali e nel passaggio di dati ai componenti figli tramite le props.

Istruzioni:

1. Creare un componente Card come modello riutilizzabile di scheda.
2. Nel componente Card, accettare le seguenti props:
   • link: L'URL dell'immagine per la scheda;
   • alt: Il testo alternativo per l'immagine;
   • description: Il testo descrittivo per la scheda.
3. Utilizzare il componente Card due volte nel componente App per creare due schede con il seguente contenuto:

Scheda 1 (Sul Sole):

• URL immagine: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
• Testo alternativo: Fornire una descrizione appropriata.
• Descrizione: "Il sole splendeva luminoso, diffondendo un caldo bagliore sulla spiaggia tranquilla."

Scheda 2 (Sulla Montagna):

• URL immagine: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
• Testo alternativo: Fornire una descrizione appropriata.
• Descrizione: "L'escursionista osservava con stupore la maestosa montagna che si ergeva davanti a lui."

Assicurarsi che entrambi i componenti Card e App siano opportunamente modificati per visualizzare correttamente le schede.

Ecco un codice iniziale con segnaposto da completare:

1. È possibile utilizzare lo stesso componente Card per entrambe le card e controllarne il contenuto tramite le props.
2. Per passare l'URL come prop, crea una prop chiamata link e fornisci l'URL come valore. Racchiudi il valore tra virgolette doppie poiché si tratta di una stringa.
3. Allo stesso modo, crea le props per alt e description e assegna i valori appropriati.
4. Per utilizzare queste props all'interno del componente figlio Card, accedile utilizzando la notazione a punti poiché props è un oggetto.