Perché React? - 4. React è "solo JavaScript"

Se già conoscete JavaScript sarà molto facile imparare React, se al contrario siete alle prime armi con JavaScript, React vi aiuterà a diventare degli sviluppatori JavaScript migliori.

Ѐ solo JavaScript

Uno degli aspetti positivi di React è che gran parte di quello che userete, sarà normale JavaScript. Prendiamo ad esempio To make sure you're ready to move forward, please take a look at the following code:

const appuntamentiPersonali = [
  { appuntamento: 'Tintoria', ore: '19:00', giorno: 'martedi' },
  { appuntamento: 'Palestra', ore: '19:00', giorno: 'lunedi' },
];
const appuntamentiLavoro = [
  { appuntamento: 'Banca', ore: '11:00', giorno: 'lunedi' },
  { appuntamento: 'Cliente XYZ', ore: '9:00', giorno: 'martedi' },
];
const listaAppuntamenti = [...appuntamentiPersonali, ...appuntamentiLavoro];

const filtro = (appuntamenti) => (giorno) =>
  appuntamenti.filter((a) => {
    return a.giorno === giorno;
  });

const filtraPer = filtro(listaAppuntamenti);
const appuntamentiMartedi = filtraPer('martedi');

Esempio di codice JavaScript

Se questo codice non vi risulta chiaro, vi consiglio di fare un ripasso di ES6 prima di proseguire con React.

Nel corso degli ultimi anni la programmazione funzionale ha avuto un grande impatto sulla comunità e l'ecosistema JavaScript. La programmazione funzionale in JavaScript è un argomento complesso, sono stati scritti centinaia di libri in merito e siamo qui per parlare di React, quindi limitiamoci a dire che React è costruito usando molte delle tecniche di programmazione funzionale, che vedremo di volta in volta mentre approfinderemo i vari aspetti di React. Vediamo solo un paio di importanti funzioni JavaScript che sono fondamentali per quello che andremo ad approfondire: i metodi .map() e .filter() di Array.

Il Metodo .map() di Array

Se non conosci il metodo JavaScript .map() di Array, viene chiamato su un array esistente e restituisce un nuovo array creato a partire da cosa restituisce la funzione che gli viene passata come argomento. Vediamo un esempio:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

const saluti = nomi.map((nome) => `Ciao ${nome}!`);

Esempio del metodo .map() di Array

Vediamo cosa sta succedendo. Il metodo .map() lavora sugli array, quindi abbiamo un array da cui partire:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

Array di partenza

Quindi chiamiamo .map() sul array nami e gli passiamo una funzione come argomento:

nomi.map((nome) => `Ciao ${nome}!`);

Chiamata alla funzione .map() di Array

La funzione a freccia (arrow function) che è passata a .map() viene chiamata per ogni elemento nell'array nomi! La funzione a freccia riceve il primo nome nel array, lo salva nella variabile nome e la usa per costruire e restituisce una nuova stringa Ciao ${nome}!. Poi fa lo stesso con i restanti due nomi.

Infine .map() restituisce un nuovo array con i valori restituiti dalla funzione a freccia:

const saluti = nomi.map((nome) => `Ciao ${nome}`);

.map() restituisce un nuovo Array

saluti sarà un nuovo array ["Ciao Matteo!", "Ciao Silvia!", "Ciao Daniele!"]. Questo è un passaggio fondamentale da comprendere: il metodo.map() restituisce un nuovo array, non viene modificato l'array originale.

Per fare pratica con il metodo .map(), potete provare a sostituire dei cicli for presenti in del vostro codice preesistente con la chiamata a .map().

Il Metodo .filter() di Array

Il metodo JavaScript .filter() di Array è simile al metodo .map():

• viene chiamato su un array
• accetta una funzione come argomento
• restituisce un nuovo array

La differenza è che la funzione passata a .filter() è usata come un test, solo gli elementi che passano il test sono inclusi nel nuovo array. Vediamo un esempio:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

const nomiCorti = nomi.filter((nome) => nome.length <= 6);

Esempio del Metodo .filter() di Array

Come prima, abbiamo un array iniziale:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

Array di partenza

Chiamiamo .filter() sull'array nomi e passiamo una funzione come argomento:

nomi.filter((nome) => nome.length <= 6);

Chiamata alla funzione .filter() di Array

Allo stesso modo di .map() la funzione a freccia passata a .filter() viene chiamata per ogni elemento nell'array nomi. Il primo elemento ('Matteo') è salvato nella variabile nome. Poi viene eseguito il test, ovvero eseguiamo il filtro. Viene controllata la lunghezza del nome. Se è più di 6 viene escluso e non incluso nel nuovo array, se invece la lunghezza del nome è 6 o meno, ovvero name.length <= 6 restituisce true allora il nome è incluso nel nuovo array.

Alla fine, proprio come .map() il metodo .filter() restituisce un nuovo array invece di modificare quello originale:

const nomiCorti = nomi.filter((nome) => nome.length <= 6);

.filter() restituisce un nuovo Array

Quindi nomiCorti sarà il nuovo array ['Matteo', 'Silvia']. Da notare che contiene solo due nomi, perché 'Daniele' ha 7 caratteri ed è stato filtrato.

Per prendere confidenza con questo metodo, potete provare a modificare del vostro codice preesistente sostituendo gli if con chiamate a .filter().

Usiamo .map() e .filter() insieme

Quello che rende .map() e .filter() molto potenti è che possono essere usati insieme perché entrambi restituiscono array quindi possiamo usarli a catena in modo che il nuovo array restituito da un metodo sia usato per la chiamata seguente.

const nomi = ['Matteo', 'Silvia', 'Daniele'];

const salutiCorti = nomi
  .filter((nome) => nome.length <= 6)
  .map((nome) => `Ciao ${nome}`);

Esempio di .map() e .filter() insieme

Vediamo cosa succede, l'array nomi è filtrato dal metodo .filter(), quindi un nuovo array viene restituito, ma poi .map() è chiamato sul nuovo array e restituisce a sua volta un nuovo array. Questo nuovo array restituito da .map() è quello che viene salvato in salutiCorti.

.filter() per primo!

Solitamente vorrete eseguire i metodi in questo ordine: .filter() prima e dopo .map(). Questo perché .map() esegue la funzione per ogni elemento dell'array, e quindi questo è più veloce se l'array su cui viene eseguito è già filtrato.