Perché React? - 1. La Composizione

Intro

Prima di vedere la sintassi di React, facciamo un passo indietro e vediamo cosa rende React speciale.

Il suo modello compositivo, la sua natura dichiarativa, il modo in cui i dati scorrono attraverso un componente.

E React è veramente solo JavaScript.

Cos'è la Composizione?

Partiamo dalla definizione:

combinare funzioni semplici per costruirne di più complesse

Quindi ora vediamo come realizzare funzioni complesse soltanto combinando insieme semplici funzioni.

Sei probabilmente familiare con l'idea di funzioni, quando usare una funzione e quando non usarne una probabilmente è abbastanza naturale per te. Una degli aspetti più interessi di React è che puoi usare la stessa intuizione che usi con le funzioni per decidere quando creare componenti React. Mentre una funzione prendere degli argomenti e restituisce un valore, la tua funzione prenderà alcuni argomenti e restituirà UI.

Ora, vediamo del codice.

function getBookCover(isbn) {
  return `http://covers.openlibrary.org/b/${isbn}-M.jpg`;
}

function getBookInfo(isbn) {
  return `http://openlibrary.org/isbn/${isbn}`;
}

function getBookData(isbn) {
  return {
    cover: getBookCover(isbn),
    info: getBookInfo(isbn),
  };
}

getBookData('9780385533225');

Composizione di funzioni che restituisce dei dati

Ci sono tre funzioni ed una invocazione di funzione. Il codice è organizzato e chiaro perché ogni funzione ha il suo specifico scopo. Stiamo componendo le nostre funzioni insieme per creare una funzione getBookData usando le altre due funzioni getBookCover e getBookInfo. Quando ora chiamiamo getBookData otteniamo un oggetto che rappresenta il nostro libro.

Ora invece di avere queste funzioni che ci restituiscono un oggetto con dei dati, proviamo a modificarle per ottenere UI.

function BookCover(isbn) {
  return (
    <img
      alt={`${isbn} cover`}
      src={`http://covers.openlibrary.org/b/${isbn}-M.jpg`}
    />
  );
}

function BookInfo(isbn) {
  return (<a href={`http://openlibrary.org/isbn/${isbn}`}>{isbn} info</a>);
}

function BookData(isbn) {
  return (
    <div className="book">
      <BookCover isbn={isbn} />
      <BookInfo isbn={isbn} />
    </div>
  );
}

<BookData isbn="9780385533225" />

Composizione di funzioni che restituisce UI

Niente panico, vedremo la sintassi più avanti, ma per ora notiamo che in React invece di comporre funzioni per ottenere valori, abbiamo ottenuto UI.

I Vantaggi della Composizione

Il concetto di composizione è uno degli aspetti principali di React ed oltre a renderlo incredibilmente potente è anche fantastico lavorarci. Ricorda che la composizione è solo unire insieme semplici funzioni per crearne di complesse.

Ci sono un paio di concetti che non vogliamo scordare, ovvero:

• funzioni semplici
• unite per creare un'altra funzione

La composizione è fondata su funzioni semplici. Vediamo un esempio:

function getBookCover(isbn) {
  return `http://covers.openlibrary.org/b/${isbn}-M.jpg`;
}

Funzione semplice

Questa funzione è incredibilmente semplice! È solo una riga! Allo stesso modo getBookInfo è solo una riga:

function getBookInfo(isbn) {
  return `http://openlibrary.org/isbn/${isbn}`;
}

Un'altra funzione semplice

Queste sono sicuramente funzioni semplici, quindi per comporle, dobbiamo solo unirle all'interno di un'altra funzione:

function getBookData(isbn) {
  return {
    cover: getBookCover(isbn),
    info: getBookInfo(isbn),
  };
}

Unione di funzioni

Avremmo anche potuto scrivere getBookData senza usare la composizione:

function getBookData(isbn) {
  return {
    cover: `http://covers.openlibrary.org/b/${isbn}-M.jpg`,
    info: `http://openlibrary.org/isbn/${isbn}`,
  };
}

Funzione senza composizione

Non c'è niente di sbagliato nel farlo, il codice Javascript è perfettamente corretto; ma non si tratta di composizione. Ci sono anche dei potenziali problemi nella versione che non usa la composizione. Se il link al libro è richiesto altrove, il codice dovrà essere duplicato. Una buona funzione dovrebbe seguire la regola "DOT":

Do One Thing (Fai una cosa)

Questa funzione fa un paio di cose sempli: crea due differenti URLs, li salva come proprietà di un oggetto e ritorna l'oggetto. Nella versione con la composizione, ogni funzione fa solo una cosa:

• getBookCover – costruisce una stringa con l'URL della copertina del libro
• getBookInfo – costruisce una stringa con l'URL della pagina del libro
• getBookData – restituisce il nuovo oggetto

React e Composizione

React fa largo uso delle composizione! React costruisce pezzi di UI usando componenti. Vediamo un esempio con tre componenti:

<Pagina />
<Articolo />
<BarraLaterale />

Tre componenti

Ora prendiamo questi semplici componenti ed uniamoli insieme per creare un nuovo componente più complicato, ovvero usiamo la composizione:

<Pagina>
 <Articolo />
 <BarraLaterale />
</Pagina>

Composizione di componenti

Ora il componente Pagina ha al suo interno i componenti Articolo e BarraLaterale. Esattamente con nell'esempio precedente dove getBookData aveva getBookPic e getBookInfo all'interno.

Approfondiremo il concetto di componenti nei prossimi articoli, per ora ricorda che la composizione ha un ruolo enorme nel costruire componenti in React.