Il settore del web development ha visto una crescita costante negli ultimi anni e, di pari passo con questa crescita, emergono sempre nuove tecnologie che permettono agli sviluppatori di creare siti e applicazioni web di facile utilizzo.
Nel corso degli anni, i linguaggi di programmazione web hanno prodotto nuove funzionalità, sono stati utilizzati altri linguaggi di programmazione per la creazione di tecnologie web e sono stati creati framework e librerie sulle strutture delle tecnologie esistenti.
In questo tutorial parleremo di React, la più popolare libreria JavaScript basata su componenti utilizzata per creare interfacce utente. Sebbene questo tutorial sia assolutamente adatto ai principianti, può servire anche come guida di riferimento per gli sviluppatori React più esperti.
Parleremo delle caratteristiche di React, dei pro e dei contro, del perché utilizzarlo e di come installare e usare React. Scopriremo anche alcune delle funzionalità principali di React con esempi pratici di codice.
Alla fine di questo tutorial, dovreste avere un’idea più chiara di cos’è e come funziona React ed essere in grado di utilizzarlo per realizzare fantastici progetti.
Cos’è React?
React.js, normalmente chiamato semplicemente React, è una libreria JavaScript utilizzata per creare interfacce utente. Ogni applicazione web React è composta da componenti riutilizzabili che costituiscono parti dell’interfaccia utente: possiamo avere un componente separato per la nostra barra di navigazione, uno per il footer, un altro per il contenuto principale e così via. Si comprenderà meglio questo aspetto quando arriveremo alla sezione in cui dovremo lavorare con i componenti.
Avere questi componenti riutilizzabili facilita lo sviluppo perché non dobbiamo ripetere il codice. Dobbiamo solo creare la sua logica e importare il componente dove è necessario.
React è anche un’applicazione a pagina singola. Quindi, invece di inviare una richiesta al server ogni volta che una nuova pagina deve essere renderizzata, il contenuto della pagina viene caricato direttamente dai componenti React. Questo porta a un rendering più veloce senza ricaricare la pagina.
Nella maggior parte dei casi, la sintassi utilizzata per la creazione di applicazioni React è chiamata JSX (JavaScript XML), che è un’estensione della sintassi di JavaScript. Questo ci permette di combinare la logica JavaScript e la logica dell’interfaccia utente in un modo unico. Con JSX, non è necesario interagire con il DOM utilizzando metodi come document.getElementById, querySelector e altri metodi di manipolazione del DOM.
Anche se utilizzare JSX non è obbligatorio, rende più semplice lo sviluppo di applicazioni React.
Ecco un esempio di JSX in React:
function App() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}Nel codice qui sopra, abbiamo utilizzato un componente funzionale React per rendere un testo nel browser. Il nome del componente è App. Abbiamo creato una variabile prima della funzione render().
Abbiamo poi passato questa variabile al markup utilizzando le parentesi graffe. Non si tratta di HTML ma della sintassi per scrivere codice JSX.
Nella prossima sezione analizzeremo alcuni dei motivi per cui utilizzare React.
Perché React?
Molti sviluppatori e molte organizzazioni hanno preferito React ad altre librerie/framework; ecco perché:
- Facile da imparare: React è facile da comprendere e imparare, a patto che abbiate una buona conoscenza dei prerequisiti. React dispone di una solida documentazione e di molte risorse online gratuite create da altri sviluppatori della attivissima community di React.
- Componenti riutilizzabili: Ogni componente di React ha una propria logica che può essere riutilizzata in qualsiasi punto dell’applicazione. Questo riduce la necessità di riscrivere più volte lo stesso blocco di codice.
- Opportunità di lavoro: Tra le competenze richieste in molte opportunità di lavoro nel front-end development c’è spesso React. Quindi, conoscere React aumenterà le possibilità di trovare lavoro.
- Migliori prestazioni: Grazie al DOM virtuale di React, il rendering delle pagine può essere eseguito più velocemente. Utilizzando una libreria di routing come React Router, potrete renderizzare pagine diverse senza ricaricare la pagina.
- Ampiamente estendibile: React è una libreria che si limita a renderizzare l’interfaccia utente della vostra applicazione. Spetta allo sviluppatore scegliere con quali strumenti lavorare, come le librerie per il rendering di diverse pagine, le librerie di design e così via.
Chi Usa React?
React è stato utilizzato da molti ingegneri front-end sia in startup che in aziende affermate come Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times e altre ancora.
Anche se tutte le aziende sopra elencate non hanno realizzato l’intero prodotto con React, alcune delle loro pagine sono state costruite con React. Questo grazie alle elevate prestazioni, alla facilità d’uso e alla scalabilità di React.
Casi d’Uso di React
React viene generalmente utilizzato per costruire l’interfaccia utente (frontend) di applicazioni web. Offre un rendering veloce delle pagine e maggiori prestazioni. React può essere utilizzato per realizzare qualsiasi prodotto che giri sul web.
Ecco solo alcune delle cose che si possono costruire con React:
- Applicazioni per lettori musicali
- Applicazioni per i social media
- Applicazioni di chat in tempo reale
- Applicazioni web full-stack
- Applicazioni per l’ecommerce
- Applicazioni per il meteo
- Applicazioni per le liste di cose da fare
Caratteristiche di React
React vanta una quantità di caratteristiche incredibili che continuano a renderlo un’opzione molto apprezzata tra gli sviluppatori.
Ecco alcune delle principali caratteristiche di React:
- JSX: si tratta di un’estensione della sintassi JavaScript che estende le funzionalità di ES6 (ECMAScript 2015). Combina logica e markup JavaScript in un unico componente.
- DOM virtuale: Si tratta di una copia dell’oggetto DOM che aggiorna e renderizza le pagine quando vengono apportate delle modifiche; confronta poi lo stato attuale con il DOM originale per mantenerlo sincronizzato con le modifiche. In questo modo il rendering delle pagine è più veloce.
- Componenti: Le applicazioni React sono composte da diversi componenti riutilizzabili che hanno la loro logica e la loro interfaccia utente. Questo lo rende ottimo per scalare le applicazioni e mantenere alte le prestazioni perché non si duplica il codice come avviene con altri framework.
Pro e Contro di React
React è sicuramente uno strumento popolare per la costruzione delle nostre UI, ma ci sono comunque dei motivi per cui alcuni sviluppatori scelgono di non usarlo.
In questa sezione parleremo dei vantaggi e degli svantaggi di React.
Ecco i pro di React:
- React è facile da comprendere e apprendere.
- React ha una comunità molto attiva dove è possibile contribuire e ricevere aiuto quando serve.
- Ci sono molte opportunità di lavoro per gli sviluppatori React.
- React offre maggiori prestazioni alle app.
Ecco alcuni svantaggi di React:
- I principianti che non hanno una solida conoscenza di JavaScript (soprattutto ES6) potrebbero avere difficoltà a capire React.
- React è privo di alcune funzionalità comuni come la gestione di un singolo stato e il routing; dovrete installare e imparare a usare librerie esterne per avere queste funzionalità.
Iniziare con React
In questa sezione parleremo prima dei prerequisiti di React e poi vedremo come creare un’applicazione React, come creare componenti, come gestire gli eventi e lavorare con gli stati, gli hook e le proprietà in React.
Prerequisiti di React
Prima di utilizzare React, bisogna avere una buona conoscenza ed esperienza di JavaScript. Ecco alcuni degli argomenti di JavaScript che consigliamo di ripassare prima di passare a React:
- Arrow functions
- Rest operator
- Spread operator
- Moduli
- Destrutturazione
- Metodi di array
- Template literals
- Promises
- Keyword
leteconst
La maggior parte di questi argomenti rientra in ES6. Dovreste anche avere esperienza su HTML, dato che il markup costituisce una parte della sintassi JSX.
Come Installare React
Prima di installare React, accertatevi di avere installato Node.js sul vostro computer.
Una volta completata l’installazione, eseguite questo comando nel terminale:
node -vSe tutto è andato per il verso giusto, il comando qui sopra dovrebbe dirvi qual è la versione di Node.js installata sul vostro computer.
Successivamente, eseguiremo un altro comando per installare React.
Per prima cosa, create una cartella o navigate nella posizione in cui volete installare l’applicazione React, quindi eseguite questo comando nel terminale:
npx create-react-app react-kitIl comando precedente installerà React in una cartella chiamata react-kit.
Una volta completata l’installazione, aprite la cartella React appena installata nell’editor di codice che preferite. In questo tutorial utilizzeremo Visual Studio Code. Visual Studio Code è dotato di un terminale integrato. Se intendete utilizzare un terminale diverso, come Git Bash o CMD, andate nella cartella dell’applicazione React ed eseguite questo comando:
npm run startQuesto comando avvia il vostro server di sviluppo. Dopo un po’ di tempo, nel vostro browser dovrebbe essere visualizzata questa pagina su localhost:3000:
Se avete seguito fino a questo punto, allora avete installato la vostra prima applicazione React. Congratulazioni!
Se date un’occhiata alla struttura delle cartelle, vedrete una cartella chiamata public. Questa cartella contiene un file index.html in cui il nostro codice verrà iniettato e servito al browser.
La cartella src è dove risiederanno tutta la logica, lo stile e il markup; è la nostra cartella di sviluppo con il file App.js che funge da componente principale. Il codice contenuto in questo file è quello che vediamo nell’immagine qui sopra.
Aprite il file App.js e apportate alcune modifiche, poi salvate per vedere se le vostre modifiche si riflettono automaticamente nel browser.
Tutto pronto? Ora scriviamo un po’ di codice!
I Componenti in React
In React esistono due tipi principali di componenti: quelli di classe e quelli funzionali. La documentazione di React è attualmente in fase di riscrittura per l’utilizzo degli Hooks, che è una caratteristica dei componenti funzionali. Anche in questo tutorial utilizzeremo i componenti funzionali, poiché sono diventati i componenti più utilizzati nelle app React.
Nella maggior parte dei casi, i componenti restituiscono del codice HTML con un mix di valori dinamici creati con JavaScript. I componenti vengono creati come le funzioni in JavaScript.
Creare un Componente di Classe in React
Vediamo un esempio di componente di classe in React.
Ogni componente di classe deve includere l’istruzione React.Component e l’istruzione render() subclass.
class Student extends React.Component {
constructor() {
super();
this.state = {language: "JavaScript"};
}
render() {
return <p>I am learning {this.state.language} </p>;
}
}Nel componente qui sopra, abbiamo creato una variabile di stato chiamata language con un valore stringa “JavaScript”. Abbiamo poi utilizzato questa variabile nel nostro markup. Questo esempio mostra come sia possibile mescolare JavaScript e HTML senza fare riferimento ad alcun metodo del DOM.
Quando questo viene visualizzato dal browser, vedremo la scritta “Sto imparando JavaScript” sulla pagina.
Creare un Componente Funzionale in React
In questa sezione ricreeremo l’esempio della sezione precedente utilizzando un componente funzionale.
Aggiungete questa funzione al vostro file:
function Student() {
const language = "JavaScript";
return (
<div>
<p>I am learning { language } </p>
</div>
);
}Il nome del nostro componente è lo stesso: Student. Fate iniziare sempre il nome dei vostri componenti con una lettera maiuscola. Anche questa variabile è stata passata nel markup come abbiamo fatto nella sezione precedente senza manipolare il DOM con i metodi DOM di JavaScript.
Anche questo componente ha una variabile Student che è stata renderizzata, ma man mano che procediamo nel tutorial, utilizzeremo un hook chiamato useState per creare le nostre variabili di stato.
La Gestione gli Eventi in React
Gli eventi utilizzati in React sono del tutto simili a quelli che utilizziamo in HTML. L’unica differenza è che gli eventi di React sono scritti con la sintassi camelCase. Quindi “onclick” sarebbe “onClick” in React, “onchange” sarebbe “onChange” e così via.
Quando si passa un evento come attributo in un tag HTML, si usano le parentesi graffe: onClick={changeName} invece delle virgolette onClick="changeName"
Ecco un esempio (nel file App.js ):
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;Nel codice qui sopra, abbiamo creato una funzione che segnala un messaggio nel browser. Abbiamo anche creato un pulsante che richiama questa funzione quando viene cliccato. Il gestore di eventi utilizzato è onClick.
Noterete che il nome della funzione è racchiuso tra parentesi graffe e non tra virgolette. Questo è il modo per inserire valori dinamici come i nomi delle variabili e delle funzioni nel markup quando si utilizza JSX.
Inoltre, invece di usare “class” come faremmo con l’HTML, usiamo “className”. Questo perché “classe” è una parola riservata in JavaScript.
Nell’ultima riga abbiamo esportato il nostro componente. Questo ci permette di importarlo in altri componenti.
Lavorare con gli Stati in React
Per gestire lo stato della nostra applicazione in React, utilizziamo un hook chiamato useState. Gli hook ci permettono di accedere ad altre funzionalità di React senza scrivere una classe.
Con gli hook possiamo gestire lo stato del nostro componente e persino eseguire determinati effetti quando le variabili di stato vengono rese per la prima volta o modificate.
Senza l’hook useState in un componente funzionale, qualsiasi modifica apportata alle nostre variabili di stato non si rifletterà sul DOM e quindi lo stato rimarrà invariato.
Vediamo un esempio.
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;Ora diamo un’occhiata a quello che abbiamo appena fatto.
Per prima cosa abbiamo importato l’hook useState da React. Abbiamo poi creato una variabile di stato chiamata name e una funzione – setName – che verrà utilizzata per aggiornare il valore della variabile name. Il valore iniziale della variabile name è memorizzato nell’hook useState, ad es. “John”.
Successivamente, abbiamo creato una funzione chiamata changeName, che utilizza la funzione setName per aggiornare il valore della variabile name.
Nel nostro markup, una volta cliccato sul pulsante, “John” viene cambiato in “James”.
Nella prossima sezione vedremo come utilizzare un altro hook in React.
Lavorare con gli Hook in React
Nella sezione precedente abbiamo visto come gestire lo stato della nostra applicazione utilizzando l’hook useState. In questa sezione vedremo come utilizzare l’hook useEffect.
L’hook useEffect esegue un effetto ogni volta che si verifica un cambiamento in uno stato. Di default, questo hook viene eseguito al primo rendering e ogni volta che lo stato viene aggiornato, ma possiamo configurare e collegare un effetto a una rispettiva variabile di stato.
Vediamo alcuni esempi:
import { useState, useEffect } from "react";
function App() {
const [day, setDay] = useState(1);
useEffect(() => {
console.log(`You are in day ${day} of the year`);
});
return (
<div>
<button onClick={() => setDay(day + 1)}>Click to increase day</button>
</div>
);
}
export default App;La prima cosa da fare è importare l’hook useEffect.
Ogni volta che clicchiamo sul pulsante, la variabile name viene incrementata di uno; questa variazione del valore di name fa sì che l’hook useEffect registri un messaggio nella console, il che avviene ogni volta che la variabile name cambia.
Nella prossima sezione parleremo delle Props e del flusso di dati tra i componenti.
Lavorare con le Props in React
Le Props ci permettono di passare i dati da un componente all’altro. In questo modo il flusso di dati nella nostra applicazione diventa dinamico e manutenibile. Props è l’abbreviazione di properties.
Vediamo un esempio di come usare le Props.
Ecco come appare il nostro file App.js:
function App() {
return (
<div>
</div>
);
}
export default App;Creiamo un altro componente chiamato Bio.js e aggiungiamo questo codice:
function Bio() {
return (
<div>
<p>My name is John</p>
<p>I am a JavaScript developer</p>
</div>
);
}
export default Bio;Successivamente, importeremo il componente Bio nel nostro componente App in questo modo:
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio/>
</div>
);
}
export default App;La prima riga è quella in cui abbiamo importato il componente Bio. Poi inseriamo il componente tra i tag div nel nostro componente App. Quando visualizzate questo file nel browser, vedrete renderizzato il codice creato nel componente Bio.
Ora avete capito come il codice può essere riutilizzato in React. Ma questo codice è statico: sarà lo stesso in ogni componente in cui viene utilizzato. Questo non è efficiente nei casi in cui vogliamo utilizzare lo stesso componente ma con informazioni diverse.
Risolviamo questo problema utilizzando Props.
Nel componente Bio.js, aggiungete:
function Bio({name, language}) {
return (
<div>
<p>My name is { name }</p>
<p>I am a { language } developer</p>
</div>
);
}
export default Bio;Abbiamo prima destrutturato e passato come parametri name e language. Questi parametri sono stati poi utilizzati dinamicamente nel nostro markup.
Abbiamo esportato il componente nell’ultima riga di codice: export default Bio; per poterlo importare in qualsiasi altro componente che richieda la sua logica.
Al momento, non vediamo alcun valore per la loro visualizzazione. Lo faremo nel componente App; ecco come:
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio name="James" language="Python"/>
</div>
);
}
export default App;Abbiamo aggiunto degli attributi al nostro tag Bio che corrispondono alle props create in precedenza. Qualsiasi valore inserito in questi attributi sarà visualizzato nel browser. Questo è importante per i componenti che verranno utilizzati in più componenti ma che richiedono dati diversi.
Dove Imparare di Più
Questo tutorial ha inteso fornire le conoscenze fondamentali per iniziare a costruire applicazioni web con React, ma non è tutto quello che c’è da sapere su React. Ci sono altre funzionalità necessarie per costruire un’applicazione efficiente con React, come il routing nelle applicazioni che hanno più di una pagina e la gestione di un singolo stato utilizzando strumenti come Redux.
Il posto migliore per iniziare ad approfondire la conoscenza di React è la documentazione di React. Potreste anche dare un’occhiata alla documentazione della beta che è stata riscritta utilizzando gli Hook.
Riepilogo
L’utilizzo di React come libreria frontend ha continuato ad aumentare in modo massiccio rispetto ad altre librerie e framework nella comunità degli sviluppatori e non mostra alcun segno di arresto. React è presente in tutte le roadmap degli sviluppatori web moderni.
Con l’attuale adozione della tecnologia web3 da parte di un numero sempre maggiore di sviluppatori, React è rimasto lo strumento preferito per la creazione del frontend delle applicazioni decentralizzate (DApp).
Con React è possibile realizzare una grande varietà di applicazioni, dalle semplici applicazioni web per le liste di cose da fare ai marketplace, alle dashboard e così via.
React può essere utilizzato con molte tecnologie come Bootstrap, Tailwind CSS, Axios, Redux, Firebase e molte altre. Possiamo anche utilizzare React con Node.js e altri linguaggi backend per costruire applicazioni full-stack e web app che funzionano alla velocità della luce.
