Installare React: crea un'app React con Vite

Per installare React, crea un nuovo progetto con Vite: esegui npm create vite@latest my-app -- --template react, poi cd my-app, npm install e npm run dev. Prima ti serve Node.js installato. Vite configura React, la compilazione di JSX e un server di sviluppo che ricarica la pagina quando salvi.

Per iniziare a imparare non ti serve nulla di tutto questo. L'editor qui sotto esegue React in questa pagina; è una versione semplificata del file App.jsx che Vite genera per te.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Clicca il pulsante, poi cambia il testo del titolo: l'anteprima si aggiorna mentre scrivi, proprio come il server di sviluppo di Vite applica le tue modifiche senza ricaricare la pagina (è questo che significa "HMR", hot module replacement).

Prerequisiti: Node.js

Gli strumenti che costruiscono un'app React girano su Node.js, e npm (il suo gestore di pacchetti) è incluso. Installa la release LTS attuale dal sito di Node.js o con un gestore di versioni come nvm, poi controllala in un terminale:

node -v
npm -v

Entrambi i comandi dovrebbero stampare un numero di versione. Se node -v stampa una versione vecchia, aggiornala: Vite 8 richiede Node.js 20.19 o successivo (22.12 o successivo sulla linea 22) e mostra un avviso sulle release più vecchie.

Creare un'app React con Vite

Esegui questi quattro comandi nella cartella dove tieni i tuoi progetti:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest scarica l'ultima versione del generatore di progetti. my-app è il nome della cartella, e --template react sceglie React semplice con JavaScript. Il -- in più passa l'opzione del template attraverso npm fino al generatore.
• npm install scarica React, React DOM, Vite e le altre dipendenze elencate in package.json dentro node_modules.
• npm run dev avvia il server di sviluppo e stampa un indirizzo locale, di solito http://localhost:5173. Aprilo in un browser.

Il generatore poi fa due domande: quale linter configurare (Oxlint o ESLint) e se installare e avviare subito l'app. Se rispondi sì alla seconda, esegue npm install e npm run dev per te, quindi puoi saltare gli ultimi due comandi. Per TypeScript usa invece --template react-ts; vedi React con TypeScript.

I file creati da Vite

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Tre di questi contano più degli altri:

index.html è la pagina che il browser carica. Il suo body contiene un unico elemento vuoto, <div id="root"></div>, e un tag script che carica src/main.jsx. React disegna tutta l'app dentro quel div.

src/main.jsx è il punto di ingresso. Collega React alla pagina:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot prende l'elemento #root e rende React responsabile di tutto ciò che contiene. render(<App />) disegna lì il tuo componente principale. StrictMode è un aiuto per lo sviluppo che esegue alcuni controlli in più; non ha alcun effetto nella build di produzione (vedi Strict Mode). Raramente dovrai modificare questo file.

src/App.jsx è il tuo primo componente, e il file che modifichi. La versione di Vite importa tre immagini (un'immagine hero e i loghi di Vite e React) e App.css, e termina con export default App. Equivale a scrivere export default function App() in cima, che è la forma usata dagli esempi di queste pagine.

La tua prima modifica

Apri src/App.jsx, cancella ciò che contiene e sostituiscilo con il tuo componente. Salva, e il browser si aggiorna. Ecco una piccola prima app da scrivere; provala prima qui:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Scrivi nella casella e il titolo la segue. Poi aggiungi un secondo <Greeting name="Vite" /> sotto il primo: i componenti sono riutilizzabili, e ogni copia riceve il proprio name.

Quando App.jsx cresce, sposta i componenti in file separati, come src/Greeting.jsx, esportali e importali dove li usi. La pagina sui componenti mostra come fare.

Build per la produzione

Il server di sviluppo serve per lavorare sul codice. Quando sei pronto a pubblicare, esegui la build dell'app:

npm run build
npm run preview

npm run build compila JSX, crea il bundle, minimizza il codice e scrive file statici in una cartella dist/. npm run preview serve quella cartella in locale, così puoi controllare la build reale. Carica dist/ su qualsiasi hosting statico. Nella build React passa anche alla modalità di produzione, che è più veloce e salta gli avvisi di sviluppo.

Create React App è deprecato

Per anni il modo standard di iniziare è stato npx create-react-app my-app. A febbraio 2025 il team di React ha deprecato Create React App, che non viene più mantenuto. Molti tutorial più vecchi lo usano ancora, quindi vi troverai react-scripts start e un file di ingresso src/index.js; i componenti in sé funzionano allo stesso modo in un progetto Vite.

Cosa usare al suo posto:

• Vite per un'app lato client, un progetto di studio o un widget: la configurazione vista sopra.
• Un framework quando ti servono routing, rendering lato server o caricamento dei dati integrati. Next.js e la modalità framework di React Router sono le scelte più comuni:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Per spostare un progetto Create React App esistente su Vite, i passaggi principali sono: installa vite e @vitejs/plugin-react e rimuovi react-scripts; aggiungi un vite.config.js che carica il plugin di React; sposta index.html da public/ alla radice del progetto, togli i segnaposto %PUBLIC_URL% e aggiungi un tag <script type="module" src="/src/index.jsx"> per il tuo file di ingresso; rinomina in .jsx i file che contengono JSX; rinomina le variabili d'ambiente REACT_APP_ in VITE_ e leggile da import.meta.env; infine sostituisci i comandi react-scripts in package.json con vite, vite build e vite preview.

Aggiungere React a una pagina esistente

React non deve per forza gestire l'intera pagina. Puoi eseguirne il rendering dentro un solo elemento di un sito esistente, come un widget del carrello in un negozio renderizzato lato server. Ti serve comunque un bundler come Vite per compilare JSX. Installa i due pacchetti:

npm install react react-dom

Poi crea una root sull'elemento che vuoi far controllare a React:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Tutto ciò che sta fuori da #cart resta com'era. Puoi creare più root in una pagina, una per elemento, e ognuna funziona in modo indipendente.