Perché React? - 2. Codice Dichiarativo
Tags: react
Published: 2020-08-25 08:56:55

---
title: Perché React? - 2. Codice Dichiarativo
published: true
date: 2020-08-25 08:54:51 UTC
tags: React
canonical_url: https://www.matteospreafico.com/perche-react-2-codice-dichiarativo/
series: Corso di React
description: Uno dei concetti fondamentali di React è scrivere codice in modo dichiarativo. Avrai sentito persone discutere e confrontare il codice imperativo con il codice dichiarativo.
---

Proviamo a spiegare chiaramente la differenza che probabilmente avete già sperimentato. Pensiamo di essere in auto e voler viaggiare ad una velocità costante di 50km/h. In auto ci son due pedali, un acceleratore ed un freno. Io devo fare un lavoro imperativo, devo premere sui pedali per regolare la velocità e mantenerla costante a 50km/h. Ora supponiamo di avere un'auto nuova, che ha il controllo di velocità che mi permette semplicemente di dichiarare a che velocità voglio viaggiare al posto di dovere usare i pedali per regolare la velocità. Devo semplicemente selezionare lo stato in cui voglio essere, viaggiare a 50 km/h e la macchina si occupa del lavoro imperativo per me.

React ti permette di fare la stessa cosa col tuo codice. Tu dichiari lo stato ed il markup e React esegue il lavoro imperativo per mantenere il DOM aggiornato con la tua applicazione.

## Codice Imperativo

Una gran parte di JavaScript è **codice imperativo**. Se non sai cosa significa "imperativo", potresti avere qualche problema, quindi proviamo a capirlo. Secondo il dizionario "imperativo" significa:

> Che contiene o esprime comando.

Quando il codice JavaScript è scritto in modo _imperativo_, noi diciamo in JavaScript esattamente **cosa** fare e **come** farlo. Prova a pensare come se dassimo a JavaScript dei _comandi_ su come eseguire esattamente ogni passaggio. Ad esempio in questo semplice ciclo `for`:

```
const colori = ['Verde', 'Bianco', 'Rosso', 'Giallo', 'Azzurro', 'Viola']
const coloriChiari = []

for (let i = 0; i < colori.length; i++) {
 coloriChiari[i] = colori[i] + ' chiaro'
}
```
<figcaption>Codice Imperativo</figcaption>

Se avete già provato a scrivere JavaScript, questo codice dovrebbe essere abbastanza chiaro. Stiamo ciclando su ogni elemento dell'array `colori`, aggiungendo ' chiaro' alla fine e salvando la nuova stringa risultante in una nuovo array `coloriChiari`. Abbastanza semplice, giusto?

Questo è codice _imperativo_! Stiamo dicendo a JavaScript cosa fare in ogni singolo passaggio. Questi sono i comandi che stiamo dando:

- Imposta il valore iniziale per l'iteratore - (`let i = 0`)
- Diciamo al ciclo `for` quando deve fermarsi - (`i < colori.length`)
- Prendiamo il colore alla posizione corrente e ci aggiungiamo ' chiaro' - (`colori[i] + ' chiaro'`)
- Salviamo il risultato nella posizione `i`-esima del nuovo array - (`coloriChiari[i]`)
- Aumentiamo di uno il valore di `i` - (`i++`)

Tornando all'esempio iniziale di viaggiare a 50km/h con la mia vecchia automobile, usavo il pedale dell'acceleratore e del freno per regolare la velocità. Quando la velocità era troppo alta, dovevo premere sul pedale del freno per rallentare, ma se rallentava troppo, dovevo di nuovo premere il pedale dell'acceleratore per aumentare la velocità. Inevitabilmente la velocità aumentava troppo e dovevo di nuovo premere il pedale del freno per rallentare. Dovevo gestire la velocità per gestire ogni variazione. Non vi sembra una situazione imperativa? Vediamo se possiamo migliorare le cose!

## Codice Dichiarativo

In contrasto al codice imperativo, esiste il **codice dichiarativo**. Col codice dichiarativo, non dobbiamo specificare ogni singolo passaggio per ottenere il risultato finale. Invece, _dichiariamo_ quello che vogliamo fare, e JavaScript si occuperà di farlo. Mi rendo conto che la spiegazione è un po' astratta, quindi vediamo un esempio. Prendiamo il ciclo `for` imperativo che abbiamo appena visto e riscriviamolo per renderlo più dichiarativo.

Con il codice imperativo eseguiamo tutti i passaggi per ottenere il risultato finale, ma qual è il risultato finale che veramente vogliamo? Il punto d'inizio era solo un array di colori:

```
const colori = ['Verde', 'Bianco', 'Rosso', 'Giallo', 'Azzurro', 'Viola']
```
<figcaption>Array iniziale di colori</figcaption>

L'obiettivo finale che vogliamo ottenere è un array con gli stessi colori, ma con la scritta ' chiaro' alla fine:

```
['Verde chiaro', 'Bianco chiaro', 'Rosso chiaro', 'Giallo chiaro', 'Azzurro chiaro', 'Viola chiaro']
```
<figcaption>Obiettivo finale di colori</figcaption>

Per ottenere questo risultato, possiamo prendere l'array iniziale ed usare la funzione JavaScript [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=example) per dichiarare quello che vogliamo.

```
const coloriChiari = colori.map(name => name + ' chiaro')
```
<figcaption>Esempio di codice dichiarativo</figcaption>

Fatto! Con questo codice, non dobbiamo:

- Creare un iteratore
- Dire al ciclo quando deve fermarsi
- Usare un iteratore per selezionare un elemento dell'array `colori`
- Salvare ogni nuovo valore nell'array `coloriChiari`

Tutte queste operazioni sono eseguite dal metodo `.map()` degli Array JavaScript.

## React è Dichiarativo

Scriveremo codice React presto, ma vediamo meglio cosa significa che è dichiarativo.

```
<button onClick={attivareVentilatore}>Attivare Ventilatore</button>
```
<figcaption>Esempio di codice React Dichiarativo</figcaption>

Sembrerà strano, ma questo è un frammento valido di codice React e dovrebbe essere semplice da capire. C'è solo un attributo `onClick` sul bottone e non stiamo usando `.addEventListener()` per gestire l'evento con tutti i passaggi necessari. Invece, stiamo solo dichiarando che vogliamo che la funzione `attivareVentilatore` sia eseguita quando si clicca sul buttone.

## Riepilogo

Il codice _imperativo_ dice a JavaScript _come_ eseguire ogni singolo passaggio. Con il codice _dichiarativo_, noi diciamo a JavaScript _cosa_ vogliamo sia fatto e lasciamo che JavaScript si occupi di eseguire i passaggi.

React è dichiarativo perché scriviamo il codice che vogliamo, e Reach si occupa di prendere il nostro codice dichiarativo ed eseguire tutti i passaggi necessari per ottenere il risultato desiderato in JavaScript/DOM.