Il Tuo Primo Componente

Componenti: i mattoni con cui costruire una UI

Sul Web, HTML ci permette di creare documenti di testo strutturati, grazie a una serie di tag nativi come <h1> e <li>:

<article>
  <h1>Il mio primo componente</h1>
  <ol>
    <li>Componenti: i mattoni con cui costruire una UI</li>
    <li>Definire un componente</li>
    <li>Usare un componente</li>
  </ol>
</article>

Questo markup (la struttura logica di una pagina web) rappresenta questo articolo <article>, il suo titolo <h1> e un indice (abbreviato) come una lista ordinata <ol>. Un markup come questo, combinato con il codice CSS per lo stile e con JavaScript per l’interattività, è alla base di ogni barra laterale, avatar, modale, dropdown - ogni pezzo di interfaccia utente che si vede sul Web.

React consente di combinare markup, CSS e JavaScript in “componenti” personalizzati, elementi dell’interfaccia utente riutilizzabili per la tua applicazione. Il codice dell’indice che hai visto sopra potrebbe essere trasformato in un componente <TableOfContents /> da renderizzare in ogni pagina. Sotto il cofano, esso utilizza ancora gli stessi tag HTML come <article>, <h1>, ecc.

Proprio come con i tag HTML, è possibile comporre, ordinare e annidare i componenti per progettare intere pagine. Ad esempio, la pagina di documentazione che stai leggendo è composta da componenti React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Documentazione</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Man mano che il tuo progetto cresce, noterai che molte interfacce possono essere composte riutilizzando componenti già scritti, velocizzando il tuo processo di sviluppo. Il nostro indice qui sopra potrebbe essere aggiunta a qualsiasi pagina o schermata con <TableOfContents />! Puoi anche iniziare il tuo progetto con le migliaia di componenti condivisi dalla comunità open source di React, come Chakra UI e Material UI..

Definire un componente

Solitamente, quando si creavano le pagine web, gli sviluppatori web definivano la struttura logica di una pagina web e il suo contenuto e poi aggiungevano l’interattività “spruzzando” un po’ di JavaScript. Questa soluzione funzionava bene quando l’interattività era un qualcosa di nice-to-have sul web. Al giorno d’oggi è un qualcosa di previsto per molti siti e per tutte le applicazioni. React mette l’interattività al primo posto, pur utilizzando la stessa tecnologia: un componente React è una funzione JavaScript che si può spruzzare con del markup. Ecco come si presenta (puoi modificare l’esempio qui sotto):

Ed ecco come costruire un componente:

Step 1: Esportare il componente

Il prefisso export default è una sintassi JavaScript standard (non specifica a React). Consente di contrassegnare la funzione principale di un file in modo da poterla importare successivamente in altri file. (Maggiori informazioni sull’importazione in Importazione ed esportazione di componenti)!

Step 2: Definire la funzione

Con function Profile() { } si definisce una funzione JavaScript con il nome Profile.

Step 3: Aggiungere il markup

Il componente ritorna un tag <img /> con gli attributi src e alt. <img /> è scritto come fosse HTML, ma in realtà si tratta di codice JavaScript sotto il cofano! Questa sintassi si chiama JSX e consente di incorporare markup all’interno di JavaScript.

Le istruzioni di ritorno possono essere scritte tutte su una riga, come in questo componente:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Ma se il tuo markup non si trova tutto sulla stessa riga della parola chiave return, è necessario racchiuderlo (wrap) in una coppia di parentesi tonde:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Usare un componente

Ora che è stato definito il componente Profile, è possibile annidarlo all’interno di altri componenti. Per esempio, si può esportare un componente Gallery che utilizza più componenti Profile:

Cosa vede il browser

Nota la differenza tra il maiuscolo e il minuscolo:

• <section> è minuscolo, in modo che React sappia che ci riferiamo a un tag HTML.
• <Profile /> inizia con la P maiuscola, quindi React sa che vogliamo usare il nostro componente chiamato Profile.

E Profile contiene lui stesso altri tag HTML: <img />. Alla fine, questo è ciò che vede il browser:

<section>
  <h1>Scienziati incredibili</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Annidamento e organizzazione dei componenti

I componenti sono normali funzioni JavaScript, quindi è possibile avere più componenti nello stesso file. Questo è comodo quando i componenti sono relativamente piccoli o strettamente correlati tra loro. Se questo file dovesse diventare troppo affollato, puoi sempre spostare Profile in un file separato. Imparerai come fare a breve nella pagina sulle importazioni..

Poiché i componenti Profile sono renderizzati all’interno di Gallery - anche più volte! - possiamo dire che Gallery è un componente genitore, che renderizza ogni Profile come un “figlio”. Questa è una parte della magia di React: si può definire un componente una sola volta e poi usarlo in tutti i posti e tutte le volte che si vuole.

export default function Gallery() {
  // 🔴 Non definire mai un componente all'interno di un altro componente!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Dichiara i componenti al livello principale
function Profile() {
  // ...
}