Tehtävä: Tietosanakirjalähteen luominen

Tässä tehtävässä luot tietosanakirjalähteen, joka koostuu kahdesta kortista. Jokainen kortti näyttää kuvan ja kuvauksen. Tavoitteena on harjoitella funktiokomponenttien luomista ja datan välittämistä lapsikomponenteille propsien avulla.

Ohjeet:

1. Luo Card-komponentti uudelleenkäytettäväksi korttipohjaksi.
2. Card-komponentissa hyväksy seuraavat propsit:
   • link: Kortin kuvan URL-osoite;
   • alt: Kuvan vaihtoehtoinen teksti;
   • description: Kortin kuvausteksti.
3. Käytä Card-komponenttia kahdesti App-komponentissa luodaksesi kaksi korttia seuraavalla sisällöllä:

Kortti 1 (Aihe: Aurinko):

• Kuvan URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
• Vaihtoehtoinen teksti: Anna sopiva kuvaus.
• Kuvaus: "Aurinko paistoi kirkkaasti, levittäen lämmintä hehkua rauhalliselle rannalle."

Kortti 2 (Aihe: Vuori):

• Kuvan URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
• Vaihtoehtoinen teksti: Anna sopiva kuvaus.
• Kuvaus: "Vaeltaja katseli kunnioituksesta mykistyneenä edessään kohoavaa majesteettista vuorta."

Varmista, että sekä Card- että App-komponentit on muokattu asianmukaisesti korttien oikeaa näyttämistä varten.

Tässä on aloituskoodi, jossa on paikkamerkkejä täydennettäväksi:

1. Voit käyttää samaa Card-komponenttia molemmille korteille ja hallita niiden sisältöä propseilla.
2. Välitä URL osoitteena propin avulla luomalla prop nimeltä link ja anna URL sen arvoksi. Sulje arvo lainausmerkkeihin, koska kyseessä on merkkijono.
3. Luo vastaavasti propit alt ja description ja anna niille sopivat arvot.
4. Käytä näitä propseja lapsikomponentissa Card pääsemällä niihin käsiksi piste-notaatiolla, koska props on olio.