# Compito

Creare un componente riutilizzabile `StatusCard` che visualizza messaggi diversi in base alla prop `online`.

Il componente `StatusCard` deve includere:

1. Un'intestazione (elemento `h2`). Il suo contenuto testuale deve mostrare la prop `name`.

2. Un paragrafo (elemento `p`).

* Se la prop `online` è `true`, visualizzare `Online`;
* Altrimenti, visualizzare `Offline`.

Il componente `App` già rende diversi componenti `StatusCard` con prop differenti.


## 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-03-starter-show-user-status-messages?file=src%2FApp.jsx)



## Soluzione

È possibile confrontare il proprio risultato con la soluzione finale qui sotto.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-solution-show-user-status-messages?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.

Qual è lo scopo principale delle props in React?

Quale metodo è più comunemente utilizzato per rendere una lista di elementi in React?

Perché la prop key è importante quando si rendono le liste?

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: Mostra i Messaggi di Stato dell'Utente

Compito

Codice iniziale

Soluzione