# Tehtävä

Luo uudelleenkäytettävä `UserCard`-komponentti, joka näyttää käyttäjän tiedot propsien avulla.
`UserCard`-komponentin tulee sisältää:

1. Otsikko (`h2`-elementti). Sen tekstisisällön tulee näyttää `name`-propin arvon.

2. Kappale (`p`-elementti). Sen tekstisisällön tulee näyttää `job`-propin arvon.

`App`-komponentti renderöi jo useita `UserCard`-komponentteja eri prop-arvoilla.


## Alustava koodi
Avaa alla oleva aloitusprojekti ja täydennä puuttuvat osat komponentista.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-02-starter?file=src%2FApp.jsx)



## Ratkaisu

Voit verrata omaa tulostasi lopulliseen ratkaisuun alla.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-02-solution?file=src%2FApp.jsx)

Tutustu Reactin käyttöliittymien rakentamisen perusteisiin. Keskity komponentteihin, JSX:ään, tietovirtaan, tilaan ja sivuvaikutuksiin, joita käytetään jokapäiväisissä React-sovelluksissa.

Tutustu siihen, mitä React on ja miten se renderöi käyttöliittymiä. Keskity komponentteihin, JSX-syntaksiin ja elementtien näyttämiseen näytöllä.

Mikä on propsien pääasiallinen tarkoitus Reactissa?

Mitä menetelmää käytetään yleisimmin listan renderöintiin Reactissa?

Miksi key-prop on tärkeä listoja renderöitäessä?

Syvenny tiedon välittämiseen komponenttien välillä ja käyttöliittymän ulostulon hallintaan. Painopisteenä propsit, ehdollinen renderöinti ja tietolistojen renderöinti.

Opi, miten käyttäjän vuorovaikutukset ja ulkoiset tiedot muuttavat käyttöliittymää ajan myötä. Keskity tilan hallintaan ja sivuvaikutusten käsittelyyn React-hookien avulla.

Tutustu yleisimpiin tapoihin tyylittää React-komponentteja. Keskity tyylien lisäämiseen käyttämällä sisäisiä tyylejä ja ulkoista CSS:ää.

Opi suorittamaan React-projekti ja ymmärtämään sen rakenne. Keskity projektin käynnistämiseen Vite-työkalulla sekä projektitiedostojen selaamiseen.

Haaste: Rakenna Uudelleenkäytettäviä Käyttäjäkortteja

Tehtävä

Alustava koodi

Ratkaisu