Cos’è React: capire le funzionalità e come utilizzarlo per lo sviluppo web moderno

React è una delle librerie JavaScript più popolari per lo sviluppo di applicazioni mobili e web. Sviluppata da Meta (ex Facebook), React consente agli sviluppatori di creare componenti riutilizzabili per realizzare interfacce utente (UI).

È importante notare che React non è un framework. Questo perché è responsabile solo del rendering dei componenti del livello di visualizzazione di un’applicazione. Tuttavia, React offre un’alternativa a framework come Angular e Vue, consentendo di costruire funzionalità complesse al suo fianco.

Questo articolo spiegherà come funziona React, esplorerà le sue funzionalità e discuterà i vantaggi dell’uso di React.js per gli sviluppatori front-end. Inoltre, confronteremo React.js e React Native, discutendo le loro funzioni di sviluppo di applicazioni web e mobile.

Inoltre, ti guideremo nell’implementazione di un’applicazione React sul VPS di Hostinger.

Come funziona React?

React introduce JSX, un’estensione della sintassi che combina perfettamente codice JavaScript e HTML. I tag JSX assomigliano a XML, con alcune distinzioni.

Ad esempio, React utilizza className invece del tradizionale attributo class per le classi CSS. I valori numerici e le espressioni sono racchiusi tra parentesi graffe, mentre le virgolette indicano le stringhe, come in JavaScript.

Di seguito è riportato un esempio di frammento di codice React:

<MyCounter count={3 + 5} />;

const GameScores = { player1: 2, player2: 5 };

<DashboardUnit data-index="2">

<h1>Scores</h1>

<Scoreboard className="results" scores={GameScores} />

</DashboardUnit>;

Ecco una sintesi dello snippet di codice React di cui sopra:

• <MyCounter count={3 + 5} />; – questa riga rende un componente React MyCounter con il prop. count impostato a 8.
• const GameScores = { player1: 2, player2: 5 }; – questo codice crea un oggetto, GameScores, con i punteggi dei giocatori.
• <DashboardUnit data-index= “2“> – rende un componente DashboardUnit con l’attributo data-index impostato a 2.
• <h1>Scores</h1> – questa riga rende un elemento di intestazione <h1> con il testo Scores.
• <Scoreboard className=”results” scores={GameScores} /> – rende un componente Tabellone con una classe CSS e i punteggi delle partite passati come attributi.

React sfrutta anche il DOM virtuale per ottimizzare le prestazioni, riducendo al minimo la manipolazione diretta del DOM. Calcola le differenze tra il DOM virtuale attuale e quello precedente quando si verificano cambiamenti, aggiornando in modo efficiente il DOM reale.

const element = <h1>Hello, world!</h1>;

ReactDOM.render(element, document.getElementById('root'));

Il frammento di codice sopra riportato può essere spiegato come segue:

• const element = <h1>Hello, world!</h1>; – questa riga crea una variabile chiamata element e le assegna un elemento JSX. In questo caso, un elemento <h1> contenente il testo Hello, world!.
• ReactDOM.render(element, document.getElementById(‘root’)); – questo codice utilizza il metodo render per aggiornare un elemento JSX nel DOM reale. In questo caso, rende l’elemento JSX nell’elemento HTML con l’ID root.

Perché usare React?

Centinaia di grandi aziende in tutto il mondo, come Netflix, Airbnb e American Express, utilizzano React per realizzare le loro applicazioni web. In questa sezione discuteremo i motivi per cui molti sviluppatori scelgono React rispetto alle sue controparti.

1. Facile da usare

Gli sviluppatori web con conoscenze di JavaScript possono imparare a usare React rapidamente, poiché si basa su JavaScript semplice e segue un approccio basato sui componenti. Con esso è possibile sviluppare applicazioni basate sul web.

Se hai bisogno di acquisire maggiore familiarità con JavaScript, molti siti web offrono lezioni di programmazione gratuite. Una volta conosciute le basi di JavaScript, informati su React per semplificare il processo di sviluppo front-end.

2. Supporta i componenti riutilizzabili

React consente di riutilizzare i componenti sviluppati per altre applicazioni. Pertanto, è possibile precostruire i componenti React per ridurre significativamente i tempi di sviluppo di applicazioni web complesse.

Inoltre, React consente di annidare componenti all’interno di altri per creare funzioni complesse senza gonfiare il codice. Ogni componente di React ha i suoi controlli, il che rende la manutenzione semplice.

3. Scrittura dei componenti più semplice

React consente di combinare oggetti JavaScript con la sintassi e i tag HTML. È anche possibile scrivere componenti e aggiungere React a una pagina HTML esistente con l’integrazione JSX. JSX semplifica il rendering multifunzione, mantenendo il codice conciso senza limitare le capacità dell’applicazione.

Anche se JSX non è l’estensione sintattica più utilizzata, ha dimostrato di essere efficiente nello sviluppo di componenti speciali e applicazioni dinamiche.

Lo strumento ufficiale dell’interfaccia a riga di comando (CLI) di React, chiamato Create React App, semplifica ulteriormente lo sviluppo di applicazioni a pagina singola. È dotato di un moderno processo di configurazione della build con strumenti preconfigurati che sono eccellenti per l’apprendimento di React.

4. Prestazioni elevate

Il Virtual Document Object Model consente a React di aggiornare l’albero DOM in modo efficiente. Memorizzando il DOM virtuale in memoria, React elimina l’eccessivo re-rendering che potrebbe danneggiare le prestazioni.

Inoltre, il data binding unidirezionale di React tra gli elementi semplifica il processo di debug. Qualsiasi modifica ai componenti figli non influisce sulla struttura madre, riducendo il rischio di errori.

5. Ottimizzato per la SEO

React può migliorare l’ottimizzazione per i motori di ricerca (SEO) delle applicazioni web, aumentando le prestazioni e riducendo il tempo di caricamento del codice JavaScript. L’implementazione del DOM virtuale contribuisce ad aumentare la velocità delle pagine.

Inoltre, aiuta i motori di ricerca a navigare nelle applicazioni web, consentendo il rendering lato server. Questo tipo di rendering affronta una delle sfide più importanti per i siti web che utilizzano JavaScript, in quanto i motori di ricerca li trovano difficili e lunghi da scansionare.

Funzionalità di React

Le caratteristiche e le funzionalità di React.js lo distinguono dalle altre librerie JavaScript. Le sezioni seguenti introdurranno queste caratteristiche e spiegheranno il loro contributo allo sviluppo di applicazioni mobile e web.

1. JSX

JSX è un’estensione della sintassi JavaScript utilizzata in React per la creazione di elementi. Gli sviluppatori la utilizzano per incorporare codice HTML all’interno di oggetti JavaScript. JSX può incorporare funzioni ed espressioni JavaScript, semplificando strutture di codice complesse.

Vediamo un esempio di incorporazione di un’espressione in JSX:

const name = 'John Smith';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render(

element,

document.getElementById('root')

);

Nella seconda riga, la variabile name è incorporata con le parentesi graffe. Ciò consente di includere contenuti dinamici nel JSX. Nel frattempo, la funzione ReactDOM.render(), che definisce l’interfaccia utente, rende l’elemento React sull’albero DOM.

JSX aiuta anche a mitigare gli attacchi Cross-Site Scripting (XSS). Per impostazione predefinita, React DOM converte i valori incorporati in JSX in stringhe prima di renderli. Di conseguenza, terze parti non possono iniettare codice aggiuntivo attraverso l’input dell’utente, a meno che non sia esplicitamente specificato nell’applicazione.

2. DOM virtuale

Il Document Object Model (DOM) rappresenta una pagina web come un albero di dati strutturato. React memorizza gli alberi DOM virtuali in memoria, consentendo di aggiornare in modo efficiente parti specifiche dell’albero dei dati in modo più rapido rispetto al rendering dell’intero albero DOM.

Ogni volta che i dati vengono modificati, React genera un nuovo albero del DOM virtuale e lo confronta con quello precedente per determinare il modo più efficiente di implementare le modifiche nel DOM reale. Questo processo è noto come diffing.

Garantire che la manipolazione dell’interfaccia utente influisca solo su sezioni specifiche dell’albero DOM reale rende la versione aggiornata più veloce e consuma meno risorse. Questa pratica è molto utile per i progetti di grandi dimensioni che prevedono un’intensa interazione con l’utente.

3. Componenti e oggetti di scena

React divide l’interfaccia utente in pezzi di codice isolati e riutilizzabili, chiamati componenti. I componenti React sono la base per la creazione di interfacce utente. Funzionano in modo simile alle funzioni JavaScript, accettando input arbitrari noti come proprietà od oggetti di scena.

Gli elementi React restituiti, generati quando si esegue il rendering di componenti React interattivi, sono fondamentali per definire il modo in cui l’interfaccia utente apparirà sul client. Ecco un esempio di componente React:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

I componenti interattivi, siano essi componenti di classe o di funzione, ricevono i dati attraverso le proprietà o gli oggetti di scena del componente padre. React supporta anche i componenti asincroni, consentendo un efficiente fetching e rendering dei dati.

È possibile avere tutti i componenti React necessari senza appesantire il codice.

4. Gestione dello stato

Uno stato è un oggetto JavaScript che contiene i dati di un componente React. Questo stato può cambiare quando un utente interagisce con l’applicazione, restituendo una nuova interfaccia utente che riflette queste modifiche.

La gestione degli stati può essere gestita all’interno di React stesso od opzionalmente attraverso librerie di terze parti. Esse facilitano la gestione di dati più complessi e attivano il processo di re-rendering ogni volta che i dati cambiano.

Due delle librerie di gestione degli stati più popolari sono Redux e Recoil.

Redux

La libreria di gestione degli stati di Redux offre un archivio centralizzato che mantiene l’albero degli stati di un’applicazione, garantendo la prevedibilità. L’architettura di Redux supporta la registrazione degli errori per facilitare il debug e segue un metodo rigoroso di organizzazione del codice.

Tuttavia, Redux può essere complesso e potrebbe non essere la scelta migliore per le piccole applicazioni con una sola fonte di dati.

Recoil

Recoil impiega funzioni pure chiamate selettori per calcolare i dati da unità aggiornabili dello stato, note come atomi. Più componenti possono sottoscrivere lo stesso atomo, consentendo loro di condividere uno stato.

Questo approccio evita stati ridondanti, semplifica il codice ed elimina l’eccessiva rilettura di React e dei suoi componenti figli. Recoil è spesso considerato più adatto ai principianti di Redux, grazie ai suoi concetti fondamentali più semplici.

5. Navigazione programmatica

La navigazione programmatica si riferisce a situazioni in cui le righe di codice attivano azioni che reindirizzano gli utenti. Ad esempio, quando gli utenti eseguono azioni di login o di iscrizione, la navigazione programmatica li porta alle pagine pertinenti.

React Router, la libreria standard di React per il routing, offre diversi modi per ottenere una navigazione programmatica sicura tra i componenti senza richiedere agli utenti di cliccare sui link.

Il metodo principale di navigazione programmatica è l’uso di un componente Redirect, ma si può anche utilizzare history.push() come alternativa.

In breve, il pacchetto React Router sincronizza l’interfaccia utente con l’URL, garantendo il controllo sull’aspetto delle applicazioni React senza affidarsi esclusivamente ai clic sui link avviati dall’utente.

Capire React Native

React Native è un framework JavaScript open-source costruito sulla libreria React. Gli sviluppatori lo utilizzano per creare applicazioni React multipiattaforma per iOS e Android, fornendo un’esperienza senza soluzione di continuità per le interfacce utente native.

React Native sfrutta le interfacce di programmazione delle applicazioni (API) native per eseguire il rendering dei componenti dell’interfaccia utente mobile in Objective-C (iOS) o Java (Android). Questo approccio consente agli sviluppatori di creare componenti specifici per la piattaforma e di condividere il codice sorgente su più piattaforme.

Nonostante le somiglianze, React Native si differenzia da React.js. Ecco un rapido confronto tra React.js e React Native:

Aspetto	React.js	React Native
Piattaforma	Applicazioni web	Applicazioni mobile (iOS, Android, ecc.)
Rendering	Basato su DOM	Componenti nativi
Lingua	JavaScript	JavaScript
Approccio allo sviluppo	Applicazioni a pagina singola	Applicazioni mobile multipiattaforma
Componenti dell’interfaccia utente	HTML, CSS e componenti React	Componenti nativi e componenti React
Navigazione	Navigazione basata su browser	Navigazione nativa
Plugin di terze parti	Estensioni, plugin e librerie specifiche per il web	Plugin e librerie native per dispositivi mobile
Prestazioni	Prestazioni web	Prestazioni di livello nativo
Esperienza utente	Interfaccia utente basata sul web	Aspetto nativo

Come usare React?

L’implementazione dello sviluppo web con React comporta vari passaggi e best practice per garantire un codice efficiente e gestibile. Segui questi passaggi per iniziare a lavorare con React:

1. Controlla l’installazione di Node.js e npm

Prima di lavorare con React, installa Node.js e npm (Node Package Manager) sul tuo sistema. Puoi verificare la loro installazione eseguendo i seguenti comandi nel tuo terminale:

node -v

npm -v

Se Node.js e npm non sono installati, è possibile scaricarli e installarli dal sito ufficiale di Node.js.

2. Crea un’applicazione React

React offre un comodo strumento chiamato Create React App che semplifica la configurazione del progetto. Per creare una nuova applicazione React, esegui il seguente comando:

npx create-react-app my-react-app

Sostituisci my-react-app con il nome dell’applicazione desiderata. Questo comando crea un nuovo progetto React con i file e le dipendenze necessarie.

3. Naviga nella directory del progetto

Accedi alla directory del progetto con il seguente comando:

cd my-react-app

4. Avvia il server di sviluppo

Avvia il server di sviluppo per vedere la tua applicazione React in azione:

npm start

Questo comando avvia il server di sviluppo, rendendo accessibile la tua applicazione React all’indirizzo http://localhost:3000. Il server di sviluppo offre anche il ricaricamento dal vivo, consentendo di osservare le modifiche in tempo reale mentre si modifica il codice.

5. Esplora la struttura del progetto

Esplora la struttura del progetto creata da Create React App. Le directory principali includono:

• src – questa cartella contiene il codice sorgente dell’applicazione.
• public – questa cartella include le risorse statiche e il modello HTML dell’applicazione.

6. Crea il primo componente React

Apri la cartella src e naviga fino al file App.js. Questo file è il punto di ingresso della tua applicazione React. Modifica il contenuto di questo file per creare il primo componente React.

Ecco un esempio di base di un componente funzionale:

import React from 'react';

function App() {

return (

<div>

<h1>Hello, React!</h1>

</div>

);

}

export default App;

7. Rendering del componente

I componenti React ricevono i dati e determinano cosa deve apparire sul lato client. Per visualizzare il componente, eseguine il rendering nel file src/index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

8. Inizia a creare l’applicazione

Con il primo componente React pronto, puoi continuare a creare la tua applicazione React. Crea altri componenti, gestisci le interazioni con gli utenti e gestisci gli stati man mano che il tuo progetto si evolve.

Come distribuire un’applicazione React su Hostinger?

Per rendere la tua applicazione React accessibile agli utenti sul web, devi distribuirla su un server. Il VPS server hosting di Hostinger è dotato di accesso root completo, un File Manager completo e un assistente AI. È anche facilmente espandibile, il che lo rende una scelta eccellente per ospitare i tuo progetti React.

