Lezione 1 – Web App con react-vite-nodejs-introduzione

Se hai già scritto qualche riga di HTML e CSS e vuoi fare il salto verso lo sviluppo web moderno, sei nel posto giusto. In questa serie costruiamo da zero un’applicazione web completa — con interfaccia interattiva, routing, backend e deploy online — usando lo stack che oggi domina il mercato: Node.js + React + Vite, tutto dentro Visual Studio Code.

Non è un tutorial “fai copia-incolla e funziona”. Ogni lezione spiega perché si fa così, non solo come. Alla fine del percorso avrai un’applicazione reale nel tuo portfolio GitHub e una comprensione solida dell’intero flusso di sviluppo frontend–backend.

Perché questo stack?

Prima di scrivere una riga di codice vale la pena capire perché esistono questi strumenti e quale problema risolvono. Non nascono per complicare la vita — nascono per risolvere problemi reali che emergono quando le applicazioni crescono.

Il problema che Node.js risolve

JavaScript nasce nel 1995 come linguaggio per il browser. Per decenni, se volevi un server backend dovevi imparare un secondo linguaggio: PHP, Python, Ruby, Java. Nel 2009 Ryan Dahl presenta Node.js: un runtime che esegue JavaScript fuori dal browser, direttamente sul sistema operativo, costruito sul motore V8 di Google Chrome.

Il risultato pratico: con un solo linguaggio — JavaScript — puoi scrivere sia il codice che gira nel browser (frontend) sia quello che gira sul server (backend). Stessa sintassi, stessi strumenti, stesso ecosistema di pacchetti.

Il problema che React risolve

Costruire interfacce utente con JavaScript puro diventa rapidamente un problema di gestione dello stato. Quando l’utente clicca un bottone, aggiorna un form, o arrivano nuovi dati dal server — chi aggiorna cosa nel DOM? Come si mantiene sincronizzata l’interfaccia con i dati? Con JavaScript vanilla diventa un labirinto di document.getElementById e listener annidati.

Facebook affronta questo problema su scala nel 2013 e rilascia React: una libreria che introduce il concetto di interfaccia dichiarativa. Invece di dire “aggiorna questo elemento DOM”, dici “questa è la struttura dell’interfaccia quando i dati sono in questo stato” — e React si occupa di capire cosa deve cambiare nel DOM reale (via Virtual DOM e reconciliation). Il codice diventa molto più prevedibile e manutenibile.

// devi gestire tutto a mano
const btn = document.getElementById('btn')
const count = document.getElementById('count')
let n = 0
btn.addEventListener('click', () => {
  n++
  count.textContent = n  // aggiorna manualmente
})

// descrivi lo stato → React aggiorna il DOM
function Counter() {
  const [n, setN] = useState(0)
  return (
    <button onClick={() => setN(n + 1)}>
      Cliccato {n} volte
    </button>
  )
}

Il problema che Vite risolve

React non è JavaScript standard: usa JSX (sintassi tipo HTML dentro JavaScript) che i browser non capiscono. Serve uno strumento di build che trasformi il codice sorgente in JavaScript eseguibile dal browser. Il predecessore storico è Webpack — potente, ma con un problema: all’aumentare del progetto, il server di sviluppo diventa lento. Modifichi un file, aspetti 10-30 secondi prima di vedere il risultato.

Nel 2021 Evan You (il creatore di Vue.js) rilascia Vite (pronunciato “vit”, dal francese “veloce”). L’idea chiave: i browser moderni supportano nativamente gli ES Modules. Invece di bundlare tutto il codice prima di servirlo, Vite serve i singoli file trasformati on-demand. Il risultato: avvio del server di sviluppo in meno di un secondo, aggiornamenti istantanei (Hot Module Replacement) senza ricaricare la pagina. La differenza si sente subito.

Come funzionano insieme

Capire come questi pezzi si integrano è fondamentale prima di scrivere la prima riga di codice. Ecco l’architettura che costruiremo in questa serie:

Durante lo sviluppo, Vite fa girare un server locale sulla porta 5173 che serve il frontend React. Express fa girare il backend sulla porta 3001. I due parlano tra loro via chiamate HTTP. In produzione, il frontend compilato da Vite viene deployato su Vercel (una CDN globale), il backend su Render (un servizio cloud).

Il progetto che costruiremo

Attraverso le 10 lezioni costruiremo DevNotes — un’applicazione per gestire appunti tecnici (snippet di codice, link utili, note personali). È semplice abbastanza da imparare senza distrazioni, ma abbastanza completa da toccare ogni parte dello stack:

Il percorso completo — 10 lezioni

Lezione 1 — Setup dell’ambiente di sviluppo

In questa prima lezione non scriviamo ancora codice dell’applicazione. Installiamo gli strumenti, configuriamo l’editor e creiamo il primo progetto Vite + React per capire cosa genera di default e come funziona il dev server.

Alla fine di questa lezione avrai:

• Node.js installato e funzionante (con npm)
• Visual Studio Code configurato con le estensioni giuste per React
• Il tuo primo progetto Vite + React in esecuzione su localhost:5173
• Comprensione della struttura delle cartelle generate da Vite