Perché i professionisti usano React

Ricordi quando hai copiato quel menu?

Al Livello 1, avevi un’intestazione con un menu su ogni pagina. E ogni volta che aggiungevi una nuova pagina, dovevi copiare il menu – e correggerlo ovunque a ogni modifica. Fastidioso con tre pagine, un incubo con trenta. E proprio da quel dolore inizia la nostra storia.

Componenti: scrivi una volta, usa ovunque

I professionisti si sono chiesti: e se il menu fosse un solo pezzo di codice che viene semplicemente “inserito” in ogni pagina? Lo cambi in un posto – cambia ovunque. Un pezzo così si chiama componente.

E non è solo il menu. Guarda il tuo sito web con gli occhi di un set di mattoncini:

• una scheda giocatore (ce l’hai 4 volte – e differisce solo per nome e posizione),
• una foto nella galleria (10 volte – differisce solo l’immagine),
• un pulsante (ovunque – differisce solo il testo).

Il sito web di un professionista non è un mucchio di file HTML. È una scatola di LEGO: una manciata di blocchi personalizzati (componenti) assemblati in un’applicazione completa.

Cos’è React

React è uno strumento (una libreria) per JavaScript che gestisce questo tipo di assemblaggio. È stato inventato da Facebook, è gratuito, e una parte enorme di internet è costruita sopra di esso: Facebook, Instagram, Netflix, Airbnb… Un componente in React assomiglia a questo – non preoccuparti, per ora stiamo solo guardando:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

E si usa come un tag HTML personalizzato:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Ti suona familiare? È una funzione (dal Livello 2) che restituisce HTML. La scheda è scritta una volta e usata con dati diversi – come un timbro con lettere intercambiabili.

Superpotere numero due: React gestisce il ridisegno

Al Livello 2 hai scritto: “trova l’elemento, cambia il testo, aggiungi una classe…” Nelle grandi applicazioni c’è così tanto riorganizzazione manuale che ci si perde. React capovolge tutto:

Descrivi come dovrebbe apparire la pagina per dati dati. Quando i dati cambiano, React capisce da solo cosa ridisegnare.

Il punteggio passa da 0 a 1? Non cerchi nessun elemento – cambi solo il numero, e React ridisegna ciò che serve. Lo vedrai in azione nella lezione sullo state.

Cosa ti aspetta in questo livello

1. Installerai gli strumenti da professionista: il terminale e Node.js (prossima lezione).
2. Configurerai la tua prima app React con Vite.
3. Imparerai componenti, props e state.
4. Ricostruirai il tuo sito web del Livello 1 in React.
5. Costruirai il tuo server Node.js e collegherai un libro degli ospiti.

Cosa porti via da questa lezione

• Copiare lo stesso codice in più posti è una trappola – l’hai già scoperto da solo al Livello 1.
• Un componente è una funzione che restituisce un pezzo di pagina. Scrivilo una volta, usalo molte volte con dati diversi.
• React ridisegna la pagina per te: tu cambi i dati, lui cambia lo schermo.

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