Framework · Dal 2013

React

React è una libreria JavaScript per creare interfacce a componenti: descrivi come deve apparire la UI e React aggiorna solo ciò che cambia.

Inizia la guida Discussioni

React è una libreria per interfacce utente nata in Meta (allora Facebook) e pubblicata come open source nel 2013. Lo schermo viene suddiviso in piccoli componenti funzione, e ognuno descrive in JSX come deve apparire in base alle props che riceve e allo stato che conserva. Quando i dati cambiano, React confronta il nuovo risultato con il precedente e applica al DOM solo le differenze effettive.

React dà il meglio nelle schermate molto interattive, piene di pulsanti, moduli ed elenchi. Si usa per applicazioni a pagina singola, dashboard, strumenti di amministrazione e design system, e lo stesso modello mentale vale per i siti renderizzati sul server con framework come Next.js o per le app mobili con React Native. L'ampio ecosistema di router, librerie per il recupero dei dati e strumenti di test permette di scegliere e combinare i pezzi necessari.

Per iniziare, segui il Quick Start e il tutorial del tris su react.dev. La documentazione ufficiale consiglia un framework come Next.js per i nuovi prodotti, ma per imparare è più semplice capire un progetto essenziale creato con Vite. Conoscere prima il JavaScript moderno, come i metodi degli array, la destrutturazione e i moduli, rende JSX e gli hook molto più comprensibili.

Punti di forza

Progettazione a componenti

L'interfaccia si divide in componenti funzione indipendenti, i dati passano tramite props e piccoli pezzi compongono schermate complete.

UI dichiarativa con JSX

Invece di modificare il DOM a mano, descrivi in JSX il risultato per lo stato corrente e React aggiorna solo ciò che è cambiato.

Stato ed effetti con gli hook

Hook come useState, useEffect, useRef e useContext gestiscono stato, effetti collaterali, riferimenti al DOM e dati condivisi in semplici funzioni.

Un ecosistema ampio

Con Next.js, React Router, TanStack Query, React Native e altri strumenti collaudati si lavora allo stesso modo dal web al mobile.

Dove si usa

Applicazioni a pagina singola (SPA)
Dashboard e strumenti di amministrazione
Design system e componenti UI riutilizzabili
App web e mobili con Next.js o React Native

Installazione

1
Preparare Node.js
Gli strumenti di React funzionano su Node.js. Installa la versione LTS da nodejs.org e verifica che node e npm mostrino la loro versione.
```
node --version && npm --version
```
2
Creare un progetto con Vite
Il template react-ts di Vite crea un progetto React con TypeScript. Per JavaScript semplice usa invece il template react.
```
npm create vite@latest my-app -- --template react-ts
```
3
Avviare il server di sviluppo
Entra nella cartella del progetto, installa le dipendenze e avvia il server di sviluppo. Apri nel browser l'indirizzo mostrato nel terminale (per impostazione predefinita http://localhost:5173).
```
cd my-app && npm install && npm run dev
```

Il tuo primo programma

Il tuo primo componente

La funzione App in src/App.tsx è un componente che restituisce il JSX da mostrare. Crea uno stato count con l'hook useState, e il clic sul pulsante lo modifica tramite setCount. Quando lo stato cambia, React richiama App e aggiorna solo il numero sullo schermo. Finché il server di sviluppo è attivo, il browser si aggiorna subito a ogni salvataggio.

src/App.tsx

import { useState } from "react";

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

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

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

Strumenti di tutti i giorni

Vite: Strumento di build frontend con un server di sviluppo veloce e build di produzione ottimizzate. Offre template ufficiali per React.
React Developer Tools: Estensione del browser per esaminare l'albero dei componenti, le props e lo stato di ciascuno e misurare le prestazioni di rendering.
ESLint: Un linter. Con eslint-plugin-react-hooks individua le violazioni delle regole degli hook e le dipendenze mancanti negli effetti.
Vitest: Un test runner che riusa la configurazione di Vite. Insieme a React Testing Library verifica i componenti dal punto di vista dell'utente.

Guida passo passo

Sei capitoli che ti accompagnano dall'installazione ai concetti chiave di React.

Documentazione ufficiale e risorse

Linguaggi

Discussioni

Avvia una discussione

Fai domande, condividi la tua esperienza e scambia opinioni su React.

Ancora nessuna discussione. Avvia la prima.