Perché React? - 1. La Composizione
Tags: react
Published: 2020-08-24 08:13:07

---
title: Perché React? - 1. La Composizione
published: true
date: 2020-08-23 08:00:00 UTC
tags: React
canonical_url: https://www.matteospreafico.com/perche-react-1-la-composizione/
series: Corso di React
description: React fa largo uso delle composizione! La composizione è unire insieme semplici funzioni per crearne di complesse.
---

## 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');
```
<figcaption>Composizione di funzioni che restituisce dei dati</figcaption>

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" />
```
<figcaption>Composizione di funzioni che restituisce UI</figcaption>

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`;
}
```
<figcaption>Funzione semplice</figcaption>

Questa funzione è _incredibilmente_ semplice! È solo una riga! Allo _stesso_ modo `getBookInfo` è solo una riga:

```
function getBookInfo(isbn) {
  return `http://openlibrary.org/isbn/${isbn}`;
}
```
<figcaption>Un'altra funzione semplice</figcaption>

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),
  };
}
```
<figcaption>Unione di funzioni</figcaption>

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}`,
  };
}
```
<figcaption>Funzione <em>senza</em> composizione</figcaption>

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 />
```
<figcaption>Tre componenti</figcaption>

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

```
<Pagina>
 <Articolo />
 <BarraLaterale />
</Pagina>
```
<figcaption>Composizione di componenti</figcaption>

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.