React JS: newbies tutorial

React è una libreria Javascript creata da Facebook e Instagram (https://facebook.github.io/react/) che permette di realizzare un'applicazione single-page (Single Page Applications (SPA)) attraverso una struttura che la divide in componenti dinamici e riutilizzabili.

Un componente React è una classe JS che estende la classe Component fornita da React. Un componente rappresenta e definisce un blocco atomico di codice HTML, insieme ad eventuali comportamenti dinamici associati a quel frammento (ad esempio, eventi di click). Sono come dei piccoli blocchi Lego, che possono essere composti a piacere tra di loro fino a realizzare applicazioni complesse a piacere. Un componente è isolabile e riutilizzabile, ed è composto unicamente da metodi Javascript. Il metodo fondamentale è render() che ritorna semplicemente il pezzetto di HTML da mostrare.

La sintassi utilizzata per definire i componenti si chiama JSX: è stata sviluppata dai creatori di React per agevolare l'interazione tra codice Javascript e markup HTML all'interno dei componenti. Il codice scritto in questa sintassi ha bisogno di essere poi compilato, in modo da diventare interamente codice Javascript.

Per creare il nostro componente e renderizzarlo nella pagina HTML abbiamo bisogno di un div definito da un id nel nostro file HTML. Nel file JSX collegheremo il componente React al div proprio grazie all'id, come nell'esempio seguente. In questo modo si istruisce il browser a renderizzarlo nella pagina all'interno del relativo tag nel DOM.

See the Pen Start by Makhenzi (@makhenzi) on CodePen.

Nel JSX gli attributi dei tag HTML sono praticamente gli stessi della sintassi HTML, esclusa quache eccezione come "class", che diventa "className" in JSX. La sintassi HTML-like viene wrappata da parentesi tonde, mentre le parti che contengono Javascript sono racchiuse tra parentesi graffe (come vedremo più avanti). La render() ritorna sempre un solo div, all'interno del quale il numero di tag ed elementi può variare a piacere.

Se volessimo realizzare questo grafico usando React, potremmo mostrare le varie date, e far apparire al click su ciascuna data la temperatura e il numero di pirati corrispondenti.

Avremo bisogno di due componenti: uno dovrà renderizzare le date e contenere la logica necessaria a collegare ogni data a un preciso numero di pirati e a una determinata temperatura, mentre l'altro si occuperà di ricevere le istruzioni sull'evento click della data, i pirati e la temperatura e renderizzare gli elementi selezionati in base a esse.

Il primo componente fungerà quindi da "padre", e conterrà al suo interno il collegamento al secondo componente, il "figlio", strettamente dipendente dal primo.

La struttura di React (chiamata DOM virtuale ) ci permette di aggiornare un componente ogni volta che il contenuto al suo interno subisce un cambiamento, senza refreshare l'intera pagina. A questo scopo abbiamo bisogno di un metodo all'interno del componente dove salvare i dati variabili, e di specifici attributi HTML da assegnare agli elementi che subiranno modifiche. Tali attributi si agganceranno poi ad altri metodi che definiremo nel componente e che si occuperanno di effettuare i cambiamenti.

Per il nostro esempio, i dati variabili indipendenti sono le date. Il loro variare in base al click infatti scatena l'azione di resa nel DOM di conseguenti informazioni su pirati e temperatura. Possiamo quindi salvare in un oggetto "DATA" le informazioni relative a ogni data, mentre all'interno del componente padre sfrutteremo la proprietà di React this.state = {} per salvare i dati variabili in forma di coppie chiave-valore.

In questo modo potremo successivamente beneficiare dei metodi che React ci metterà a disposizione per interagire con i dati nello "state" e cambiarne il contenuto arbitrariamente.

Siccome vogliamo usare le chiavi del nostro oggetto DATA per renderizzare le date nell'HTML, sarebbe bello trovare il modo di utilizzare il metodo Javascript map() (Array.prototype.map()) su tali chiavi e mostrarne la return direttamente nell'HTML della render(). E possiamo farlo! Basta wrappare il codice Javascript tra due parentesi graffe nel punto in cui desideriamo venga mostrato l'output di tale codice nel blocco di DOM che gestisce il componente, e il gioco è fatto.

In questo caso in particolare definiremo la callback della map() in un metodo del componente, che ritornerà quindi un pezzetto di HTML nella render() del componente stesso.

See the Pen State1 by Makhenzi (@makhenzi) on CodePen.

Per assegnare l'evento click a ogni data, si dà al tag cliccabile l'attributo onClick. In quest'attributo chiamiamo il metodo del componente nel quale andremo a definire le logiche di modifica dello state e gli eventuali altri cambiamenti che desideriamo scatenare in seguito a tale evento.

Nell'esempio definiremo questo metodo handleClick(), e al suo interno chiameremo il metodo di React setState(), che è ciò che ci permetterà di mutare i dati dello state a ogni evento click. Basterà inserire tra le parentesi di quest'ultimo un oggetto contenente le chiavi dello state che vogliamo modificare, assegnandovi i relativi nuovi valori.

Ricapitolando, ogni volta che avviene un click su una data l'attributo onClick del div selezionato chiama il metodo HandleClick(), che a sua volta chiama il metodo setState() che modifica lo state del componente.

Ogni volta che cambia lo state e non appena ciò accade, React controlla automaticamente la return della render() del componente alla ricerca di contenuti da aggiornare in base al nuovo stato. In caso ce ne siano, triggera automaticamente una nuova render() aggiornando soltanto il pezzetto di HTML mutato.

(Devo ammetterlo e scusarmi, nell'esempio seguente ho inserito prima della return della render() anche tre righe di codice che sfruttano Classnames, una piccola utility di gestione del CSS in base ai cambiamenti dello state, giusto per dare un po' di colore alla preview. La sfrutterò anche nell'ultimo esempio per popolare la preview di un numero variabile di pirati. Qui c'è il link alla repository GitHub con una semplice e chiara guida all'uso.)

See the Pen State2 by Makhenzi (@makhenzi) on CodePen.

Ora che lo stato del nostro componente padre cambia in base alla data selezionata, è giunto il momento di creare il componente figlio che mostri il numero di pirati e la temperatura appropriati.

Lo istanziamo nel nostro file JSX cosi come abbiamo fatto col primo componente. Per agganciarlo poi al padre è sufficiente definirlo dentro la return della render() di quest'ultimo utilizzando la stessa sintassi di un qualunque tag HTML. Se lo chiamiamo "Child", nel blocchetto di HTML esso apparirà nel punto in cui inseriremo <Child />.

Al nostro componente figlio dobbiamo anche passare le informazioni che possiede il padre riguardanti la data attualmente selezionata, con conseguenti pirati e temperatura. Si ricorre quindi all'uso di attributi assegnati al tag di Child, i cui nomi sono scelti in modo arbitrario e il cui contenuto è un'informazione del componente padre.

Il componente figlio in questo modo potrà accedere al proprio interno a dati appartenenti al padre grazie all'uso di questi "attributi-ponte", o props. Nel nostro esempio le props di Child saranno this.props.pirates e this.props.temperature, e conterranno informazioni variabili a seconda dello stato corrente del componente padre.

Ogni volta che lo stato del padre cambia, viene quindi aggiornato automaticamente anche il contenuto delle props del figlio. Ma siccome la render() del figlio mostra i contenuti delle props, anch'essa verrà aggiornata automaticamente in base alle nuove informazioni ricevute, seguendo un lineare flusso di dati unidirezionale.

See the Pen Props by Makhenzi (@makhenzi) on CodePen.

Fatto! I componenti interagiscono tra loro renderizzando nel DOM contenuti diversi a seconda del nostro click, senza refresh e il tutto in una sola pagina. Su questa base la complessità di interazioni e il numero di componenti può aumentare a piacere e permettere la creazione di applicazioni complesse ed efficienti.

Se volete lasciarvi ispirare dalle potenzialità di questa libreria, sul sito react.rocks ci sono un sacco di spunti interessanti. (: