Il Tuo Primo Componente

I componenti sono uno dei concetti fondamentali di React. Sono le fondamenta su cui si costruiscono le interfacce utente (UI), il che li rende il punto perfetto per iniziare il tuo viaggio alla scoperta di React!

Imparerai

  • Che cos’è un componente
  • Che ruolo hanno i componenti in un’applicazione React
  • Come definire il tuo primo componente React

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):

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

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.

Insidia

I componenti React sono normali funzioni JavaScript, ma il loro nome deve iniziare con una lettera maiuscola o non funzionano!

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

Insidia

Senza parentesi, qualsiasi riga di codice successiva alla riga contenente return sarà ignorata!

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:

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

export default function Gallery() {
  return (
    <section>
      <h1>Scienziati incredibili</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

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.

Insidia

I componenti possono renderizzare altri componenti, ma non si devono mai annidare le loro definizioni:

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

Il codice qui sopra è molto lento e causa dei bug. Invece, definisci ogni componente al livello principale:

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

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

Quando un componente figlio ha bisogno di alcuni dati da un genitore, passaglieli tramite props, invece di annidare le definizioni.

Approfondimento

Componenti fino in fondo

La tua applicazione React inizia con un componente “radice” (root). Di solito, viene creato automaticamente quando si comincia un nuovo progetto. Ad esempio, se utilizzi CodeSandbox o se usi il framework Next.js, il componente radice è definito in pages/index.js. In questi esempi, abbiamo esportato il componente radice.

La maggior parte delle applicazioni React utilizza i componenti fino in fondo. Ciò significa che non userai i componenti solo per piccole parti riutilizzabili come i pulsanti, ma anche per parti più grandi come barre laterali, elenchi e, infine, pagine complete! I componenti sono un modo pratico per organizzare il codice e il markup dell’interfaccia utente, anche se alcuni di essi dovessero essere utilizzati una sola volta.

I framework basati su React compiono un ulteriore passo avanti. Invece di usare un file HTML vuoto e lasciare che React si occupi di gestire la pagina con JavaScript, generano automaticamente l’HTML dai componenti React. Questo permette all’applicazione di mostrare alcuni contenuti prima del caricamento del codice JavaScript.

Tuttavia, molti siti web usano React solo per aggiungere interattività a pagine HTML esistenti. Hanno molti componenti radice invece di uno singolo per l’intera pagina. È possibile utilizzare tanto o poco React in base alle tue esigenze.

Riepilogo

Hai appena avuto il tuo primo assaggio di React! Riassumiamo alcuni punti chiave.

  • React consente di creare componenti, elementi riutilizzabili dell’interfaccia utente per la tua applicazione.

  • In un’applicazione React, ogni elemento dell’interfaccia utente è un componente.

  • I componenti React sono normali funzioni JavaScript, tranne che per il fatto che:

    1. I loro nomi iniziano sempre con la lettera maiuscola.
    2. Ritornano markup JSX.

Sfida 1 di 4:
Esporta il componente

Questa sandbox non funziona perché il componente principale non viene esportato:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

Cerca di risolvere il problema da solo/a prima di guardare alla soluzione!