React, l’interfaccia utente costruita componente su componente

28 giugno 2014

Un esempio completo

Per scoprire altre caratteristiche peculiari di React, dissezioniamo il codice della classica applicazione “Cose da fare” (To Do List), presente anche sul sito ufficiale (vedi “An Application”).

Questa applicazione costituisce uno degli esempi dimostrativi a cui si ricorre più spesso per illustrare le caratteristiche dei framework come React e affini e permette di compilare una lista di cose da fare inserendo il testo in una casella e premendo un pulsante per aggiungere l’elemento all’elenco.

Per implementare l’interfaccia utente con React, dobbiamo scomporla nelle sue parti fondamentali.

Iniziamo con la creazione del componente che mostra le “cose da fare” come lista non ordinata usando dei punti elenco:

var TodoList = React.createClass({ 
	
	render: function() { 
		var createItem = function(itemText) { 
			return <li>{itemText}</li>; 
		}; 
		
		return <ul>{this.props.items.map(createItem)}</ul>; 
	} 
});

Il codice definisce il componente “TodoList” e implementa la funzione render() per generare il markup corrispondente; la funzione di supporto createItem() produce il markup di una singola “cosa da fare” e viene richiamata per ogni elemento presente nella lista delle attività; la lista è memorizzata nella proprietà items del componente.

Vediamo il codice del componente che costituisce l’applicazione nella sua interezza e che assembla tutti i componenti in un unico contenitore:

var TodoApp = React.createClass({ 

	getInitialState: function() { 
		return {items: [], text: ''}; 
	}, 

	onChange: function(e) { 
		this.setState({text: e.target.value}); 
	}, 

	handleSubmit: function(e) { 
		e.preventDefault(); 
		var nextItems = this.state.items.concat([this.state.text]); 
		var nextText = ''; 
		this.setState({items: nextItems, text: nextText}); 
	}, 

	render: function() { 
		return ( 
			<div> 
			<h3>TODO</h3> 
			<TodoList items={this.state.items} /> 
			<form onSubmit={this.handleSubmit}> 
				<input onChange={this.onChange} value={this.state.text} /> 
				<button>{'Add #' + (this.state.items.length + 1)}</button> 
			</form> 
			</div> 
		); 
	} 
});

La funzione getInitialState() imposta i valori iniziali dell’interfaccia, ossia predispone un array vuoto di attività da fare e il testo predefinito della descrizione. Nel metodo render() troviamo la dichiarazione del componente <TodoList> a cui viene passata la lista degli elementi (che verrà memorizzata nella proprietà relativa); ogni cambiamento alla lista scatenerà quindi l’azione di React che aggiornerà il DOM del componente sulla pagina.

È presente inoltre la dichiarazione del form per l’inserimento di nuove attività, con l’aggancio dei callback per l’evento onSubmit – per intercettare l’invio (submit, appunto) del form – e dell’evento onChange per la casella di testo in cui inseriamo la descrizione – poiché il suo valore deve essere copiato nelle variabili di stato dei componenti React e aggiornato di conseguenza se questo viene modificato tramite codice.

Le funzioni di callback hanno il semplice compito di aggiornare lo stato del componente, delegando a React il compito di intervenire sul DOM per riflettere le modifiche sui controlli nella pagina nel modo più veloce possibile.

Infine, per visualizzare il controllo contenitore dell’intera applicazione nel <body> della pagina basta scrivere:

React.renderComponent(<TodoApp />, document.body);

Avremmo potuto scegliere qualsiasi altro elemento contenitore invece di <body>elemento, anche un <div>, usando la funzione getElementById().

È possibile visualizzare un esempio funzionante dell’applicazione e più ricco di funzionalità (con possibilità di contrassegnare le attività svolte e rimuovere quelle completate) in questa pagina.

Conclusioni

React offre paradigma che ci aiuta a frazionare gli elementi che compongono l’interfaccia utente in componenti riutilizzabili. Grazie a un numero ristretto di funzioni e alla sintassi JSX agevola la scrittura della logica JavaScript e del markup.

La gestione dell’interfaccia è l’unica missione di React: il framework non è stato appesantito inutilmente da dipendenze indesiderate e non necessarie (come ad esempio servizi per chiamate REST, widget o altre aggiunte ed estensioni), poiché è stato progettato per essere snello ed estremamente performante nell’intervenire sul DOM, offrendo allo sviluppatore massima apertura e libertà di scelta su quali librerie accessorie adottare per svolgere tutti quei compiti che non sono legati strettamente alla realizzazione dell’interfaccia.

Esiste già tuttavia un nutrito insieme di soluzioni e add-on disponibili con adeguata documentazione per le esigenze più frequenti di integrazione ed estensione con altri framework e librerie che rendono React un ottimo strumento per la creazione di Web Application.

Grazie alle basi fornite da questo articolo, potete approfondire tutte le altre funzionalità della libreria di sicuro interesse consultando la documentazione completa e gli esempi avanzati.

Se vuoi aggiornamenti su React, l'interfaccia utente costruita componente su componente inserisci la tua e-mail nel box qui sotto:
UI
 
X
Se vuoi aggiornamenti su React, l'interfaccia utente costruita componente su componente

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy