Approfondimento sui Concetti Essenziali di React

Introduzione

Questo approfondimento esplora come funzionano JSX, componenti, props e state management in React: la compilazione di JSX in React.createElement, fragments per evitare wrapper, forwarding props, state lifting, derived state, two-way binding e aggiornamenti immutabili.

JSX: Sotto il Cofano

JSX è una sintassi che permette di scrivere codice HTML-like all’interno di JavaScript, ma è importante capire che JSX non è codice JavaScript standard. Il browser non può eseguire direttamente JSX: è necessario un processo di compilazione che trasforma il codice JSX in codice JavaScript valido.

React.createElement: L’Alternativa Non-JSX

Tecnicamente, è possibile costruire applicazioni React senza usare JSX. React espone il metodo createElement che permette di creare elementi e componenti usando solo JavaScript standard.

1
// Codice JSX
2
function App() {
3
  return (
4
    <div>
5
      <h1>Titolo</h1>
6
      <p>Contenuto</p>
7
    </div>
8
  );
9
}
10

11
// Equivalente senza JSX usando React.createElement
12
function App() {
13
  return React.createElement(
14
    'div',
15
    null, // props
16
    React.createElement('h1', null, 'Titolo'),
17
    React.createElement('p', null, 'Contenuto')
18
  );
19
}

1
// Esempio con props e children
2
React.createElement(
3
  'button',           // tipo
4
  { onClick: handler }, // props
5
  'Clicca qui'        // children
6
);
7

8
// Esempio con componente personalizzato
9
React.createElement(Header, { title: 'Titolo' });

Fragments: Evitare Elementi Wrapper Inutili

Una limitazione importante di JSX è che ogni espressione JSX deve avere un singolo elemento radice. Non è possibile restituire più elementi fratelli direttamente, perché questo violerebbe la regola che una funzione può restituire solo un valore.

1
// ❌ Questo non funziona
2
function Component() {
3
  return (
4
    <h1>Titolo</h1>
5
    <p>Contenuto</p>
6
  );
7
}
8

9
// ✅ Questo funziona, ma aggiunge un div extra nel DOM
10
function Component() {
11
  return (
12
    <div>
13
      <h1>Titolo</h1>
14
      <p>Contenuto</p>
15
    </div>
16
  );
17
}

Aggiungere un div wrapper risolve il problema sintattico ma introduce un elemento HTML non necessario nel DOM, che può causare problemi con CSS, semantica HTML e performance.

Soluzione: React Fragments

React fornisce un componente speciale chiamato Fragment che permette di raggruppare elementi senza aggiungere nodi al DOM.

1
import React from 'react';
2

3
function Component() {
4
  return (
5
    <React.Fragment>
6
      <h1>Titolo</h1>
7
      <p>Contenuto</p>
8
    </React.Fragment>
9
  );
10
}

1
// Sintassi breve (non richiede import)
2
function Component() {
3
  return (
4
    <>
5
      <h1>Titolo</h1>
6
      <p>Contenuto</p>
7
    </>
8
  );
9
}

Suddivisione dei Componenti

Ogni componente dovrebbe avere una singola responsabilità. Quando un componente gestisce troppe cose diverse, diventa difficile da mantenere. Si suddivide quando c’è ripetizione di markup, troppe responsabilità, riesecuzioni non necessarie, o quando il file diventa troppo grande.

Quando si suddivide un componente, si può farlo per funzionalità (ogni funzionalità distinta diventa un componente separato), per riutilizzabilità (se una parte viene usata più volte), o per isolamento dello stato (se una parte ha il proprio stato indipendente).

1
function Counter() {
2
  const [count, setCount] = useState(0);
3

4
  return (
5
    <div>
6
      <p>{count}</p>
7
      <button onClick={() => setCount(count + 1)}>Incrementa</button>
8
    </div>
9
  );
10
}
11

12
function App() {
13
  return (
14
    <>
15
      <Counter /> {/* Istanza 1: stato isolato */}
16
      <Counter /> {/* Istanza 2: stato isolato */}
17
    </>
18
  );
19
}

Forwarding Props: Rendere i Componenti Flessibili

Quando si crea un componente wrapper attorno a un elemento HTML incorporato, spesso si vuole permettere di passare props aggiuntive a quell’elemento sottostante. Il pattern di forwarding props (o props proxy) permette di inoltrare automaticamente tutte le props non gestite esplicitamente.

Il Problema

Immaginiamo un componente Section che wrappa un elemento <section>:

1
function Section({ title, children }) {
2
  return (
3
    <section>
4
      <h2>{title}</h2>
5
      {children}
6
    </section>
7
  );
8
}

Se si vuole aggiungere un id o una className al <section>, bisognerebbe gestirli manualmente:

1
// Approccio manuale (non scalabile)
2
function Section({ title, children, id, className }) {
3
  return (
4
    <section id={id} className={className}>
5
      <h2>{title}</h2>
6
      {children}
7
    </section>
8
  );
9
}

Questo approccio non scala perché per ogni nuovo attributo HTML bisogna aggiungere un nuovo parametro.

Soluzione: Rest Properties e Spread Operator

JavaScript fornisce la sintassi delle rest properties per raccogliere props rimanenti, e lo spread operator per distribuirle:

1
function Section({ title, children, ...props }) {
2
  return (
3
    <section {...props}>
4
      <h2>{title}</h2>
5
      {children}
6
    </section>
7
  );
8
}
9

10
// Utilizzo: tutte le props extra vengono inoltrate automaticamente
11
<Section title="Titolo" id="sezione-1" className="highlight">
12
  Contenuto
13
</Section>

1
function Component({ prop1, prop2, ...rest }) {
2
  // prop1 e prop2 sono estratti esplicitamente
3
  // rest contiene tutte le altre props come oggetto
4
}

1
<element {...rest} />

1
function Button({ children, variant, ...props }) {
2
  return (
3
    <button className={`btn btn-${variant}`} {...props}>
4
      {children}
5
    </button>
6
  );
7
}
8

9
// Utilizzo
10
<Button variant="primary" onClick={handler} disabled>
11
  Clicca
12
</Button>
13

14
// Risultato: il button avrà onClick e disabled inoltrati automaticamente

Props Default Values: Valori Predefiniti

Spesso si vuole che un componente abbia valori predefiniti per alcune props, in modo che possa essere usato senza specificare tutti i parametri. JavaScript permette di definire valori predefiniti direttamente nella destrutturazione.

Sintassi dei Valori Predefiniti

1
function Button({ variant = 'primary', size = 'medium', children }) {
2
  return (
3
    <button className={`btn btn-${variant} btn-${size}`}>
4
      {children}
5
    </button>
6
  );
7
}
8

9
// Utilizzo senza specificare variant e size
10
<Button>Clicca</Button> {/* variant='primary', size='medium' */}
11

12
// Utilizzo con valori personalizzati
13
<Button variant="secondary" size="large">Clicca</Button>

I valori predefiniti rendono le props opzionali senza dover gestire undefined nel codice.

1
function Container({ as: Component = 'div', children, ...props }) {
2
  // Component può essere una stringa (elemento HTML) o un componente
3
  return <Component {...props}>{children}</Component>;
4
}
5

6
// Utilizzo con elemento HTML
7
<Container as="section" id="main">Contenuto</Container>
8

9
// Utilizzo con componente personalizzato
10
<Container as={CustomWrapper} className="special">Contenuto</Container>

State Lifting: Condividere lo Stato tra Componenti

Quando più componenti hanno bisogno di accedere alle stesse informazioni o reagire agli stessi cambiamenti di stato, lo stato deve essere “sollevato” (lifted) al componente antenato comune più vicino che ha accesso a tutti i componenti che ne hanno bisogno.

Il Problema dello Stato Locale

