React, l’interfaccia utente costruita componente su componente

20 giugno 2014

React è una libreria JavaScript, creata da Facebook e Instagram (e utilizzata anche nei due social network), che consente di creare interfacce utente complesse tramite la loro suddivisione in componenti.

L’idea è quella di supportare i team di sviluppo che lavorano su progetti di dimensioni medio/grandi o di una certa complessità, agevolando la creazione, la manutenzione e l’aggiornamento della UI.

React è stato progettato per essere semplice da usare e supporta la definizione di modelli HTML per ciascun componente tramite un approccio dichiarativo, che viene aggiornato automaticamente dal “core” della libreria nel momento in cui cambiano i dati dello stato su cui si basa il modello stesso.

In questo articolo esaminiamo le caratteristiche che fanno di React una libreria unica nel suo genere.

Sviluppo per componenti

Ogni componente è in grado di definire il proprio aspetto (ossia il markup), mantenere un proprio stato e racchiudere una parte di logica.

Per aiutare a comprendere meglio il principio di funzionamento, un componente non è molto diverso da quello adottato in altri ambienti dove l’interfaccia si esprime tramite l’uso di controlli, ovvero classi specializzate che eseguono il rendering di una porzione dell’interfaccia complessiva, contengono campi per mantenere i valori che costituiscono lo stato e all’occorrenza metodi per l’implementazione di funzionalità usate internamente o richiamabili dall’esterno, se necessari.

Ciascun componente incapsula tutto ciò di cui ha bisogno, ed è pertanto completamente isolabile, riutilizzabile e testabile, in ottemperanza ai principi di corretta suddivisione delle responsabilità.

Tutto ciò può avvenire sul server, tramite il supporto a Node.js, oppure all’interno del browser, sul client, permettendo a interfacce utente anche molto complesse di reagire in tempo reale.

Scaricare React

Per utilizzare il framework, occorre innanzitutto scaricare i file della libreria dalla pagina dei download del sito ufficiale.

Possiamo scaricare individualmente i file sorgenti della libreria, oppure un “bundle” completo in formato ZIP contenente tutti i file necessari. Date le dimensioni estremamente contenute del pacchetto, possiamo optare per quest’ultima soluzione: sarà possibile estrarre e copiare i file necessari in base alla necessità.

La versione disponibile al momento della redazione di questo articolo è la 0.10.0; tuttavia, trattando concetti di base, ciò che andremo a vedere dovrebbe applicarsi senza alcun problema anche alle versioni successive.

Inizializzare la libreria

Per utilizzare la libreria sulle nostre pagina Web, aggiungiamo nel markup i riferimenti ai file JavaScript (che si trovano nella cartella build dell’archivio che abbiamo scaricato).

In alternativa, possiamo referenziare gli script disponibili su CDN all’indirizzo http://fb.me. Vediamo un esempio:

Qui di seguito è riportato un esempio della struttura base di una pagina che fa uso di React:

<!DOCTYPE html> 
<html> 
<head> 
<title>Ciao React!</title> 

<!-- Import della libreria React -->
<script src="http://fb.me/react-0.10.0.js"></script> 
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script> 

</head> 
<body> 
<div id="example"></div> 
<script type="text/jsx">

/** 
* @jsx React.DOM 
*/ 

// ** Il codice va qui! ** 
</script> 
</body> 
</html>

Noterete subito che il tag <script> indica un content type particolare: text/jsx. A cosa si riferisce? Vediamolo subito.

La sintassi JSX

Come abbiamo già detto, i componenti creati con React sono in grado di generare il markup HTML che li rappresenta visualmente nella pagina attraverso l’applicazione di un template, che generalmente varia in base al modello dei dati e allo stato del componente, espresso tramite codice JavaScript.

I creatori di React hanno voluto agevolare il lavoro di scrittura del template adottando JSX, una sintassi che consente di mescolare codice e funzioni JavaScript al markup HTML.

Ad esempio, per generare un link all’interno del nostro componente React, possiamo scrivere qualcosa di simile a questo:

React.renderComponent( 
	return React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Ciao React!'); 
);

È comprensibile che per tag HTML più complessi e articolati, il codice tenda a diventare intricato e poco leggibile; utilizzando invece JSX, possiamo rappresentare il template in questo modo, semplificandone la scrittura:

React.renderComponent( 
	<a href="http://facebook.github.io/react/">Ciao React!</a> 
);

Il compilatore “live” di JSX, attivato importando il file sorgente JSXTransformer.js, interpreta questi frammenti di markup e li trasforma nel codice corrispondente in linguaggio JavaScript.

Un avvertimento importante: oltre a specificare il tipo di contenuto “text/jsx” nel tag <script>, non bisogna dimenticare di aggiungere in testa al codice il commento che indica al compilatore JSX di “trasformarlo”, altrimenti esso non verrà preso in considerazione:

/** * @jsx React.DOM */

Oltre ai tag HTML standard, la sintassi JSX si potrà utilizzare anche per esprimere nomi di componenti React creati da noi, valorizzando le proprietà del componente stesso.

Pur essendo JSX un ottimo strumento per lavorare con React, poiché consente di scrivere in modo fluido e familiare il codice HTML della nostra interfaccia, il suo utilizzo non è obbligatorio. Tuttavia continueremo a farne uso anche nei prossimi esempi per acquisire maggior confidenza con questo strumento.

Nella seconda parte dell’articolo vedremo come creare i componenti.

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