Cos'è React? Concetti chiave e differenze rispetto a jQuery

React è una libreria JavaScript per costruire interfacce utente (UI). Mentre jQuery si concentra sulla selezione e modifica diretta degli elementi della pagina, React si concentra sulla descrizione dell'interfaccia per un dato stato dei tuoi dati. Comprendere componenti e state rende più facile confrontare i due strumenti e decidere quando utilizzarli.

Cos'è React?

In React, costruisci parti di un'interfaccia, come pulsanti, caselle di ricerca e schede di articoli, come componenti. Ogni componente unisce il suo aspetto e il comportamento correlato. Puoi combinare i componenti in una pagina e riutilizzare una scheda fornendo un titolo e un autore diversi per ogni articolo.

React usa JavaScript, e HTML e CSS rimangono utili per comprendere la struttura e l'aspetto di un'interfaccia web. Installare React non fornisce automaticamente un server di login, un database o la navigazione tra gli URL. Devi ancora scegliere e implementare le altre parti della tua applicazione. Questo articolo si concentra su un'interfaccia di base che funziona in un browser; la guida introduttiva ufficiale di React introduce i suoi elementi fondamentali.

I concetti fondamentali di React

Componenti: unità di aspetto e comportamento

Un componente funzione è una funzione JavaScript che restituisce il contenuto da visualizzare. I nomi dei componenti che definisci iniziano con una lettera maiuscola, come ProductCard, mentre gli elementi HTML come button usano nomi minuscoli. Il componente seguente definisce una scheda una volta sola in modo da poter riutilizzare la sua struttura con dati di prodotto diversi.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX: esprimere markup all'interno di JavaScript

JSX è un'estensione di sintassi che permette di scrivere markup simile a HTML in un file JavaScript. La sezione <article> sopra è JSX. Le parentesi graffe consentono di inserire espressioni JavaScript come name e price. Incollare questo componente in un normale file HTML non è sufficiente per eseguirlo.

JSX utilizza className invece di class e richiede tag chiusi esplicitamente, come <img />. Elementi di livello superiore multipli devono essere racchiusi in un elemento genitore o in un Fragment. JSX è comune negli esempi e progetti introduttivi, anche se React può essere utilizzato senza di esso. Vedi Le regole di React per scrivere JSX per la sintassi.

Props: dati passati da un componente genitore

Le props, abbreviazione di properties, sono valori che un componente genitore passa a un figlio. Permettono alla stessa scheda di mostrare nomi e prezzi diversi, o allo stesso pulsante di mostrare etichette differenti. Una prop può contenere una stringa, un numero, un oggetto o una funzione. Ecco un esempio illustrativo di un prodotto con prezzo in won coreano (KRW):

<ProductCard name="Beginner keyboard" price={35000} />

Un componente figlio legge le sue props per costruire il suo output. Tratta le props come di sola lettura: se i loro valori devono cambiare, aggiorna i dati nel componente genitore in modo che passi nuovi valori. Un componente genitore può anche passare una funzione di callback affinché il figlio la chiami dopo un'azione dell'utente. Passare props a un componente spiega questo flusso di dati.

Stato: ricordare i valori che cambiano

Lo stato è l'informazione che un componente ha bisogno di ricordare, come un valore di input, una selezione o il numero di clic. Chiamando useState si ottiene il valore corrente e una funzione per aggiornarlo. useState è un Hook, una funzione che dà a un componente l'accesso alle funzionalità di React; chiamala al livello superiore della funzione del componente.

const [count, setCount] = useState(0);

Il valore iniziale è 0, count è lo stato attuale e setCount richiede un aggiornamento. Modificare soltanto una variabile ordinaria non dice a React di aggiornare l'interfaccia. I valori che guidano la visualizzazione necessitano di una struttura di stato appropriata. Stato: la memoria di un componente spiega come lo stato differisce da una variabile locale.

Come aggiorna l'interfaccia React?

In un contatore, cliccare un pulsante richiede un aggiornamento dello stato. React quindi calcola l'output per quello stato e applica le modifiche necessarie al DOM. Il Document Object Model (DOM) è la rappresentazione oggettuale di un documento nel browser, inclusi i suoi elementi e testi.

1. Azione dell'utente: il clic su un pulsante esegue un gestore di eventi.
2. Richiesta di aggiornamento: setCount specifica il valore successivo.
3. Renderizza: React chiama i componenti per calcolare il loro output.
4. Commit: React applica le modifiche necessarie al DOM.
5. Paint: il browser disegna il risultato.

Rendering significa calcolare l'output chiamando i componenti. Non significa ricaricare l'intera pagina o cancellare e ricreare ogni elemento HTML. Se l'output non è cambiato, un render potrebbe non richiedere modifiche al DOM. La documentazione di React su render e commit distingue questi passaggi.

Chiamare setCount non sostituisce immediatamente il valore di count all'interno dell'event handler in esecuzione. Richiede lo stato per un render successivo, e React può raggruppare più aggiornamenti. Quando il nuovo valore dipende dal valore precedente, esprimi tale relazione con una funzione updater:

setCount(previousCount => previousCount + 1);

Questa funzione riceve lo stato in sospeso e restituisce il prossimo stato. È utile quando sono in coda diversi incrementi, perché ogni aggiornamento viene calcolato dal risultato precedente. Il riferimento useState spiega le funzioni updater e i loro requisiti.

Qual è la differenza tra React e jQuery?

jQuery è anche una libreria JavaScript. Fornisce selettori, gestione degli eventi, modifiche ai contenuti e agli stili, e richieste Ajax. Ajax, abbreviazione di Asynchronous JavaScript and XML, è una tecnica per scambiare dati con un server senza ricaricare l'intera pagina; i dati scambiati non devono essere necessariamente XML. L'introduzione ufficiale di jQuery elenca la manipolazione del DOM e la gestione degli eventi tra le sue principali caratteristiche.

Considera di aggiungere un prodotto a un carrello. Con jQuery, il tuo codice potrebbe inserire un elemento nella lista, aggiornare la quantità e il totale, e nascondere il messaggio di carrello vuoto. Con React, puoi descrivere queste visualizzazioni in termini dello stato del carrello. Nessun approccio gestisce automaticamente gli errori del server o valida tutti i dati in arrivo.

React non è sempre più veloce e il codice jQuery non è sempre più difficile da mantenere. I risultati dipendono dall'interfaccia, dall'implementazione, dal codice caricato e dalle azioni dell'utente. Una singola piccola interazione e un'interfaccia che sincronizza molti stati creano diverse esigenze di manutenzione, quindi valutale nel loro contesto.

Costruisci lo stesso contatore con jQuery e React

Entrambi gli esempi iniziano da 0 e incrementano il conteggio di 1 ogni volta che il pulsante viene attivato. I loro titoli identificano la libreria; la loro funzionalità e il layout sono altrimenti equivalenti. Confronta dove ciascuna implementazione aggiorna il numero visualizzato. Gli esempi seguenti sono stati verificati con React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0 e Microsoft Edge 154, inclusi clic del mouse, attivazione tramite tastiera e ricaricamenti della pagina.

Esempio jQuery: modifica il testo di un elemento selezionato

Salva il codice completo qui sotto come jquery-counter.html usando la codifica UTF-8, quindi aprilo in un browser. Carica jQuery 4.0.0 dal Content Delivery Network (CDN) ufficiale, quindi è necessaria una connessione a Internet. Controlla le versioni e i file ufficiali di jQuery disponibili.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") seleziona il pulsante e .on("click", ...) associa il gestore. Dopo aver modificato la variabile, il codice chiama $("#count").text(count) per aggiornare il testo visualizzato. Consulta le referenze jQuery .on() e le referenze jQuery .text() per queste operazioni.

Gli script sono collocati dopo il pulsante nel codice HTML, quindi gli elementi target esistono già quando questo esempio viene eseguito. Se nulla cambia, controlla la richiesta CDN e gli errori della console negli strumenti di sviluppo del browser e confronta gli ID degli elementi con i selettori. Quando adatti questo a un tema WordPress, evita di caricare la libreria due volte e verifica se $ fa riferimento a jQuery nella sua configurazione noConflict.

Esempio React: aggiorna lo stato per modificare l'interfaccia

Questo esempio di apprendimento utilizza il modello JavaScript React di Vite. Vite fornisce un server di sviluppo e trasforma e costruisce i file sorgente. Node.js esegue questi strumenti sul tuo computer, e npm installa pacchetti ed esegue comandi del progetto. Installa una versione supportata a lungo termine (LTS) di Node.js che soddisfi i requisiti indicati nella guida introduttiva di Vite. Ad ottobre 2026, la guida elenca Node.js 20.19+ o 22.12+; verifica anche eventuali requisiti aggiuntivi del modello generato.

