Lezione 1 — Introduzione a React, Vite e Node.js: Setup Ambiente
Perché lo stack Node + React + Vite domina il mercato, come dialogano frontend e backend e cosa costruiremo nelle prossime 9 lezioni. Prima lezione: zero codice applicativo, solo strumenti e primo progetto funzionante.
1. Perché questo stack? Il problema che ogni strumento risolve
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 completa con interfaccia interattiva, routing, backend e deploy online usando Node.js + React + Vite, tutto dentro Visual Studio Code.
Non è un tutorial "copia-incolla". Ogni lezione spiega perché si fa così, non solo come. Alla fine avrai un'app reale nel tuo portfolio GitHub e una comprensione solida dell'intero flusso frontend–backend.
Node.js è un runtime JavaScript asincrono e basato su eventi, progettato per costruire applicazioni di rete scalabili. Usa un modello non-bloccante a I/O: invece di bloccare il thread in attesa di disco o rete, continua ad eseguire altro codice e riceve una notifica quando l'operazione è pronta.
Il problema che Node.js risolve
JavaScript nasce nel 1995 per il browser. Per decenni, per un backend dovevi imparare un secondo linguaggio: PHP, Python, Ruby. Nel 2009 Ryan Dahl presenta Node.js costruito sul motore V8 di Chrome. Risultato: con un solo linguaggio scrivi sia frontend che backend, stessa sintassi, stesso ecosistema npm.
Quando spiego Node.js in classe faccio sempre questo controllo: apri il terminale e scrivi node --version e npm --version. Se entrambi rispondono, sei già a metà strada. Se npm manca, hai installato Node in modo incompleto. Reinstalla dal sito ufficiale, non da store di terze parti.
Il problema che React risolve
Costruire interfacce con JS puro diventa un labirinto di document.getElementById e listener annidati quando lo stato cresce. Facebook nel 2013 rilascia React: interfaccia dichiarativa. Invece di dire "aggiorna questo DOM", dici "ecco com'è l'UI quando i dati sono così" — React fa reconciliation via Virtual DOM.
JS puro
Devi gestire a mano ogni aggiornamento del DOM. Funziona per 2 bottoni, diventa ingestibile per 200 stati.
React
Descrivi lo stato con useState. React aggiorna il DOM in modo ottimale. Codice prevedibile e testabile.
Riusabilità
Un componente = funzione + JSX + stato. Lo riusi ovunque. È il LEGO dell'interfaccia moderna.
Il problema che Vite risolve
React usa JSX che i browser non capiscono. Serve un build tool. Webpack è potente ma lento all'avvio. Nel 2021 Evan You crea Vite (dal francese "veloce"): sfrutta ES Modules nativi, serve file on-demand, HMR istantaneo senza ricaricare la pagina.
Confondere Vite con un framework. Vite NON è React. Vite è il build tool + dev server che compila JSX e serve il progetto. Puoi usarlo con React, Vue, Svelte. React è la libreria UI che gira dentro Vite.
| Strumento | Ruolo | Problema che risolve | Alternative |
|---|---|---|---|
| Node.js | Runtime server + gestore pacchetti npm | Eseguire JS fuori dal browser; gestire dipendenze | Deno, Bun |
| React | Libreria UI a componenti | Sincronizzazione stato–DOM, riusabilità | Vue, Svelte, Angular |
| Vite | Build tool e dev server ultra-veloce | Compilazione JSX, HMR, bundling produzione | Webpack, Parcel |
| VS Code | IDE / Editor | Editing, debug, Git, estensioni web dev | WebStorm, Zed |
2. Come funzionano insieme — architettura frontend ↔ backend
Durante lo sviluppo Vite gira su localhost:5173 e serve il frontend React. Express gira su localhost:3001 e fornisce API REST. I due parlano via HTTP/JSON. In produzione frontend su Vercel (CDN) e backend su Render (cloud).
VS Code · npm · Deploy su Vercel + Render — Architettura che costruiremo
In laboratorio vedrai subito l'errore CORS quando frontend e backend girano su porte diverse. È normale: il browser blocca richieste cross-origin. Lo risolveremo nella Lezione 8 con il proxy di Vite e il middleware cors in Express. Per ora ricordalo: due porte = due server = serve configurazione.
3. Il progetto che costruiremo: DevNotes
Attraverso le 10 lezioni costruiamo DevNotes — app per gestire appunti tecnici (snippet, link, note). Semplice da imparare, completa da toccare tutto lo stack.
Crea, leggi, aggiorna, elimina
Note con titolo, contenuto e tag. Operazioni base di qualunque app.
Filtri e ricerca
Filtro per tag e ricerca per titolo. Stato UI con hooks React.
Login e rotte protette
Registrazione, login, protected routes, localStorage, flow stateless.
DevNotes è come il tuo quaderno di Sistemi e Reti, ma digitale: ogni nota è un comando Linux, una configurazione, un pezzo di codice che vuoi ritrovare al volo. Alla fine avrai un link pubblico da mettere nel CV: molto più efficace di uno screenshot.
4. Il percorso completo — 10 lezioni
| # | Titolo | Argomenti chiave | Lab GitHub |
|---|---|---|---|
| L01 | Setup ambiente ← sei qui | Node.js, npm, Vite, VSCode + estensioni, primo progetto | lab-01 |
| L02 | Componenti e JSX | Struttura Vite, JSX, componenti funzionali, props | lab-02 |
| L03 | Stato e interattività | useState, eventi, useEffect, ciclo di vita | lab-03 |
| L04 | Stile: CSS Modules e Tailwind | CSS Modules, Tailwind in Vite, utility classes | lab-04 |
| L05 | Routing con React Router v6 | SPA vs MPA, Route/Link/Outlet, useParams | lab-05 |
| L06 | Lavorare con le API REST | fetch, async/await, custom hook useFetch | lab-06 |
| L07 | Backend con Express | Server Node, route CRUD, middleware, CORS | lab-07 |
| L08 | Connettere frontend e backend | Proxy Vite, chiamate locali, POST, errori | lab-08 |
| L09 | Autenticazione JWT | jsonwebtoken, bcrypt, protected routes | lab-09 |
| L10 | Deploy: Vercel + Render | Build produzione, env vars, CI/CD | lab-10 |
5. Setup ambiente: cosa facciamo in questa lezione
In questa prima lezione non scriviamo ancora codice applicativo. Installiamo strumenti, configuriamo l'editor e creiamo il primo progetto Vite + React per capire cosa genera di default e come funziona il dev server.
- Node.js installato e funzionante (con npm) — verifica con
node -v - VS Code configurato con estensioni: ES7+ React, Prettier, ESLint
- Primo progetto Vite + React in esecuzione su
localhost:5173 - Comprensione della struttura cartelle:
src/,public/,vite.config.js
Su Windows se dopo l'installazione node -v dà "comando non riconosciuto", chiudi e riapri il terminale (o VS Code). L'installer aggiunge Node al PATH solo nei nuovi terminali. Su macOS con Homebrew, assicurati che /opt/homebrew/bin sia nel PATH.
6. Come seguire al meglio la serie
Ogni articolo è accompagnato da un file .md su GitHub con istruzioni pratiche passo-passo. Leggi prima l'articolo per capire il "perché", poi apri il file .md per il "come". I due si completano.
1. Leggi la lezione senza copiare codice. 2. Apri il lab su GitHub e rifai i passaggi a mano. 3. Rompi qualcosa di proposito (cambia una porta, togli un import) e leggi l'errore. Capire l'errore è metà del lavoro di uno sviluppatore.
7. Verifica / Esercizio pratico
🔬 Attività — Lab 01
Apri il lab pratico dal meta-pill giallo in alto. Esegui tutti i passaggi e rispondi:
- Cosa contiene
package.jsondoponpm install? Qual è la differenza tra dependencies e devDependencies? - Perché Vite mostra "HMR" quando salvi un file? Cosa succede senza ricaricare la pagina?
- Modifica
App.jsxper mostrare il tuo nome e un contatore che parte da 10. Fai screenshot del browser.
1. package.json lista dipendenze. dependencies = codice che serve in produzione (react, react-dom). devDependencies = strumenti solo per sviluppo (vite, @vitejs/plugin-react). 2. HMR = Hot Module Replacement: Vite sostituisce solo il modulo modificato, mantiene lo stato degli altri. 3. useState(10) e JSX con {nome} — vedi lab-02 per soluzione completa.
8. Riepilogo e concetti chiave
📚 Prossimo passo — L02 Componenti e JSX
Ora che hai il progetto avviato, entriamo nel cuore di React: scopriremo come è fatta la cartella src, cos'è JSX davvero e come creare i primi componenti funzionali con props. Porta con te il progetto devnotes funzionante.