La tua prima app React con Vite

Te lo mostro: configurare il progetto

Vite (si pronuncia “veet”, francese per “veloce”) è uno strumento che prepara per te lo scheletro di un progetto React pronto all’uso. Apri il terminale e vai dove vuoi che viva il progetto (tipo il Desktop):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite potrebbe chiederti qualcosa – conferma con Invio. Poi:

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install scarica tutto ciò che serve al progetto (ci vuole un momento – React e i suoi aiutanti finiscono nella cartella node_modules).
• npm run dev -- --port 3901 avvia il server di sviluppo. Il terminale mostrerà l’indirizzo http://localhost:3901. Aprilo nel browser.

Vedi un logo che gira e il titolo “Vite + React”? Congratulazioni – la tua prima app React è in esecuzione! 🎉

Un giro nel progetto

Apri la cartella my-react-web in VS Code (File → Open Folder). Sembra tanta roba, ma per ora contano solo tre file:

Ignora il resto per ora (non aprire mai né cancellare node_modules, package.json è l’elenco dei pacchetti del progetto).

La tua prima modifica al codice

Apri src/App.jsx. Cancella tutto e scrivi:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Salva – e la pagina nel browser è cambiata da sola. Ecco cosa stai guardando:

• Il componente App è una funzione che restituisce HTML (questa notazione si chiama JSX).
• {name} – le parentesi graffe inseriscono JavaScript nell’HTML. Qualsiasi cosa: una variabile, un calcolo {2 + 3}, persino una condizione.
• export default App – “offro questo componente ad altri file” (main.jsx è quello che lo prende).

JSX ha due stranezze a cui ti abituerai: invece di class, scrivi className (class è una parola riservata in JavaScript), e un componente deve restituire un solo elemento contenitore (ecco perché c’è un <div> intorno a tutto).

Ora tocca a te 💪

1. Configura il progetto seguendo la guida e avvialo.
2. Modifica App.jsx: un titolo con il tuo nome, un paragrafo su cosa stai costruendo, e una variabile age che mostri nella frase I am {age} years old.
3. Cancella di proposito un tag di chiusura e guarda com’è l’errore – Vite lo mostra direttamente nel browser, con il numero di riga. Poi correggilo.
4. Ferma il server (Ctrl+C nel terminale) e riavvialo (npm run dev -- --port 3901) – per prendere confidenza con tutto il ciclo.

Cosa porti via da questa lezione

• npm create vite@latest configura un progetto, npm install scarica i pacchetti, npm run dev avvia localhost.
• Scrivi codice in src/App.jsx: un componente è una funzione che restituisce JSX, {} inserisce JavaScript nell’HTML.
• In JSX: className invece di class, sempre un elemento contenitore.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti