React (web framework)

React (noto anche come React.js o ReactJS) è un web framework open-source, front-end, JavaScript per la creazione di interfacce utente. È mantenuto da Meta (già Facebook) e da una comunità di singoli sviluppatori e aziende.

React può essere utilizzato come base nello sviluppo di applicazioni a pagina singola ma è utilizzabile anche su mobile tramite React Native, una libreria sempre sviluppata da Meta che tramuta i componenti React in componenti nativi (iOS e Android). Tuttavia, React si occupa solo del rendering dei dati sul DOM, pertanto la creazione di applicazioni React richiede generalmente l'uso di librerie aggiuntive per lo state management e il routing. Redux e React Router sono i rispettivi esempi di tali librerie. A questo fine è possibile utilizzare anche dei framework terzi, come ad esempio Next.js.

Utilizzo di base

Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con JSX e JavaScript.

in base al documento HTML di seguito.

La funzione Saluto è un componente React che mostra il famoso "Hello, world" introduttivo.

Componenti

Il codice di React è costituito da entità denominate componenti. I componenti possono essere sottoposti a rendering su un particolare elemento nel DOM usando la libreria React DOM. Quando si esegue il rendering di un componente, si possono passare valori noti come "props":

I due modi principali per dichiarare i componenti in React sono tramite componenti funzionali e componenti basati su classi.

Componenti funzionali

I componenti funzionali vengono dichiarati con una funzione che quindi restituisce alcuni JSX.

Componenti basati su classi

I componenti basati su classi vengono dichiarati utilizzando le classi ES6. Sono anche noti come componenti "stateful", perché il loro stato può contenere valori in tutto il componente e può essere passato ai componenti figlio tramite props:

DOM virtuale

Un'altra caratteristica notevole è l'uso di un Document Object Model (DOM) virtuale. React crea una cache della struttura dati in-memory, calcola le differenze risultanti e quindi aggiorna in modo efficiente il DOM visualizzato dal browser. Ciò consente al programmatore di scrivere codice come se l'intera pagina fosse renderizzata su ogni modifica, mentre le librerie React eseguono il rendering solo dei sottocomponenti che cambiano effettivamente.

Metodi del ciclo di vita

I metodi del ciclo di vita sono hook che consentono l'esecuzione di codice in punti prestabiliti durante la vita di un componente.

shouldComponentUpdate consente allo sviluppatore di impedire il rendering non necessario di un componente restituendo false se non è richiesto un rendering.

componentDidMount viene chiamato una volta che il componente è "montato" (il componente è stato creato nell'interfaccia utente, spesso associandolo a un nodo DOM). Questo è comunemente usato per attivare il caricamento dei dati da una fonte remota tramite un'API.

componentWillUnmount viene chiamato immediatamente prima che il componente venga demolito o "smontato". Questo è comunemente usato per cancellare dipendenze che richiedono risorse al componente che non saranno semplicemente rimosse con lo smontaggio del componente (ad esempio, la rimozione di qualsiasi istanza setInterval() che è correlata al componente o un "eventListener" impostato sul "documento" a causa della presenza del componente).

render è il metodo di ciclo di vita più importante e l'unico richiesto in qualsiasi componente. Di solito viene chiamato ogni volta che viene aggiornato lo stato del componente, che dovrebbe riflettersi nell'interfaccia utente.

JSX

JSX, o JavaScript XML, è un'estensione della sintassi del linguaggio JavaScript. Simile nell'aspetto all'HTML, JSX fornisce un modo per strutturare il rendering dei componenti usando una sintassi familiare a molti sviluppatori. I componenti di React sono in genere scritti usando JSX, sebbene non debbano esserlo (i componenti possono anche essere scritti in puro JavaScript). JSX è simile a un'altra sintassi di estensione creata da Facebook per PHP chiamata XHP.

Un esempio di codice JSX:

Elementi nidificati

Elementi multipli sullo stesso livello devono essere racchiusi in un singolo elemento contenitore come l'elemento <div> mostrato sopra o restituiti come matrice.

Attributi

JSX offre una gamma di attributi di elemento progettati per rispecchiare quelli forniti da HTML. Possono essere passati al componente anche attributi personalizzati. Tutti gli attributi verranno ricevuti dal componente come props.

Espressioni JavaScript

Le espressioni JavaScript (ma non le istruzioni) possono essere utilizzate all'interno di JSX con parentesi graffe {}:

L'esempio sopra verrà così visualizzato:

Dichiarazioni condizionali

Le istruzioni if-else non possono essere utilizzate all'interno di JSX ma è possibile utilizzare espressioni condizionali. L'esempio seguente mostrerà { i === 1 ? 'true' : 'false' } come stringa 'true' perché i è uguale a 1.

Quanto sopra renderà:

Le funzioni e JSX possono essere utilizzate nei condizionali:

Quanto sopra renderà:

Il codice scritto in JSX richiede la conversione con uno strumento come <i>Babel</i> prima di poter essere compreso dai browser web. Questa elaborazione viene generalmente effettuata nel corso del processo di costruzione del software, prima che l'applicazione venga distribuita.

Architettura oltre HTML

L'architettura di base di React si applica oltre al rendering HTML nel browser. Ad esempio, Facebook ha grafici dinamici che eseguono il rendering in tag <canvas> e Netflix e PayPal utilizzano il caricamento universale per eseguire il rendering di HTML identico sia sul server che sul client.