Immaginiamo di avere due componenti che devono condividere informazioni:

1
function Player({ name }) {
2
  const [isActive, setIsActive] = useState(false);
3
  // Come fa GameBoard a sapere quale giocatore è attivo?
4
}
5

6
function GameBoard() {
7
  // Come sa quale simbolo usare quando si clicca una casella?
8
}

Se ogni componente gestisce il proprio stato, non c’è modo di sincronizzarli. Lo stato deve essere sollevato al componente comune più vicino che ha accesso a tutti i componenti che ne hanno bisogno.

Soluzione: Sollevare lo Stato

Lo stato viene gestito nel componente comune più vicino e passato come props:

1
function App() {
2
  // Stato sollevato qui perché sia Player che GameBoard ne hanno bisogno
3
  const [activePlayer, setActivePlayer] = useState('X');
4

5
  return (
6
    <>
7
      <Player name="Giocatore 1" symbol="X" isActive={activePlayer === 'X'} />
8
      <Player name="Giocatore 2" symbol="O" isActive={activePlayer === 'O'} />
9
      <GameBoard
10
        activePlayerSymbol={activePlayer}
11
        onSquareClick={() => setActivePlayer(prev => prev === 'X' ? 'O' : 'X')}
12
      />
13
    </>
14
  );
15
}

Derived State: Calcolare invece di Memorizzare

Un principio fondamentale nello sviluppo React è derivare il maggior numero possibile di informazioni dallo stato esistente, invece di memorizzare ogni possibile valore come stato separato. Questo riduce la complessità e previene inconsistenze.

Il Problema dello Stato Ridondante

Immaginiamo di gestire un gioco che traccia i turni:

1
// Approccio con stato ridondante
2
const [gameTurns, setGameTurns] = useState([]);
3
const [gameBoard, setGameBoard] = useState(initialBoard);
4
const [activePlayer, setActivePlayer] = useState('X');

Questo approccio può portare a inconsistenze (gameBoard e gameTurns potrebbero non corrispondere) e richiede aggiornamenti multipli per ogni azione.

Soluzione: Derivare lo Stato

Invece di memorizzare tutto, si memorizza solo la fonte di verità e si derivano gli altri valori:

1
// Fonte di verità unica
2
const [gameTurns, setGameTurns] = useState([]);
3

4
// Valori derivati (calcolati, non memorizzati)
5
const gameBoard = deriveGameBoard(gameTurns);
6
const activePlayer = deriveActivePlayer(gameTurns);

1
function App() {
2
  const [gameTurns, setGameTurns] = useState([]);
3

4
  // Funzione helper per derivare il tabellone di gioco
5
  function deriveGameBoard(turns) {
6
    const board = [
7
      [null, null, null],
8
      [null, null, null],
9
      [null, null, null]
10
    ];
11

12
    // Applica ogni turno al tabellone
13
    for (const turn of turns) {
14
      board[turn.row][turn.col] = turn.player;
15
    }
16

17
    return board;
18
  }
19

20
  // Funzione helper per derivare il giocatore attivo
21
  function deriveActivePlayer(turns) {
22
    if (turns.length === 0) return 'X';
23
    const lastTurn = turns[0]; // ultimo turno
24
    return lastTurn.player === 'X' ? 'O' : 'X';
25
  }
26

27
  // Valori derivati calcolati ad ogni render
28
  const gameBoard = deriveGameBoard(gameTurns);
29
  const activePlayer = deriveActivePlayer(gameTurns);
30

31
  return (
32
    <GameBoard board={gameBoard} activePlayer={activePlayer} />
33
  );
34
}

Two-Way Binding: Sincronizzare Input e Stato

Il two-way binding (legame bidirezionale) è un pattern comune per gestire input di form in React. Consiste nel sincronizzare il valore mostrato nell’input con lo stato del componente, permettendo sia la lettura che la scrittura.

Pattern Base del Two-Way Binding