1. Apri un terminale nella cartella in cui vuoi creare il progetto. Assicurati che una cartella con lo stesso nome non esista già.
2. Esegui i comandi qui sotto per creare il modello JavaScript react e installare i suoi pacchetti.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

Al primo avvio, npm potrebbe chiederti di confermare l'installazione dello strumento di scaffolding. Dopo l'installazione, sostituisci il contenuto di src/App.jsx con il codice seguente. label è una prop fornita dal componente genitore, e count è uno stato ricordato dal componente.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

Usa il seguente codice di avvio in src/main.jsx. createRoot collega l'interfaccia React all'elemento HTML con l'ID root, e index.css fornisce gli stili.

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

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

Sostituisci src/index.css con il CSS sottostante per corrispondere all'esempio jQuery. Il sostituto App.jsx non importa App.css, quindi gli stili predefiniti del componente del template non interferiscono con questo layout.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

Il index.html del progetto deve contenere <div id="root"></div> e lo script del modulo che carica src/main.jsx. Mantieni questa struttura dal template Vite e usa lang="en" per il documento in inglese. Avvia il server di sviluppo:

npm run dev

Apri l'indirizzo locale stampato nel terminale. Di solito è http://localhost:5173, ma potrebbe essere usata una porta diversa se quella porta è occupata. Ferma il server con Ctrl+C nel terminale. Se le modifiche non appaiono, verifica di aver salvato il file e di stare lavorando nel progetto corretto. Gli errori JSX appaiono nel terminale o nel display degli errori del browser.

Il gestore di React non seleziona l'elemento numerico e non ne sostituisce il testo. L'espressione JSX {count} collega l'output allo stato, e setCount richiede un nuovo stato. In entrambi gli esempi, ricaricare la pagina ripristina il conteggio a 0 perché non è stato implementato alcun sistema di memorizzazione. Questi esempi illustrano i modelli di aggiornamento; non sono un benchmark di prestazioni.

Quando dovresti scegliere React o jQuery?

Aggiungere una piccola funzionalità a una pagina esistente

Un pulsante che attiva un elemento o un piccolo menu può essere semplice con jQuery. Se la pagina esistente già dipende da jQuery, mantenere quella struttura può ridurre l'entità della modifica. Considera anche se le API DOM standard sono sufficienti. Non è necessario introdurre una nuova dipendenza per ogni piccola interazione.

Costruire un'interfaccia con stati collegati

Il modello di componenti e stati di React vale la pena di essere considerato quando gli stessi dati influenzano un elenco di prodotti, i filtri e i totali del carrello, o quando interfacce simili appaiono ripetutamente. Devi comunque decidere quale componente possiede ciascuno stato e quando i dati del server dovrebbero aggiornarsi. Adottare solo React non garantisce un buon design.

Aggiungere React a una parte di un sito esistente

Non è necessario ricostruire l'intero sito per usare React. È possibile montare un componente all'interno di un elemento specifico e mantenere il resto della pagina nella sua forma esistente. La guida ufficiale a aggiungere React a un progetto esistente descrive la configurazione e l'ambito.

Se React e jQuery condividono una pagina, bisogna dare loro confini chiari per la proprietà del DOM. Aggiungere o eliminare arbitrariamente figli gestiti da React può far sì che il DOM reale sia fuori sincronia con la sua rappresentazione in React. Un plugin che manipola il DOM necessita di un'integrazione che gestisca la sua inizializzazione e il cleanup all'interno del ciclo di vita appropriato. Vedere le indicazioni di React sulla modifica del DOM che gestisce per queste limitazioni.

Prima di adottare uno strumento, considera la complessità dello stato dell'interfaccia, i componenti che puoi riutilizzare, l'esperienza del tuo team con JavaScript e la configurazione di sviluppo e distribuzione. Una piccola pagina con una dipendenza esistente da jQuery ha bisogni diversi rispetto a una nuova applicazione interattiva. Dopo aver imparato le basi di HTML, CSS e JavaScript, eseguire questi contatori fornisce un confronto concreto tra modificare direttamente gli elementi e descrivere un'interfaccia attraverso lo stato.