React è probabilmente la prima libreria JavaScript che nasce con una vocazione specifica: diventare la soluzione definitiva per sviluppatori frontend e app mobile basate su HTML5, la proverbiale "panacea per tutti i mali", il tool che permetta di costruire interfacce utente dinamiche e sempre più complesse rimanendo comunque semplice e intuitivo da utilizzare.
Creata da Facebook, React è la colonna portante del il social network più popolare del mondo e su di essa si basa l'interfaccia Web di Instagram.
La libreria può essere scaricata dal sito ufficiale, facebook.github.io/react/, che contiene tra le altre cose anche una introduzione rapida all'uso e diversi esempi.
In questa guida esaminiamo le caratteristiche peculiari di React, valutiamo i punti di forza della libreria e scopriamo come sfruttarla al meglio per creare interfacce utente, partendo dai principi basilari e approfondendo man mano la sua architettura per imparare a padroneggiarla a fondo e soddisfare le esigenze più avanzate.
L'approccio React
La creazione di applicazioni Web, indipendentemente dal framework scelto per lo sviluppo, coinvolge necessariamente i tre linguaggi fondamentali della piattaforma: HTML per la
struttura, CSS per la stilizzazione e JavaScript per la logica applicativa.
Per molte delle librerie esistenti, e React non fa eccezione, il linguaggio HTML nello specifico viene utilizzato quasi esclusivamente per creare “componenti Web” riutilizzabili, a volte estendendo il linguaggio HTML stesso.
Le pagine complete invece sono ridotte al minimo, anzi molto spesso a una sola, tant'è vero che queste applicazioni prendono il nome di Single Page Applications (SPA) e che servono da “contenitore” in cui creare e gestire l'interfaccia utente.
La forza di React rispetto ad altre librerie è quella di consentire l'uso di un approccio dichiarativo simile all'HTML, quindi molto familiare, per definire i componenti che rappresentano parti significative e logiche dell'interfaccia utente, ad esempio un commento a un articolo, o la lista degli stessi commenti.
Benché dichiarativa, la rappresentazione del componente in realtà si traduce in chiamate all'API di React che intervengono - nel modo più veloce e performante possibile - sul DOM della pagina per creare gli elementi necessari.
React è la “V” di MVC
Se dovessimo inquadrare React all'interno di un paradigma, potremmo dire che esso è la “V” di MVC: nasce per gestire la parte relativa alle view, ossia alla presentazione, e all'intercettazione degli eventi di input dell'utente, senza forzare l'adozione di specifiche funzioni né limitare l'interfacciamento ad altre librerie per quanto riguarda l'eventuale comunicazione con un server di backend, o specifiche architetture di binding ai dati, frangenti in cui lo sviluppatore ha libera scelta sugli strumenti con cui integrare React.
Questa prassi può risultare strana o controintuitiva a chi si avvicina a React per la prima volta, soprattutto dopo aver lavorato più o meno assiduamente con altre librerie analoghe, ma il suo uso potrebbe risultare per molti estremamente più semplice e comodo, soprattutto quando la complessità dell'applicazione aumenta.
Nella prossima lezione approfondiremo le affinità e le differenze tra React e le librerie e i framework JavaScript più noti.