1
function InputComponent() {
2
  const [value, setValue] = useState('');
3

4
  function handleChange(event) {
5
    setValue(event.target.value);
6
  }
7

8
  return (
9
    <input
10
      type="text"
11
      value={value}           // Legge dallo stato
12
      onChange={handleChange} // Scrive nello stato
13
    />
14
  );
15
}

Come Funziona

1. Leggere dallo stato: Il prop value imposta il valore visualizzato nell’input
2. Scrivere nello stato: L’evento onChange viene attivato ogni volta che l’utente modifica l’input
3. Aggiornamento: event.target.value contiene il nuovo valore inserito dall’utente

1
function handleChange(event) {
2
  // event.target: riferimento all'elemento che ha emesso l'evento (l'input)
3
  // event.target.value: il valore corrente dell'input
4
  // event.type: tipo di evento ('change', 'click', etc.)
5

6
  const newValue = event.target.value;
7
  setValue(newValue);
8
}

1
function Form() {
2
  const [name, setName] = useState('');
3
  const [email, setEmail] = useState('');
4

5
  function handleNameChange(event) {
6
    setName(event.target.value);
7
  }
8

9
  function handleEmailChange(event) {
10
    setEmail(event.target.value);
11
  }
12

13
  return (
14
    <form>
15
      <input
16
        type="text"
17
        value={name}
18
        onChange={handleNameChange}
19
        placeholder="Nome"
20
      />
21
      <input
22
        type="email"
23
        value={email}
24
        onChange={handleEmailChange}
25
        placeholder="Email"
26
      />
27
    </form>
28
  );
29
}

Differenza tra value e defaultValue

È importante capire la differenza tra value e defaultValue:

• value: Crea un controlled component. Il valore è controllato da React e deve essere aggiornato tramite onChange
• defaultValue: Crea un uncontrolled component. Il valore iniziale viene impostato, ma poi il browser gestisce le modifiche

1
// Controlled component (two-way binding completo)
2
<input value={state} onChange={handler} />
3

4
// Uncontrolled component (solo valore iniziale)
5
<input defaultValue="valore iniziale" />

Immutability: Aggiornare Stato di Oggetti e Array

Quando lo stato contiene oggetti o array, è fondamentale aggiornarli in modo immutabile, creando nuove copie invece di modificare quelle esistenti. Questo è una best practice cruciale in React.

Perché l’Immutabilità è Importante

In JavaScript, oggetti e array sono valori di riferimento. Quando si assegna un oggetto a una variabile, la variabile contiene un riferimento alla posizione in memoria, non una copia dell’oggetto.

1
const original = { name: 'Test' };
2
const reference = original; // Stesso riferimento in memoria
3

4
reference.name = 'Modificato';
5
console.log(original.name); // 'Modificato' - anche original è cambiato!

Aggiornare Array in Modo Immutabile

1
// ❌ SBAGLIATO: modifica l'array originale
2
function addItem(items) {
3
  items.push('nuovo item'); // Modifica l'array originale
4
  return items;
5
}
6

7
// ✅ CORRETTO: crea un nuovo array
8
function addItem(items) {
9
  return [...items, 'nuovo item']; // Nuovo array con spread operator
10
}

1
const [items, setItems] = useState([]);
2

3
// Aggiungere elemento
4
setItems([...items, newItem]);
5

6
// Rimuovere elemento
7
setItems(items.filter(item => item.id !== idToRemove));
8

9
// Aggiornare elemento
10
setItems(items.map(item =>
11
  item.id === idToUpdate
12
    ? { ...item, property: newValue }
13
    : item
14
));
15

16
// Aggiungere in posizione specifica
17
setItems([
18
  ...items.slice(0, index),
19
  newItem,
20
  ...items.slice(index)
21
]);

1
const [user, setUser] = useState({ name: 'Test', age: 25 });
2

3
// Aggiornare proprietà
4
setUser({ ...user, age: 26 });
5

