Realizzare UI con Reat - 7. Composizione di Componenti

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 ed inseriamoci l'esempio con la lista di contatti di cui abbiamo parlato in precedenza.

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;

App.js modificato con la lista di contatti

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>
  );
}

Copie multiple di Contatti

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>
  );
};

Componente Contatti modificato per usare persone estratto da props

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