Cos'è React? La libreria JavaScript per le UI spiegata

React è una libreria JavaScript per costruire interfacce utente a partire da componenti. Descrivi come deve apparire lo schermo per i dati attuali, e quando i dati cambiano React aggiorna la pagina di conseguenza. React, React JS e ReactJS sono la stessa cosa: una libreria open source nata in Facebook (oggi Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Clicca entrambi i pulsanti. Ogni Counter tiene il proprio numero, perché ognuno è una copia separata del componente con il suo stato. Aggiungi una terza riga, <Counter label="Plums" />, e compare un nuovo contatore indipendente.

Questo breve esempio mostra già le tre idee su cui si basa React: i componenti (Counter e App sono funzioni che restituiscono UI), JSX (la sintassi simile all'HTML dentro return) e lo stato (count, un valore che fa ridisegnare il componente a React quando cambia).

Il problema che React risolve

Un'interfaccia utente è un'immagine di alcuni dati. Quando i dati cambiano, anche l'immagine deve cambiare, e con essa ogni parte dello schermo che dipende da quei dati. Senza una libreria scrivi quel codice a mano: trovi ogni elemento e poi imposti tu il testo, la classe o la visibilità. Ogni nuova funzionalità aggiunge un altro punto che devi ricordarti di aggiornare.

React ribalta la situazione. Scrivi una funzione che dice come deve essere lo schermo per un certo stato, e React capisce quali parti della pagina devono cambiare. Questa si chiama UI dichiarativa, in contrapposizione al codice imperativo che elenca ogni modifica al DOM passo dopo passo. Ecco i due stili affiancati in un unico esempio:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand affida il suo paragrafo a semplice codice DOM (l'effetto esegue quel codice solo dopo che React ha creato il paragrafo). Tiene il numero in una variabile, trova ogni elemento con querySelector e ne imposta il testo a mano. Declarative dice solo "mostra il conteggio e mostra se è pari". Elimina la riga di handleClick che imposta .parity e clicca qualche volta: la prima riga ora sostiene che 3 è pari, mentre la seconda non può perdere la sincronia, perché il testo viene calcolato da count a ogni rendering.

Come React aggiorna la pagina

Quando lo stato cambia, React chiama di nuovo la funzione del tuo componente. Quella chiamata è un rendering. La funzione restituisce una nuova descrizione della UI, React la confronta con la precedente e poi modifica solo le parti della pagina reale che sono diverse. Spesso quella descrizione in memoria viene chiamata virtual DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Apri la console sotto l'anteprima e digita qualche lettera. Ogni tasto registra un rendering con il nuovo valore. L'input mantiene il focus e la posizione del cursore, perché React ha toccato solo il testo del paragrafo e il valore dell'input, non l'intera pagina. La pagina sul rendering spiega esattamente quando un componente esegue un nuovo render.

Componenti, JSX e stato in breve

I componenti sono funzioni JavaScript il cui nome inizia con una lettera maiuscola. Restituiscono ciò che deve apparire sullo schermo, e li usi come tag HTML: <Counter />. Una pagina è un albero di componenti, da quelli piccoli come un pulsante a quelli grandi come un'intera schermata di impostazioni. Vedi componenti.

JSX è la sintassi che ti permette di scrivere markup dentro JavaScript. Le parentesi graffe riportano a JavaScript, quindi {count} mostra un valore e {items.map(...)} trasforma un array in una lista. Uno strumento di build compila JSX in semplici chiamate di funzione prima che il browser lo esegua.

Lo stato sono i dati che un componente ricorda tra un rendering e l'altro. Lo crei con l'hook useState, e chiamare il suo setter è il modo in cui dici a React che qualcosa è cambiato. I dati scorrono dai genitori ai figli tramite le props, che sono gli argomenti di un componente.

Questo esempio li usa tutti: una lista renderizzata da un array nello stato e un form che vi aggiunge elementi.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Aggiungi un'attività e cambiano due cose insieme: la lista e il conteggio sotto di essa. Non hai mai detto al conteggio di aggiornarsi. Entrambi leggono da tasks, quindi entrambi lo seguono. Cambia l'array iniziale in [] e la lista mostra invece "Nothing to do.".

Cosa React non è

React è una libreria, non un framework completo. Copre i componenti, lo stato e la loro trasformazione in UI, e lascia fuori di proposito diverse cose di cui un'app completa ha bisogno:

• Routing. Non c'è un modo integrato per associare gli URL alle pagine. React Router e i router dei framework colmano questa lacuna.
• Recupero dei dati e rendering lato server. React ti dà strumenti come gli effetti e Suspense, ma non impone da dove arrivano i dati né come le pagine vengono renderizzate su un server.
• Una configurazione di build. I browser non capiscono JSX, quindi ti serve uno strumento come Vite per compilarlo.

I framework si basano su React per fornire queste parti. Next.js e la modalità framework di React Router aggiungono routing, rendering lato server e caricamento dei dati, e il team di React consiglia di iniziare un'app completa con uno di loro. Per un'app lato client o per imparare, Vite con React semplice è un punto di partenza piccolo e veloce; vedi come installare React.

React vs React Native

React di per sé descrive solo i componenti e come cambiano. Un renderer separato li trasforma in qualcosa che puoi vedere. React DOM esegue il rendering in pagine web, ed è quello che usano tutti gli esempi di questo sito. React Native esegue il rendering dello stesso tipo di componenti in viste native iOS e Android, quindi scrivi <View> e <Text> al posto di <div> e <p>, e non c'è alcun file HTML o CSS. Componenti, props, stato e hook funzionano allo stesso modo in entrambi, quindi ciò che impari qui vale direttamente anche lì.

Quando imparare React

Impara React dopo le basi di JavaScript, perché in React tutto è JavaScript. Prima di iniziare dovresti avere dimestichezza con:

• variabili, funzioni e arrow function
• gli array e i loro metodi map e filter
• oggetti, destrutturazione e la sintassi spread (...)
• import ed export
• promise e async/await, per caricare dati

Se ti suonano familiari, inizia con JSX e i componenti, poi props e stato. Effetti, ref, context e strumenti per le prestazioni arrivano dopo, quando costruire piccoli componenti interattivi ti verrà naturale.