Realizzare UI con Reat - 7. Composizione di Componenti
Tags: react
Published: 2020-09-21 09:26:21

---
title: Realizzare UI con Reat - 7. Composizione di Componenti
published: true
date: 2020-09-20 07:57:00 UTC
tags: React
series: Corso di React
canonical_url: https://www.matteospreafico.com/realizzare-ui-con-reat-7-composizione-di-componenti/
description: I componenti sono i mattoni alla base di React, ci aiutano a suddividere la UI in pezzi più piccoli con chiare responsabilità ed interfacce ben definite.
---

I componenti sono molto comodi, perché ci aiutano a suddividere la UI in pezzi più piccoli con chiare responsabilità ed interfacce ben definite. Questo è molto importante quando si lavora su un'applicazione di grandi dimensioni, perché ci permette di lavorare su piccoli pezzi dell'applicazione senza modificare inavvertitamente tutto il resto. Un altro grande vantaggio dei componenti è che ci incoraggiano ad usare la composizione invece dell'ereditarietà. Vediamo meglio cosa intendo per composizione.

## Composizione con la Lista di Contatti

Ora prendiamo una nuova applicazione React creata con `create-react-app` come abbiamo [appena visto](https://matteo-spreafico-ghost.herokuapp.com/realizzare-ui-con-react-6-creare-una-nuova-react-app/) ed inseriamoci l'esempio con la lista di contatti di cui abbiamo [parlato in precedenza](https://matteo-spreafico-ghost.herokuapp.com/realizzare-ui-con-react-5-creare-elementi-e-jsx/#componenti).

```
import React from 'react';
import './App.css';

const Contatti = () => {
  const persone = ['Matteo', 'Silvia', 'Daniele', 'Marco'];

  return (
    <ul>
      {persone.map((persona) => (
        <li key={persona}>{persona}</li>
      ))}
    </ul>
  );
};

function App() {
  return (
    <div className="App">
      <Contatti />
    </div>
  );
}

export default App;
```
<figcaption>App.js modificato con la lista di contatti</figcaption>

Come potete vedere è veramente semplice prendere il componente `Contatti` che abbiamo creato in precedenza ed usarlo all'interno di `App`. Incapsulare elementi all'interno di un componente ci offre diversi vantaggi. Per iniziare rende estremamente semplice il riuso di tutti questi elementi. Se ad esempio io volessi avere più copie della lista dei contatti, dovrei incollare più volte il componente `Contatti`

```
function App() {
  return (
    <div className="App">
      <Contatti />
      <Contatti />
      <Contatti />
    </div>
  );
}
```
<figcaption>Copie multiple di <code>Contatti</code></figcaption>
## Semplice Interfaccia dei Componenti

Un'altra caratteristica interessate è che i componenti ci offrono un'interfaccia chiara in modo da poter semplicemente configurare differenti componenti passandogli delle differenti proprietà.

Prendiamo la nostra lista di contatti e supponiamo di voler avere delle liste di contatti con delle persone diverse. In questo caso quindi vorrei poter configurare i componenti `Contatti` in modo indipendente uno dall'altro. Sarebbe comodo se `Contatti` avesse una proprietà in modo da passargli la lista di persone invece di averla inchiodata all'interno del componente.

Prendiamo quindi il nostro componente `Contatti` ed aggiungiamogli un parametro `props` che conterrà tutte le proprietà che passeremo al componente e prendiamo la lista di `persone` da questo oggetto.

```
const Contatti = (props) => {
  const { persone } = props;
  
  return (
    <ul>
      {persone.map((persona) => (
        <li key={persona}>{persona}</li>
      ))}
    </ul>
  );
};
```
<figcaption>Componente <code>Contatti</code> modificato per usare <code>persone</code> estratto da <code>props</code></figcaption>

Ogni componente riceve un oggetto `props` che contiene tutte le proprietà che passeremo al componente.

Quindi ora possiamo passare una diversa lista di persone ed averemo una diversa lista di contatti! Modifichiamo ora la nostra applicazione per avere nella prima lista di contatti solo Matteo e Silvia, mentre nella seconda passiamo Daniele e Marco ed infine eliminiamo la terza.

Come vedete è estremamente semplice riusare questi componenti passandogli la configurazione attraverso `props`.

Questi sono i due aspetti chiave per comprendere come funziona la composizione di componenti in React:

- La capacità di incapsulare elementi in una componente in modo da poterli riutilizzare
- La capacità di configurare questi componenti in modo differente ed indipendente attraverso `props`

[Qui potete trovare i sorgenti dell'applicazione](https://github.com/matsprea/create-react-app-contatti/tree/11ab8f37e444a676aaef7c10337b9e41b74ca21e)

<iframe width="1280" height="500" src="https://codesandbox.io/embed/youthful-night-77trn?fontsize=14&amp;hidenavigation=1&amp;theme=dark" style="width:1280px; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>