Componenti React: function component con esempi

Un componente React è una funzione JavaScript che restituisce JSX: un pezzo di UI riutilizzabile come un pulsante, una card o un'intera pagina. Lo usi come un tag HTML, <Profile />, e React chiama la funzione per sapere cosa mettere sullo schermo. Le app si costruiscono mettendo componenti dentro altri componenti.

function Avatar() {
    return (
        <div
            style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: '#c7d2fe',
                display: 'grid',
                placeItems: 'center',
                fontWeight: 'bold',
            }}
        >
            AL
        </div>
    );
}

function Profile() {
    return (
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <Avatar />
            <div>
                <strong>Ada Lovelace</strong>
                <div>Wrote the first published program</div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <section>
            <h3>Team</h3>
            <Profile />
            <Profile />
        </section>
    );
}

App renderizza Profile due volte, e ogni Profile renderizza un Avatar. Cambia le iniziali dentro Avatar ed entrambi i profili si aggiornano, perché condividono un'unica definizione. Per ora ogni persona in questa lista è uguale; la pagina successiva, props, mostra come passare a ogni copia i propri dati.

Scrivere un componente

Un function component ha due requisiti:

1. Il suo nome inizia con una lettera maiuscola: Profile, non profile.
2. Restituisce qualcosa che React può renderizzare: JSX, una stringa, un numero, null (non renderizzare nulla) o un array di questi.

function Welcome() {
    return <h1>Welcome back</h1>;
}

// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;

Quando il JSX occupa più righe, racchiudilo tra parentesi tonde dopo return. Senza di esse, un return seguito da un a capo restituisce undefined, e tutto ciò che segue viene ignorato.

Perché il nome deve avere la maiuscola

JSX guarda la prima lettera di un tag. Minuscola significa un elemento HTML integrato, quindi <div> resta <div>. Maiuscola significa "una variabile nello scope", quindi <Profile /> chiama la tua funzione Profile. Se dai a un componente un nome minuscolo, React crea invece un elemento HTML sconosciuto con quel nome:

function Greeting() {
    console.log('Greeting ran');
    return <span>Hello from Greeting</span>;
}

function greeting() {
    console.log('greeting ran');
    return <span>Hello from greeting</span>;
}

export default function App() {
    return (
        <div>
            <p>Capitalized: <Greeting /></p>
            <p>Lowercase: <greeting /></p>
        </div>
    );
}

La seconda riga mostra solo la sua etichetta, e la console mostra solo Greeting ran. React ha messo nella pagina un tag <greeting> vuoto e non ha mai chiamato la funzione minuscola. Una build di sviluppo avvisa anche che The tag <greeting> is unrecognized in this browser; l'anteprima gira come una build di produzione, quindi vedi solo il testo mancante. Rinomina la funzione in Greetings e il tag in <Greetings /> per sistemarlo.

Comporre i componenti

I componenti sono fatti per essere annidati. Una pagina è un albero: App in cima, poi i pezzi del layout, poi parti più piccole fino ai singoli pulsanti. Ogni componente conosce solo i pezzi che renderizza direttamente, quindi puoi ragionare su uno alla volta.

import { useState } from 'react';

function LikeButton() {
    const [liked, setLiked] = useState(false);
    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? 'Liked' : 'Like'}
        </button>
    );
}

function Post({ title }) {
    return (
        <article style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h4 style={{ margin: '0 0 6px' }}>{title}</h4>
            <LikeButton />
        </article>
    );
}

export default function App() {
    return (
        <main>
            <Post title="Components are functions" />
            <Post title="JSX compiles to function calls" />
            <Post title="State lives in components" />
        </main>
    );
}

Ogni LikeButton ha il proprio stato, quindi mettere mi piace a un post lascia stare gli altri. Per aggiungere un pulsante di condivisione a ogni post, lo scrivi una volta e aggiungi <ShareButton /> dentro Post.

Quando dividere un componente

Non c'è una regola fissa, ma alcuni segnali dicono che un pezzo merita un componente tutto suo: lo stesso markup compare in due punti, una sezione del JSX ha il proprio stato (come il pulsante mi piace qui sopra), oppure la funzione è cresciuta tanto da doverla scorrere per vederne il return. Dividere seguendo questi criteri mantiene ogni componente abbastanza piccolo da leggerlo in una schermata. Dividere troppo presto costa poco: un componente è solo una funzione, quindi riunirne due è facile.

Esportare e importare componenti

Gli editor qui contengono un solo file, ma un progetto reale mette i componenti in file separati. Un file può avere un export di default e un numero qualsiasi di export con nome:

// Avatar.jsx
export default function Avatar({ initials }) {
    return <div className="avatar">{initials}</div>;
}

// Badge.jsx
export function Badge({ label }) {
    return <span className="badge">{label}</span>;
}
export function NewBadge() {
    return <Badge label="new" />;
}

// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';

export default function Profile() {
    return (
        <div>
            <Avatar initials="AL" />
            <Badge label="admin" />
            <NewBadge />
        </div>
    );
}

Un export di default può essere importato con qualsiasi nome; un export con nome si importa tra graffe con il suo nome esatto. Di solito i team scelgono uno stile e lo mantengono. Spesso i nomi dei file corrispondono al componente: Avatar.jsx esporta Avatar.

Mantieni i componenti puri

React si aspetta che un componente si comporti come una funzione pura durante il rendering: le stesse props e lo stesso stato danno lo stesso JSX, e il rendering non cambia nulla di ciò che esisteva prima della sua esecuzione. React può renderizzare un componente molte volte, in momenti che non controlli, quindi un componente che modifica variabili esterne durante il rendering produce un risultato diverso ogni volta.

import { useState } from 'react';

let guest = 0;

function ImpureCup() {
    guest = guest + 1;
    return <li>Impure cup for guest #{guest}</li>;
}

function PureCup({ number }) {
    return <li>Pure cup for guest #{number}</li>;
}

export default function App() {
    const [renders, setRenders] = useState(1);

    return (
        <div>
            <ul>
                <ImpureCup />
                <ImpureCup />
                <ImpureCup />
            </ul>
            <ul>
                <PureCup number={1} />
                <PureCup number={2} />
                <PureCup number={3} />
            </ul>
            <button onClick={() => setRenders(renders + 1)}>Render again ({renders})</button>
        </div>
    );
}

Le tazze impure partono da 1, 2, 3. Clicca il pulsante: degli ospiti non è cambiato nulla, eppure la lista impura ora dice 4, 5, 6, perché ogni rendering ha incrementato la variabile condivisa guest. Le tazze pure prendono il loro numero dalle props e restano corrette. In sviluppo, Strict Mode renderizza ogni componente due volte proprio per far emergere questo tipo di bug; l'anteprima gira come una build di produzione, quindi qui la deriva si vede solo quando esegui un nuovo render.

Cambiare le cose va bene, solo non durante il rendering. Aggiorna lo stato nei gestori di eventi, e comunica con il mondo esterno (timer, sottoscrizioni, il titolo del documento) negli effetti.

Componenti vs elementi

Il componente è la funzione, Profile. Un elemento è ciò che JSX crea quando scrivi <Profile />: un piccolo oggetto che dice "renderizza Profile con queste props". React crea gli elementi, chiama i componenti che nominano e trasforma il risultato in DOM. Non chiami mai tu un componente come Profile(); scrivi <Profile /> e lasci che sia React a chiamarlo, così può tenere traccia del suo stato e della sua posizione nell'albero.

Quella posizione conta. Questo esempio definisce un componente dentro un altro componente, un errore comune:

import { useState } from 'react';

export default function App() {
    const [clicks, setClicks] = useState(0);

    function NameField() {
        const [text, setText] = useState('');
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
    }

    return (
        <div>
            <NameField />
            <button onClick={() => setClicks(clicks + 1)}>Re-render App ({clicks})</button>
        </div>
    );
}

Scrivi qualcosa, poi clicca il pulsante: il tuo testo sparisce. Ogni rendering di App crea una funzione NameField nuova di zecca, quindi React vede in quel punto un tipo di componente diverso e butta via quello vecchio insieme al suo stato. Sposta NameField sopra App, al livello più alto del file, e il testo sopravvive a ogni clic. La pagina sul rendering spiega come React decide cosa mantenere.

Function component e class component

Prima che arrivassero gli hook in React 16.8, i componenti che avevano bisogno di stato si scrivevano come classi:

import { Component } from 'react';

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

I class component funzionano ancora in React 19, e li incontrerai in codebase più vecchie e negli error boundary, che richiedono ancora una classe. Il codice nuovo usa function component con hook come useState e useEffect, che fanno lo stesso lavoro con meno codice. La pagina sui class component associa ogni funzionalità delle classi al suo hook.