Componenti funzionali, props e JSX in React – Un Tutorial per principianti su React.js

Articolo originale: React Functional Components, Props, and JSX – React.js Tutorial for Beginners

React è una delle librerie JavaScript più popolari per la realizzazione di interfacce utente.

Se vuoi diventare uno sviluppatore front-end o trovare un lavoro nel campo dello sviluppo web, probabilmente è bene che tu conosca approfonditamente React.

In questo articolo, imparerai alcuni concetti di base di React come creare un componente, la sintassi JSX e le props. Se hai poca o nessuna esperienza con React, questo è l'articolo adatto a te.

Per iniziare, ecco come installare React.

Cos'è JSX?

La prima cosa che capirai dopo aver installato il tuo primo progetto React è che una funzione JavaScript restituisce sempre del codice HTML:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

Questa è una particolare estensione della sintassi valida per React, detta JSX (JavaScript XML). Di norma, nei progetti che si occupano di front-end, manteniamo HTML, CSS e JavaScript in file separati. Tuttavia, in React funziona in modo leggermente diverso.

Nei progetti React, non creiamo file HTML separati, perché JSX ci permette di scrivere HTML e JavaScript nello stesso file, come nell'esempio precedente. Puoi comunque separare il CSS in un altro file.

All'inizio, JSX potrebbe sembrare un po' strano, ma ti ci abituerai.

JSX è molto pratico, perché possiamo eseguire qualsiasi codice JavaScript (logica, funzioni, variabili e così via) all'interno dell'HTML direttamente usando le parentesi graffe { }, in questo modo:

function App() {
  const text = 'Hello World';
  
  return (
    <div className="App">
      <p> {text} </p>
    </div>
  );
}

Puoi anche assegnare i tag HTML alle variabili JavaScript:

const message = <h1>React is cool!</h1>;

O puoi restituire dell'HTML all'interno della logica JavaScript (come dei casi if-else):

render() {
    if(true) {
        return <p>YES</p>;
    } else {
        return <p>NO</p>;
    }
}

Non mi soffermerò oltre sui dettagli di JSX, ma assicurati di seguire le seguenti regole quando scrivi del codice JSX:

• i tag HTML e dei componenti devono essere sempre chiusi < />
• Alcuni attributi come “class” diventano “className” (perché class fa riferimento alle classi JavaScript), “tabindex” diventa “tabIndex” (va scritto in camelCase)
• Non possiamo restituire più di un elemento HTML alla volta, quindi assicurati di racchiudere il tutto nei tag dell'elemento genitore:

return (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);

• o in alternativa, tra tag vuoti:

return (
  <>
    <p>Hello</p>
    <p>World</p>
  </>
);

Cosa sono i componenti funzionali e di classe?

Dopo esserti abituato alla sintassi JSX, la prossima cosa da capire è la struttura basata sui componenti di React.

Se torni a guardare il primo esempio di codice in cima al post, vedrai che il codice JSX viene restituito da una funzione. Ma la funzione App( ) non è una funzione ordinaria – in realtà è un componente. Quindi, cos'è un componente?

Cos'è un componente?

Un componente è un blocco di codice indipendente e riutilizzabile che divide l'interfaccia utente in porzioni più piccole. Ad esempio, se stiamo costruendo l'interfaccia utente di Twitter con React:

Piuttosto che creare l'intera interfaccia utente in un singolo file, possiamo e dovremmo dividere tutte le sezioni (evidenziate in rosso) in parti più piccole e indipendenti, ovvero in componenti.

React ha due tipi di componenti: funzionali e di classe. Vediamoli entrambi nel dettaglio.

Componenti funzionali

Il primo tipo di componente in React è il funzionale. Un componente funzionale è praticamente una funzione JavaScript/ES6 che restituisce un elemento React (JSX). Secondo la documentazione ufficiale di React, la funzione qui sotto è un componente funzionale:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Alternativamente, puoi creare un componente funzionale con la definizione di una funzione freccia:

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}

Questa funzione è un componente valido di React perché accetta un singolo oggetto "props" (che sta per proprietà) come argomento con dati e restituisce un elemento React. — reactjs.org

Per essere in grado di usare un componente in un secondo momento, hai bisogno di esportarlo, per poi importarlo dove necessario:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

Dopo averlo importato, puoi chiamare il componente come in questo esempio:

import Welcome from './Welcome';

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

Quindi un componente funzionale di React:

• è una funzione JavaScript/ES6
• deve restituire un elemento React (JSX)
• inizia sempre con una lettera maiuscola (convenzione)
• prende props come parametro se necessario

Cosa sono i componenti di classe?

Il secondo tipo di componenti sono i componenti di classe, cioè delle classi ES6 che restituiscono JSX. Qui sotto puoi vedere la stessa funzione Welcome, questa volta come componente di classe:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

A differenza dei componenti funzionali, i componenti di classe devono avere un metodo addizionale render( ) per restituire JSX.

Perché usiamo i componenti di classe?

Utilizziamo i componenti di classe per via dello "stato". Nelle versioni più vecchie di React (precedenti alla 16.8), non era possibile usare lo stato all'interno dei componenti funzionali.

Perciò, c'era bisogno dei componenti funzionali solo per renderizzare le interfacce grafiche, mentre avremmo usato i componenti di classe per la gestione dei dati e per altre operazioni aggiuntive (come i metodi del ciclo di vita).

Tutto questo è cambiato con l'introduzione degli Hooks e adesso possiamo utilizzare gli stati anche nei componenti funzionali.

Un componente di classe:

• è una classe ES6, sarà un componente tramite l'uso della parola chiave ‘extends’.
• accetta props (nel costruttore) se necessario
• deve avere un metodo render( ) per restituire JSX

Cosa sono le props in React?

Un altro importante concetto dei componenti è il modo in cui comunicano. React ha degli oggetti speciali chiamati props (da proprietà) che usiamo per trasportare dati da un componente all'altro.

Ma attenzione – le props trasportano i dati soltanto in una direzione (dal componente genitore al figlio). Non è possibile per delle props trasportare dati dal figlio al genitore o a componenti dello stesso livello.

Riconsideriamo la funzione App( ) precedente per vedere come passare dei dati con le props.

Per prima cosa, dobbiamo definire una proprietà sul componente Welcome e assegnarle un valore:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome name="John"/>
      <Welcome name="Mary"/>
      <Welcome name="Alex"/>
    </div>
  );
}

Le props sono valori personalizzati a rendono i componenti più dinamici. Dato che il componente Welcome è il figlio in questo caso, dobbiamo definire le prop sul suo genitore (App), in modo da poter passare dei valori e ottenere il risultato semplicemente accedendo al nome della prop:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Le prop di React sono davvero utili

Gli sviluppatori React usano le props per passare dati e le prop sono davvero utili per svolgere questo compito. Ma per quanto riguarda la gestione dei dati? Le props vengono usate per passare dati, ma non per manipolarli. Parlerò della gestione dei dati in un prossimo articolo qui su freeCodeCamp.

Grazie per aver letto questo articolo!