Summary  
This chapter explains how a Vite-generated React project is organized, detailing the purpose of key files and folders (like src, public, configuration files, and dependencies) and highlighting the parts developers work with most.  

General domain of usage  
Front-end web development

Quando crei un progetto React con Vite, viene generato un insieme di file e cartelle che costituiscono la **struttura del progetto**. A prima vista, questa struttura può sembrare complessa, ma non è necessario comprenderla tutta immediatamente.

Analisi dell'utilizzo di ciascuna cartella e file principale e delle parti con cui si lavora più frequentemente.

## Panoramica della radice del progetto
Un progetto Vite React contiene tipicamente i seguenti elementi a livello di radice:
- node_modules;
- public;
- src;
- index.html;
- package.json;
- package-lock.json;
- vite.config.js;
- eslint.config.js;
- .gitignore;
- README.md;

Analisi dei più importanti.

Contiene tutti i pacchetti di terze parti e le dipendenze. Creato automaticamente dopo aver eseguito `npm install`. **Non modificare** questa cartella e solitamente escluderla dal controllo versione.

Contiene risorse statiche come immagini e icone. I file qui presenti sono accessibili direttamente dal browser.

Cartella principale che contiene il codice React. Include componenti, stili e logica dell'applicazione. **Questa è la cartella in cui si lavora di più.**

Unico punto di ingresso HTML dell'applicazione. React esegue il rendering dell'intera applicazione in questo file utilizzando un elemento root.

Descrive la configurazione del progetto. Contiene dipendenze e script come `npm run dev`.

Blocca le versioni esatte delle dipendenze. Garantisce installazioni coerenti su diverse macchine.

File di configurazione per Vite. Controlla come viene costruita e servita l'applicazione. Solitamente non modificato dai principianti.

Specifica quali file e cartelle Git deve ignorare.

Definisce le regole di qualità del codice e linting.

Documentazione di base del progetto e istruzioni.

Quale cartella contiene la maggior parte del codice della tua applicazione React?

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.

Comprendere la Struttura di un Progetto React

Panoramica della radice del progetto