# Tehtävä

Luo yksinkertainen käyttäjäprofiili, joka lataa käyttäjätiedot API-funktiosta käyttäen `useEffect`-hookia.

Komponentin tulee sisältää:

1. Tilamuuttuja nimeltä `user`. Sen alkuarvon tulee olla `null`.

2. `useEffect`-hook.

   * Kutsu `fetchUser`-funktiota efektin sisällä.
* Käytä `.then()` vastaanottaaksesi vastauksen.
   * Tallenna vastaus `user`-tilaan käyttäen `setUser`-funktiota.

3. Jos `user` on `null`, renderöi kappale (`p`-elementti). Sen tekstisisällön tulee olla `Loading user...`.

4. Jos `user` on olemassa, renderöi:

   * Otsikko (`h2`-elementti), joka näyttää käyttäjän nimen.
   * Kappale (`p`-elementti), joka näyttää käyttäjän työn.


## Aloituskoodi
Avaa alla oleva aloitusprojekti ja täydennä komponentin puuttuvat osat.

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



## Ratkaisu

Voit verrata tulostasi alla olevaan lopulliseen ratkaisuun.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-06-solution-load-user-data-from-an-api?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ä hook on tarkoitettu tilan hallintaan funktiokomponentissa?

Milloin `useEffect`-hook suoritetaan oletuksena (ilman riippuvuuslistaa)?

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: Käyttäjätietojen Lataaminen API:sta

Tehtävä

Aloituskoodi

Ratkaisu