6
// Aggiungere proprietà
7
setUser({ ...user, email: 'test@example.com' });
8

9
// Rimuovere proprietà
10
const { password, ...userWithoutPassword } = user;
11
setUser(userWithoutPassword);

1
const [board, setBoard] = useState([
2
  [null, null, null],
3
  [null, null, null],
4
  [null, null, null]
5
]);
6

7
// Aggiornare elemento in array multidimensionale
8
setBoard(prevBoard => {
9
  return prevBoard.map((row, rowIndex) => {
10
    if (rowIndex !== targetRow) return row;
11

12
    return row.map((cell, colIndex) => {
13
      if (colIndex !== targetCol) return cell;
14
      return newValue;
15
    });
16
  });
17
});

Funzioni di Aggiornamento dello Stato: La Forma Funzionale

Quando si aggiorna lo stato basandosi sul valore precedente dello stesso stato, è fortemente raccomandato usare la forma funzionale della funzione di aggiornamento, passando una funzione invece di un valore diretto.

Il Problema dell’Aggiornamento Diretto

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

3
function increment() {
4
  setCount(count + 1); // Usa il valore corrente di count
5
}

Questo approccio ha problemi quando si aggiorna lo stato più volte in sequenza o quando gli aggiornamenti sono programmati (non istantanei).

Soluzione: Forma Funzionale

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

3
function increment() {
4
  setCount(prevCount => prevCount + 1); // Usa sempre l'ultimo valore
5
}

1
function problematicIncrement() {
2
  setCount(count + 1); // Programma: count = 0 + 1 = 1
3
  setCount(count + 1); // Programma: count = 0 + 1 = 1 (usa ancora il vecchio valore!)
4
  // Risultato: count diventa 1, non 2
5
}
6

7
function correctIncrement() {
8
  setCount(prev => prev + 1); // Programma: prev = 0, nuovo = 1
9
  setCount(prev => prev + 1); // Programma: prev = 1, nuovo = 2
10
  // Risultato: count diventa 2 ✅
11
}

1
// Non necessario (valore indipendente)
2
setName('Nuovo nome');
3

4
// Necessario (dipende dal vecchio valore)
5
setCount(prev => prev + 1);
6
setIsEditing(prev => !prev);

Pattern Comuni con Forma Funzionale

1
// Toggle booleano
2
const [isOpen, setIsOpen] = useState(false);
3
setIsOpen(prev => !prev);
4

5
// Incremento/decremento
6
const [count, setCount] = useState(0);
7
setCount(prev => prev + 1);
8
setCount(prev => prev - 1);
9

10
// Aggiornare array
11
const [items, setItems] = useState([]);
12
setItems(prev => [...prev, newItem]);
13

14
// Aggiornare oggetto
15
const [user, setUser] = useState({ name: '', age: 0 });
16
setUser(prev => ({ ...prev, name: 'Nuovo nome' }));

Riepilogo

JSX viene compilato in React.createElement. Fragments (<>...</> o <React.Fragment>) permettono di raggruppare elementi senza aggiungere nodi al DOM.

Forwarding props usa rest properties (...props) e spread operator ({...props}) per inoltrare automaticamente props non gestite esplicitamente. I valori predefiniti si definiscono nella destrutturazione: { prop = 'default' }.

State lifting: quando più componenti hanno bisogno delle stesse informazioni, lo stato viene sollevato al componente comune più vicino. Derived state: invece di memorizzare valori ridondanti, si derivano calcolandoli dallo stato esistente.

Two-way binding sincronizza input con stato: value={state} legge dallo stato, onChange scrive nello stato. event.target.value contiene il valore inserito dall’utente.

Immutability: quando si aggiornano oggetti e array, si creano nuove copie invece di modificare quelle esistenti usando spread operator ([...array], {...object}). Forma funzionale: quando lo stato dipende dal valore precedente, si usa setState(prev => newValue) invece di setState(newValue).