Gli esempi di utilizzo della libreria React che abbiamo visto sino a ora sono “statici”, cioè producono interfacce utente che non prevedono alcun tipo di interazione particolare né modificano il proprio aspetto.
È chiaro che React è fatto per creare applicazioni che, come Facebook e Instagram, rispondono alle azioni degli utenti aggiornando la pagina in tempo reale, in modo dinamico e soprattutto veloce ed efficiente.
In un contesto MVC, abbiamo individuato React come la “V”, a supporto quindi della creazione di viste, eventualmente generate a partire da un modello di dati. I componenti React possono infatti creare gli elementi del DOM che costituiscono l'interfaccia basandosi sui dati contenuti in oggetti JavaScript che ne costituiscono il model. Quindi React – come dice il nome stesso – “reagisce” ai cambiamenti apportati ai dati aggiornando di conseguenza i componenti sulla pagina.
In altre parole React ci permette di passare informazioni ai componenti Web utilizzando:
- un oggetto che ne rappresenta lo stato: un insieme di dati che modificati danno luogo a un aggiornamento del componente stesso (come avviene tipicamente in una State Machine, o “macchina a stati”),
- oppure specificando una o più proprietà che costituiscono valori immutabili per i quali non è prevista alcuna alterazione, utili ad esempio per configurare il componente o per indicare valori di default per lo stato.
La scelta di passare informazioni ai componenti sotto forma di proprietà o inserendoli nello stato dipende in primo luogo dalla variabilità prevista per le informazioni e, più in generale, dal disegno concettuale su cui ci si basa per realizzare la propria applicazione Web.
Si prenda in esame l'esempio che segue:
<script type="text/babel">
var LoggedUser = React.createClass({
render: function() {
return <p>
Benvenuto <strong>{this.props.user.fullName().toUpperCase()}</strong>,
sei collegato come <em>{this.props.user.userName}</em>.
</p>
}
});
var userInfo = {
userName : 'admin',
firstName : 'Mark',
lastName : 'Zuckerberg',
fullName : function() {
return this.firstName + ' ' + this.lastName;
}
};
ReactDOM.render(<LoggedUser user={userInfo}/>, document.body);
</script>L'oggetto LoggedUser rappresenta un componente React per la visualizzazione di informazioni sull'utente collegato al sito, e viene istanziato usando la funzione React.createClass() che abbiamo già incontrato nelle lezioni precedenti:
var LoggedUser = React.createClass({ render : function() { ...Il metodo render() del componente si occupa di creare un paragrafo con il testo da mostrare, sostituendo le parti che sono delimitate dalle parentesi graffe con i valori determinati dal codice JavaScript presente al loro interno.
Le informazioni sull'utente vengono prelevate dalla proprietà user dell'oggetto props di cui sono dotati tutti i componenti React; il valore di user viene passato come proprietà al componente nella chiamata alla funzione ReactDOM.render():
ReactDOM.render(<LoggedUser user={userInfo}/>, document.body);È possibile passare a un componente React un numero virtualmente infinito di proprietà; nel codice del componente sarà possibile leggerne il valore in qualsiasi momento accedendo all'oggetto props, e non sarà possibile modificarli.
Tutto ciò che rappresenta un valore mutabile nel tempo, modificato a seguito della risposta a un'azione dell'utente, o al variare di condizioni dell'ambiente operativo, non può essere inserito tra le proprietà ma deve entrare a far parte dello stato del componente, che è accessibile invece tramite l'oggetto state.
Per affrontare meglio la problematicha della gestione dello stato del componente, nelle prossime lezioni vedremo come intercettare gli eventi che si verificano nella pagina e modificare lo stato del componente React per aggiornare l'interfaccia utente.