ReactJS è una libreria open-source di JavaScript sviluppata da Facebook.
E’ ampiamente utilizzata per costruire interfacce grafiche dinamiche e interattive.
Sono qui elencati i principali concetti base:
Virtual DOM
Anzichè manipolare direttamente il DOM (Document Object Model) del browser, ReactJS crea un DOM virtuale in memoria, su cui applica tutte le modifiche necessarie, prima di propagarle al vero DOM. ReactJS cambia solo le parti di DOM che necessitano di essere cambiate. Questo approccio aumenta le performance delle applicazioni ReactJS e minimizza gli aggiornamenti del vero DOM, ottenendo un render più veloce.
Architettura a componenti
Le componenti di ReactJS sono porzioni di codice in cui viene definita la logica di una parte specifica dell’interfaccia grafica. Le componenti possono essere incapsulate una dentro l’altra secondo una logica ad albero (madre-figlie) ed essere riutilizzate all’interno della stessa applicazione. La loro natura modulare le rende facili da manutenere e debaggare.
JSX
JSX è un’estensione sintattica di JavaScript che permette di scrivere codice simil-HTML in un codice JavaScript. Le componenti di ReactJS possono essere istanziate come elementi custom di JSX ed essere riutilizzate facilmente in diverse parti dell’applicazione.
Flusso unidirezionale
I dati fluiscono dalle componenti madri a quelle figlie, garantendo coerenza e prevedibilità del comportamento dell’interfaccia, semplificando il debugging e la manutenzione delle applicazioni ReactJS.
Gestione dello stato
Lo stato di una componente ReactJS è un oggetto JavaScript le cui proprietà descrivono le caratteristiche della componente. Quando lo stato cambia, ReactJS rigenera automaticamente la componente aggiornando l’interfaccia coerentemente con il nuovo stato.
Quando più componenti necessitano di aggiornarsi sulla base degli stessi dati, è possibile “tirar su” lo stato da una componente figlia a quella madre più vicina e in comune e condividere in essa lo stato: le componenti figlie riceveranno le proprietà dello stato, per esempio, tramite props, sfruttando il concetto di flusso unidirezionale.