Tutte le sfide possono apparire incomplete di default. Includono sezioni vuote dove è necessario aggiungere il codice richiesto. Una volta che tutte le parti mancanti sono state compilate correttamente, il codice completo verrà visualizzato nella pagina live.

Ogni sfida include due pulsanti di aiuto:
- **Suggerimento**: mostra piccoli indizi per guidarti;
- **Soluzione**: apre la versione completa in una nuova scheda.

Nota

Puoi anche guardare il breve video tutorial qui sotto per imparare a lavorare con CodeSandbox.

## Come lavorare con Code Sandbox

## Attività: Creazione di una Scheda Prodotto
Creare una semplice scheda prodotto utilizzando JSX e renderizzarla nel DOM. La scheda prodotto deve includere:
1. L'immagine del prodotto (elemento `img`).
   - L'attributo `src` deve essere uguale alla variabile `imageUrl`.
   - L'attributo `alt` deve essere uguale alla stringa `Computer`.
   - L'attributo `width` deve essere uguale a `256`.
2. Il titolo del prodotto (elemento `h3`).
   - Il suo contenuto testuale deve essere `Computer`.
3. Il prezzo del prodotto (elemento `span`).
   - Il suo contenuto testuale deve essere `Price: $129.99`.
4. La descrizione del prodotto (elemento `p`).
   - Il suo contenuto testuale deve essere `New Model`.


1. L'attributo `src` deve contenere la variabile `imageUrl` come valore. Utilizzare le parentesi graffe `{}`.
2. L'attributo `alt` deve contenere la stringa `"Computer"` come valore. Racchiuderla tra virgolette doppie.
3. L'attributo `width` deve contenere il numero `256` come valore. Utilizzare le parentesi graffe `{}`.
3. Verificare che gli elementi `h3`, `span` e `p` abbiano i valori corretti.

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.

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: Renderizzare un Elemento in React

Come lavorare con Code Sandbox

Attività: Creazione di una Scheda Prodotto

Sfida: Renderizzare un Elemento in React

Come lavorare con Code Sandbox

Attività: Creazione di una Scheda Prodotto