Introduzione a React, parte 1

Abbiamo già parlato in questo blog del nuovo stack di sviluppo di WordPress e della rivoluzione che ne deriva, sia per la piattaforma stessa che per gli sviluppatori che ora sono costretti a imparare cose nuove. Non molto tempo fa, ad esempio, ho pubblicato un post in cui spiegavo come utilizzare il pacchetto @wordpress/scripts per estendere Gutenberg e aggiungere un pulsante alla sua interfaccia utente. Come autore, amo scrivere tutorial perché posso condividere qualcosa che conosco bene e sento che possiamo imparare tutti insieme.

Sfortunatamente, penso che i tutorial nascondano un grosso problema: molti di voi li seguono ciecamente senza capire davvero cosa sta succedendo, anche se alla fine si ottiene il risultato corretto. Ma la maggior parte dei tutorial manca del "momento aha", il momento di intuizione e comprensione in cui tutto scatta nella tua testa e capisci perché le cose sono come sono.

Quindi oggi vorrei iniziare una serie di post con un'introduzione a React per fare un po' di luce. Voglio demistificare React e aiutarti a migliorare rapidamente. Voglio che tu capisca perché React è così com'è e perché le cose sono come sono. Voglio che tu comprenda i principi alla base di React. Voglio che scrivi un codice migliore.

Programmazione Funzionale

Prima di parlare di React, penso che valga la pena dedicare un paio di minuti a parlare di programmazione funzionale , poiché molti dei framework che utilizziamo oggi si basano sui suoi principi. E React (insieme a Redux) non fa eccezione.

La programmazione funzionale è un paradigma di programmazione in cui i programmi sono costruiti applicando e componendo funzioni. Potresti pensare che, beh, la "programmazione" ha sempre riguardato la creazione e l'esecuzione di funzioni, giusto? Non esattamente. Sopportami.

Si consideri, ad esempio, la programmazione orientata agli oggetti. In OOP, i programmi vengono creati creando e componendo oggetti, che possono contenere dati, sotto forma di attributi o campi, e codice, sotto forma di metodi o procedure. Vedere? Non funzioni, ma oggetti.

Quindi cosa rende speciale la programmazione funzionale? Ebbene, ci sono diversi aspetti che caratterizzano la programmazione funzionale: funzioni pure, trasparenza referenziale, immutabilità, funzioni di cittadini di primo ordine, funzioni di ordine superiore, ecc., e ti consiglio di studiarle da solo (o, se vuoi, a, possiamo parlarne nei prossimi post). Ma, per far breve questo post, oggi ci concentreremo semplicemente su una caratteristica...

Funzioni pure

Una delle cose che rende la programmazione funzionale diversa da altri paradigmi di programmazione è il modo in cui definisce e lavora con le funzioni. In FP, le funzioni sono pure, il che significa che soddisfano le due condizioni seguenti:

1. Produce sempre lo stesso risultato quando vengono forniti gli stessi argomenti
2. Non ha effetti collaterali

Ad esempio, questa non è una funzione pura:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

perché ha diversi effetti collaterali. Vale a dire, modifica una variabile globale (effetto collaterale 1) e restituisce del testo alla console (effetto collaterale 2).

Un'altra funzione impura è la seguente:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

perché, come puoi vedere, non sempre produce lo stesso risultato. Ogni volta che si chiama createElement con un certo nome, il risultato che si ottiene è diverso. Dopotutto, l'attributo id viene generato tramite Math.random …

Le funzioni pure sono ottime per molteplici ragioni: sono semplici da capire e non contengono sorprese. Dai loro alcuni input, ti restituiranno un output specifico. E questo è fantastico, perché questo modo di definire le funzioni le avvicina alla nostra comprensione matematica di cosa sia una funzione: mappa ogni input su un output ben definito.

Componenti in reazione

Cosa devono fare le funzioni pure e la programmazione funzionale? Bene, vediamo se riusciamo a ricavare la loro relazione...

Come puoi leggere nella sua documentazione, React è una libreria JavaScript per la creazione di interfacce utente tramite piccoli pezzi di codice chiamati "Componenti". Questo è il primo componente che vedrai nel loro tutorial:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Abbastanza semplice e persino autoesplicativo, non è vero?

Ma aspetta un secondo! Questa non sembra affatto una "funzione pura". In effetti, questa è una classe implementata utilizzando la programmazione orientata agli oggetti.

Sì, hai perfettamente ragione. Non sembra bello... abbiamo solo perso tempo a parlare di programmazione funzionale?

Dai un'occhiata al componente precedente di nuovo. Che cosa sembra? Che cosa fa? Bene, è una classe con un singolo metodo ( render ) che genera del codice HTML per il rendering di una lista della spesa. Questa lista della spesa è sempre la stessa (duh, è un semplice esempio), ma ha una parte variabile: il suo titolo, dove la classe sembra usare una proprietà interna this.props.name .

Quindi, se non sappiamo ancora nulla di React e guardiamo solo il codice e proviamo a dedurre ciò che fa, vediamo quanto segue:

1. Il componente può ricevere un "nome". Non sappiamo esattamente come ottenga questo nome, ma sappiamo che lo fa. Dopotutto, this.props.name è un buon indizio.
2. Il metodo di render produce del codice HTML per eseguire il rendering di un elenco (statico) di "elementi di acquisto": Instagram , WhatsApp e Oculus .
3. L'HTML risultante non è statico al 100%; utilizza un “nome” che può variare in base al valore di una proprietà.

Vedi dove sto andando?

I componenti funzionano in reazione

Abbiamo appena descritto una pura funzione! Abbiamo un componente che prende un valore ( name ) e produce un output ben definito (l'HTML). Questo significa che possiamo allontanarci dall'OOP e implementare il componente precedente come una funzione?

Sicuro! La classe eccessivamente complicata che abbiamo appena visto può essere riscritta come una funzione pura più semplice e di facile comprensione che riceve props di scena e restituisce HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Questa è esattamente la stessa cosa che avevamo, ma molto, molto più semplice. Oserei anche dire che è la cosa più semplice che posso implementare come programmatore: un componente React non è altro che una funzione che prende alcuni oggetti di scena e produce un HTML fuori .

E questa è precisamente la prima lezione che devi imparare: il tuo componente React è una pura funzione : props in, HTML out. Un componente non deve eseguire funzioni asincrone per recuperare i dati (poiché sono effetti collaterali). Un componente non può nemmeno modificare le proprietà che riceve (immutabilità).

Quindi, ancora una volta: un componente prende semplicemente alcuni oggetti di scena e produce l'output HTML. Periodo.

Ma aspetta, se un componente è così semplice, come possiamo fare qualcosa di utile con esso? Bene, restate sintonizzati, perché di questo parleremo nel prossimo post!

Immagine in primo piano di Josiah Weiss su Unsplash.