Cos'è React

React è una libreria JavaScript progettata per creare interfacce utente veloci e interattive per applicazioni web e mobili. È una libreria front-end open source, basata su componenti, responsabile solo del livello di visualizzazione dell'applicazione.

Perché React?

La popolarità di React oggi ha eclissato quella di tutti gli altri framework di sviluppo front-end. Ecco perché:

• Facile creazione di applicazioni dinamiche

React semplifica la creazione di applicazioni web dinamiche perché richiede meno codice e offre più funzionalità, rispetto a JavaScript, dove la codifica spesso diventa complessa molto rapidamente.

• Prestazioni migliori

React utilizza Virtual DOM, creando così applicazioni web più velocemente. Virtual DOM confronta gli stati precedenti dei componenti e aggiorna solo gli elementi nel Real DOM che sono stati modificati, invece di aggiornare nuovamente tutti i componenti, come fanno le applicazioni Web convenzionali.

• Componenti riutilizzabili

i componenti sono gli elementi costitutivi di qualsiasi applicazione React e una singola app di solito è composta da più componenti. Questi componenti dispongono di logica e controlli e possono essere riutilizzati in tutta l'applicazione, il che a sua volta riduce drasticamente i tempi di sviluppo dell'applicazione.

• Flusso di dati unidirezionale

React segue un flusso di dati unidirezionale. Ciò significa che durante la progettazione di un'app React, gli sviluppatori spesso nidificano i componenti child all'interno dei componenti parent. Poiché i dati fluiscono in un'unica direzione, diventa più facile eseguire il debug degli errori e sapere dove si verifica un problema in un'applicazione nel momento in questione.

• Facile da imparare

React è facile da imparare, poiché combina principalmente concetti HTML e JavaScript di base con alcune aggiunte utili. Tuttavia, come nel caso di altri strumenti e framework, è necessario dedicare del tempo per ottenere una corretta comprensione della libreria di React.

• Può essere utilizzato per lo sviluppo di app sia web che mobile

Sappiamo già che React viene utilizzato per lo sviluppo di applicazioni web, ma non è tutto ciò che può fare. Esiste un framework chiamato React Native, derivato dallo stesso React, che è estremamente popolare e viene utilizzato per creare bellissime applicazioni mobili. Quindi, in realtà, React può essere utilizzato per realizzare applicazioni sia web che mobile.

• Strumenti dedicati per un facile debug

Facebook ha rilasciato un'estensione di Chrome che può essere utilizzata per eseguire il debug delle applicazioni React. Questo rende il processo di debug delle applicazioni web React più veloce e più semplice.

Principali Funzionalità di React

JSX - Estensione della sintassi JavaScript

JSX è un'estensione della sintassi per JavaScript. Viene utilizzato con React per descrivere come dovrebbe apparire l'interfaccia utente. Usando JSX, possiamo scrivere strutture HTML nello stesso file che contiene codice JavaScript. Ciò semplifica la comprensione e il debug del codice, poiché evita l'utilizzo di complesse strutture DOM JavaScript.

DOM virtuale

React mantiene in memoria una rappresentazione leggera del DOM "reale", noto come DOM "virtuale" (VDOM). La manipolazione del DOM reale è molto più lenta della manipolazione del VDOM perché nulla viene disegnato sullo schermo. Quando lo stato di un oggetto cambia, VDOM cambia solo quell'oggetto nel DOM reale invece di aggiornare tutti gli oggetti.

Prestazioni

React utilizza VDOM, che rende le applicazioni Web molto più veloci rispetto a quelle sviluppate con i framework front-end alternativi. React suddivide un'interfaccia utente complessa in singoli componenti, consentendo a più utenti di lavorare contemporaneamente su ciascun componente, accelerando così i tempi di sviluppo.

Estensioni

React va oltre la semplice progettazione dell'interfaccia utente e ha molte estensioni che offrono un supporto completo per l'architettura delle applicazioni. Fornisce il rendering lato server, cioè rende sul server un'applicazione Web che normalmente sarebbe solo lato client, quindi invia una pagina completamente renderizzata al client. Impiega anche Flux e Redux ampiamente nello sviluppo di applicazioni web. Infine, c'è React Native, un popolare framework derivato da React, utilizzato per creare applicazioni mobili cross-compatibili.

Data binding unidirezionale

Il data binding unidirezionale di React mantiene tutto modulare e veloce. Un flusso di dati unidirezionale significa che quando uno sviluppatore progetta un'app React, spesso nidifica i componenti child all'interno dei componenti parent. In questo modo, uno sviluppatore sa dove e quando si verifica un errore, dandogli un migliore controllo dell'intera applicazione web.

Altri framework front-end con cui lavoro

React non è l'unico framework front-end con cui lavoro quando sviluppo applicazioni web