L’esercitazione che segue mostra come distribuire un’applicazione React su Hostinger con un sistema operativo Ubuntu 22.04 a 64 bit:

1. Assicurati che la tua applicazione React sia pronta per la produzione creando una build di produzione. Naviga nella cartella del progetto che contiene l’applicazione React ed esegui il seguente comando:
   npm run build
2. Accedi al tuo VPS Hostinger utilizzando SSH. Apri il terminale e digita il seguente comando, sostituendo your_server_ip con il tuo server IP effettivo:
   ssh root@your_server_ip
3. Quindi, assicurati che il tuo VPS sia aggiornato eseguendo questi comandi:
   sudo apt update
   sudo apt upgrade
4. Carica il contenuto della cartella di build sul VPS. Sostituisci path/to/your/app con il percorso locale della cartella di build e your-username@your-server-ip:/path/to/destination con il percorso remoto appropriato sul VPS.
   scp -r path/to/your/app your-username@your-server-ip:/path/to/destination
5. Installa Node.js e NGINX sul VPS utilizzando il comando seguente. Si noti che questa azione rimuoverà anche Apache2, se è installato.
   sudo apt-get purge apache2*
   curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
   sudo bash nodesource_setup.sh
   sudo apt install -y nodejs nginx
6. Crea un file di configurazione NGINX per la tua applicazione. Assicurati di sostituire your-app con un nome unico e descrittivo:
   sudo nano /etc/nginx/sites-available/your-app
7. Aggiungi la seguente configurazione, sostituendo your-domain-or-ip con il nome del dominio o l’indirizzo IP effettivo e your-port con la porta su cui gira l’applicazione:
   server {
   listen 80;
   server_name your-domain-or-ip;
   location / {
   proxy_pass http://127.0.0.1:your-port;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection ‘upgrade’;
   proxy_set_header Host $host;
   proxy_cache_bypass $http_upgrade;
   }
   }
8. Salva e chiudi il file. Quindi, crea un collegamento simbolico per abilitare la configurazione:
   sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/
9. Verifica che la configurazione di NGINX non presenti errori di sintassi con il seguente comando:
   sudo nginx -t
10. Se non ci sono errori, riavvia NGINX:
    sudo service nginx restart

La tua applicazione React è ora attiva e accessibile attraverso il tuo nome di dominio o indirizzo IP VPS.

Conclusioni

React è una robusta libreria JavaScript che consente agli sviluppatori web di creare applicazioni web dinamiche ed efficienti. Semplifica la codifica di JavaScript e migliora le prestazioni, rendendola la scelta migliore per lo sviluppo front-end.

Ecco un riepilogo dei motivi per cui dovresti considerare l’uso di React per creare applicazioni web ad alte prestazioni:

• La semplicità di React e l’abbondanza di risorse di programmazione online lo rendono accessibile agli sviluppatori di tutti i livelli.
• React supporta la riutilizzabilità dei componenti, riducendo in modo significativo i tempi e gli sforzi di sviluppo.
• JSX facilita la codifica e il rendering degli elementi, migliorando la leggibilità e la manutenibilità del codice.
• Il DOM virtuale di React elimina i re-rendering non necessari, assicurando che l’applicazione funzioni in modo fluido ed efficiente.
• React utilizza il rendering lato server che migliora il tempo di caricamento delle pagine delle applicazioni web, con un impatto positivo sulla SEO.

React ha beneficiato di continui miglioramenti da parte del team React. Si integra perfettamente con diverse tecnologie, tra cui Bootstrap, Tailwind CSS, Axios, Redux e Firebase. Anche il deploy di un’applicazione React su un VPS è semplice con l’assistenza di Node.js e NGINX.

Se hai domande o approfondimenti su React, non esitare a lasciarli nella sezione commenti qui sotto.

FAQ su che cos’è React

Questa sezione risponde alle domande più comuni su React.