> Nota
>
> Tutte le sfide possono apparire non funzionanti di default poiché contengono spazi vuoti dove è necessario inserire il codice richiesto. Una volta che questi spazi vengono compilati correttamente, il codice completo verrà visualizzato nella pagina live.
>
> Inoltre, ogni sfida presenta due pulsanti: `Suggerimento` e `Soluzione`. Cliccando su `Suggerimento` si ottengono piccoli indizi relativi alla sfida corrente, mentre selezionando il pulsante `Soluzione` si apre una nuova scheda con la soluzione completa della sfida.

## Compito: Creazione di una scheda prodotto
Crea la scheda prodotto e renderizzala 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. Usa le parentesi graffe `{}`.
2. L'attributo `alt` deve contenere la stringa `"Computer"` come valore. Racchiudila tra doppi apici.
3. L'attributo `width` deve contenere il numero `256` come valore. Usa le parentesi graffe `{}`.
3. Assicurati che gli elementi `h3`, `span` e `p` abbiano i valori corretti.

Impara a creare interfacce utente dinamiche e interattive con React. Comprendi i concetti fondamentali come JSX, il virtual DOM e l'architettura modulare basata su componenti riutilizzabili. Applica tecniche di stile utilizzando stili inline, CSS esterno e moduli CSS per un design scalabile. Gestisci lo stato e gli effetti collaterali in modo efficiente con React Hooks e condividi dati tra componenti tramite Context.

Acquisisci una comprensione dei principi fondamentali di React. Verranno trattati JSX (JavaScript XML), la creazione di componenti UI riutilizzabili e il rendering degli elementi. Inoltre, verrà approfondita l'importanza della raccolta dei dati e del rendering condizionale nelle applicazioni React. Al termine di questa sezione, avrai una solida base dei concetti essenziali di React, preparandoti per affrontare con successo gli argomenti più avanzati delle sezioni successive.

Esplora i vari metodi per aggiungere stili alle applicazioni React. Verrà illustrato come applicare stili ai singoli componenti, utilizzare stili dinamici e mantenere un approccio di styling scalabile e facilmente manutenibile nei progetti.

Funzionalità potenti nello sviluppo moderno di React. Gli hook rivoluzionano il modo in cui scriviamo i componenti funzionali, offrendo un metodo conciso e intuitivo per gestire lo stato ed eseguire effetti collaterali. Al contrario, Context consente di condividere dati attraverso l'albero dei componenti senza il prop drilling. La combinazione di hook e Context permette una gestione efficiente dello stato e una condivisione semplificata dei dati nelle applicazioni React.

Guida passo-passo su come avviare un progetto React nel mondo reale. Dalla configurazione dell'ambiente di sviluppo alla comprensione dell'organizzazione del progetto e degli strumenti fondamentali, acquisirai conoscenze e sicurezza per intraprendere il tuo percorso con React.

Sfida: Rendering di un Elemento in React

Come utilizzare Code Sandbox

Compito: Creazione di una scheda prodotto

Awesome!

Sfida: Rendering di un Elemento in React

Come utilizzare Code Sandbox

Compito: Creazione di una scheda prodotto