# Compito

Creare un semplice profilo utente che carica i dati dell'utente da una funzione API utilizzando `useEffect`.

Il componente deve includere:

1. Una variabile di stato chiamata `user`. Il suo valore iniziale deve essere `null`.

2. Un hook `useEffect`.

* Chiamare la funzione `fetchUser` all'interno dell'effetto.
* Utilizzare `.then()` per ricevere la risposta.
* Salvare la risposta nello stato `user` usando `setUser`.

3. Se `user` è `null`, mostrare un paragrafo (elemento `p`). Il suo contenuto testuale deve essere `Loading user...`.

4. Se `user` esiste, mostrare:

* Un'intestazione (elemento `h2`) che visualizza il nome dell'utente.
* Un paragrafo (elemento `p`) che visualizza il lavoro dell'utente.


## Codice iniziale
Apri il progetto iniziale qui sotto e completa le parti mancanti del componente.

[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)



## Soluzione

Puoi confrontare il tuo risultato con la soluzione finale qui sotto.

[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)

Esplora i fondamenti della creazione di interfacce utente con React. Focus su componenti, JSX, flusso dei dati, stato ed effetti collaterali utilizzati nelle applicazioni React quotidiane.

Esplora cosa sia React e come renderizza le interfacce utente. Focus su componenti, sintassi JSX e visualizzazione degli elementi sullo schermo.

Quale hook viene utilizzato per gestire lo stato in un componente funzionale?

Quando viene eseguito un hook `useEffect` per impostazione predefinita (senza un array di dipendenze)?

Approfondimento sul passaggio dei dati tra componenti e sul controllo dell'output dell'interfaccia utente. Focus su props, rendering condizionale e rendering di elenchi di dati.

Scopri come le interazioni dell'utente e i dati esterni modificano l'interfaccia utente nel tempo. Approfondimento sulla gestione dello stato e sul trattamento degli effetti collaterali con i React hook.

Esplorazione dei metodi comuni per stilizzare i componenti React. Approfondimento sull'applicazione degli stili tramite stili inline e CSS esterno.

Scopri come eseguire un progetto React e comprendere la sua struttura. Approfondimento sull'avvio di un progetto con Vite e sulla navigazione tra i file del progetto.

Sfida: Caricare i Dati Utente da un'API

Compito

Codice iniziale

Soluzione