Introduzione a React

Cos’è React?

React è una libreria JavaScript open-source per la costruzione di interfacce utente. Sviluppata e mantenuta da Meta (ex Facebook), React si concentra sulla creazione di componenti UI riutilizzabili e dichiarativi. A differenza di framework completi come Angular, React si occupa esclusivamente del layer di presentazione, lasciando libertà allo sviluppatore nella scelta degli strumenti per routing, gestione dello stato e comunicazione con il server.

// Il componente React più semplice possibile
function Benvenuto() {
  return <h1>Ciao, mondo!</h1>;
}

Storia di React

React nasce nel 2011 come progetto interno di Facebook, creato da Jordan Walke, un ingegnere software che si ispirò a XHP, un framework PHP usato internamente. Ecco le tappe fondamentali:

2011 - Jordan Walke crea il primo prototipo chiamato “FaxJS”
2012 - React viene utilizzato internamente per il news feed di Facebook
2013 - React viene rilasciato come progetto open-source alla conferenza JSConf US
2015 - Viene rilasciato React Native per lo sviluppo mobile
2016 - React 15 introduce miglioramenti significativi alle performance
2017 - React 16 (Fiber) riscrive completamente il motore di riconciliazione
2019 - React 16.8 introduce gli Hooks, rivoluzionando il modo di scrivere componenti
2022 - React 18 porta il Concurrent Rendering, Automatic Batching e nuove API
2024 - React 19 introduce i Server Components e le Server Actions come funzionalità stabili

I Principi Fondamentali

React si basa su tre principi cardine che ne guidano l’architettura e l’utilizzo.

Approccio Dichiarativo

Con React descrivi cosa vuoi vedere sullo schermo, non come manipolare il DOM per arrivarci. Questo approccio rende il codice più prevedibile e facile da debuggare.

// Approccio imperativo (vanilla JS)
const container = document.getElementById("root");
const titolo = document.createElement("h1");
titolo.textContent = "Benvenuto";
titolo.className = "titolo-principale";
container.appendChild(titolo);

// Approccio dichiarativo (React)
function App() {
  return <h1 className="titolo-principale">Benvenuto</h1>;
}

Basato su Componenti

Ogni pezzo dell’interfaccia è un componente isolato e riutilizzabile. I componenti gestiscono il proprio stato interno e possono essere composti per creare UI complesse.

function Profilo({ nome, ruolo }) {
  return (
    <div className="profilo">
      <Avatar nome={nome} />
      <Info nome={nome} ruolo={ruolo} />
    </div>
  );
}

function App() {
  return (
    <div>
      <Profilo nome="Marco" ruolo="Developer" />
      <Profilo nome="Laura" ruolo="Designer" />
    </div>
  );
}

Learn Once, Write Anywhere

Le competenze acquisite con React si trasferiscono su diverse piattaforme: React DOM per il web, React Native per iOS e Android, React Three Fiber per il 3D, e molto altro.

Il Virtual DOM

Il Virtual DOM è il concetto architetturale alla base delle performance di React. Si tratta di una rappresentazione leggera in memoria del DOM reale del browser.

Come Funziona

Rendering iniziale: React crea un albero Virtual DOM che rappresenta l’intera UI
Aggiornamento stato: Quando lo stato cambia, React crea un nuovo albero Virtual DOM
Diffing (Riconciliazione): React confronta il nuovo albero con il precedente attraverso un algoritmo di diffing
Batching delle modifiche: Le differenze trovate vengono raggruppate
Aggiornamento DOM reale: Solo le parti effettivamente cambiate vengono applicate al DOM del browser

function Contatore() {
  const [count, setCount] = React.useState(0);

  // Quando clicchiamo, React:
  // 1. Aggiorna lo stato
  // 2. Ri-renderizza il Virtual DOM
  // 3. Confronta vecchio e nuovo VDOM
  // 4. Aggiorna solo il <span> nel DOM reale
  return (
    <div>
      <p>Hai cliccato <span>{count}</span> volte</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementa
      </button>
    </div>
  );
}

Riconciliazione con React Fiber

A partire da React 16, il motore di riconciliazione è stato riscritto con Fiber. Questo nuovo algoritmo permette di:

Interrompere il rendering per gestire eventi prioritari
Riprendere il lavoro dove era stato lasciato
Scartare lavoro non più necessario
Assegnare priorità diverse a diversi tipi di aggiornamenti

Introduzione a JSX

JSX (JavaScript XML) è un’estensione sintattica di JavaScript che permette di scrivere markup direttamente nel codice. Non è HTML, ma viene trasformato in chiamate React.createElement() durante la compilazione.

// Quello che scrivi (JSX)
const elemento = <h1 className="titolo">Ciao, {nome}!</h1>;

// Quello che il compilatore produce
const elemento = React.createElement(
  "h1",
  { className: "titolo" },
  "Ciao, ",
  nome,
  "!"
);

JSX supporta espressioni JavaScript racchiuse tra parentesi graffe {}, attributi come props, e si integra naturalmente con la logica del componente.

L’Ecosistema React

React ha un ecosistema vastissimo di librerie e strumenti complementari.

Strumenti di Build e Framework

Strumento	Descrizione
Vite	Build tool moderno e velocissimo, consigliato per nuovi progetti
Next.js	Framework full-stack con SSR, SSG e App Router
Remix	Framework focalizzato su web standards e progressive enhancement
Gatsby	Generatore di siti statici basato su React

Gestione dello Stato

Libreria	Caso d’uso
useState/useReducer	Stato locale del componente
Context API	Stato condiviso semplice
Zustand	Gestione stato globale leggera
Redux Toolkit	Stato globale complesso con middleware
TanStack Query	Stato del server e caching

Librerie UI e Styling

Tailwind CSS - Utility-first CSS framework
Shadcn/ui - Componenti riutilizzabili basati su Radix
Material UI - Implementazione Material Design
Styled Components - CSS-in-JS

Strumenti di Sviluppo

React DevTools - Estensione browser per ispezionare componenti e stato
ESLint plugin React - Regole di linting specifiche per React
React Testing Library - Testing orientato all’utente

Quando Usare React

React è la scelta ideale in diversi scenari.

Scenari Consigliati

Single Page Applications (SPA) con interazioni complesse
Dashboard e pannelli di amministrazione
Applicazioni enterprise con team di grandi dimensioni
Progetti che richiedono condivisione di codice tra web e mobile (con React Native)
Interfacce dinamiche con aggiornamenti frequenti dell’UI

Quando Valutare Alternative

Siti prevalentemente statici: considera Astro o un generatore di siti statici
Progetti molto semplici: vanilla JavaScript potrebbe bastare
SEO critico senza SSR: valuta Next.js o Remix sopra React puro
Team con esperienza su altri framework: Angular o Vue potrebbero essere più produttivi

Un Primo Esempio Completo

Ecco un componente React completo che dimostra diversi concetti fondamentali.

import { useState } from "react";

function ListaSpesa() {
  const [articoli, setArticoli] = useState([]);
  const [nuovoArticolo, setNuovoArticolo] = useState("");

  const aggiungiArticolo = () => {
    if (nuovoArticolo.trim()) {
      setArticoli([...articoli, { id: Date.now(), nome: nuovoArticolo, completato: false }]);
      setNuovoArticolo("");
    }
  };

  const toggleCompletato = (id) => {
    setArticoli(articoli.map(art =>
      art.id === id ? { ...art, completato: !art.completato } : art
    ));
  };

  return (
    <div>
      <h2>Lista della Spesa</h2>
      <div>
        <input
          value={nuovoArticolo}
          onChange={(e) => setNuovoArticolo(e.target.value)}
          placeholder="Aggiungi articolo..."
        />
        <button onClick={aggiungiArticolo}>Aggiungi</button>
      </div>
      <ul>
        {articoli.map(art => (
          <li
            key={art.id}
            onClick={() => toggleCompletato(art.id)}
            style={{ textDecoration: art.completato ? "line-through" : "none" }}
          >
            {art.nome}
          </li>
        ))}
      </ul>
    </div>
  );
}

Questo esempio mostra l’uso di stato, eventi, rendering di liste e aggiornamenti immutabili - tutti concetti che approfondiremo nei capitoli successivi.

Riepilogo

React è una libreria potente e flessibile per costruire interfacce utente moderne. I suoi punti di forza sono l’approccio dichiarativo, il sistema a componenti, il Virtual DOM per le performance e un ecosistema ricchissimo. Nelle prossime guide esploreremo ogni aspetto nel dettaglio, partendo dall’installazione e dalla configurazione dell’ambiente di sviluppo.