Introduzione a React
di 
Umberto Di Lorenzo, in React,
React è senza dubbio una delle librerie più importanti per quanto riguarda lo sviluppo di applicazioni web interamente basato su JavaScript, HTML e CSS. Questa libreria è veloce, affidabile e gode di una community molto attiva che fornisce supporto e componenti sempre più potenti per semplificarne al massimo l'utilizzo. In questo articolo parleremo di cosa è React e di come creare un'applicazione da zero utilizzando questa libreria.
Prerequisiti
Per comprendere l'articolo è sufficiente una buona conoscenza di JavaScript e della sintassi ES6. Per eseguire gli esempi sarà necessario aver installato un ambiente NodeJS.
Cos'è React?
React è una libreria JavaScript per creare interfacce utente. A differenza di framework più completi come Angular e Vue, React si preoccupa solo del layer di presentazione, questo significa che sono necessarie ulteriori librerie per gestire altri aspetti di un'applicazione frontend, come autenticazione, routing, data-flow, etc.
Colgo subito l'occasione per rispondere ad una delle domande purtroppo più frequenti nel mondo dei programmatori frontend: è meglio utilizzare Angular o React? La risposta è: entrambi. Entrambi hanno portato la progettazione di software client-side a un livello più elevato, entrambi fanno la loro parte, pur coprendo problematiche diverse: React da solo non è sufficiente a garantire lo sviluppo per intero di un'applicazione frontend molto complessa, per cui la scelta può cadere sull'utilizzare Angular o sull'integrare React con altre librerie. D'altra parte, pensare di mettere su un'infrastruttura basata su Angular per il solo sviluppo di un layer di presentazione può avere degli inutili costi di overhead. Questo in via generica, gran parte della scelta è anche demandata ai gusti personali di ciascuno.
Tolto il dente, andiamo avanti: in questo articolo ci concentreremo esclusivamente su quello che React può fare da solo.
Il Virtual DOM
Prima di proseguire, è necessario introdurre il concetto di Virtual DOM. Chi ha familiarità con jQuery saprà che si tratta di una libreria in grado di manipolare il DOM di una pagina web in maniera diretta. Questo in molti casi non genera particolari problemi, ma in altri, come nel caso di un'applicazione altamente interattiva o che gestisca grosse moli di dati, l'effetto negativo sulle performance si sente eccome.
Per ovviare a questi problemi, molti framework e librerie moderne, incluso React, applicano il concetto di Virtual DOM per gestire il rendering della pagina. A differenza del DOM HTML, il Virtual DOM è molto più semplice da manipolare e può gestire numerose operazioni in pochi millisecondi senza effetti consistenti sulle prestazioni. React confronta periodicamente il DOM virtuale con il DOM reale ed effettua un'operazione di diff che applica al DOM reale per renderlo identico al DOM virtuale. In questo modo React assicura un rendering molto fluido dell'applicazione, evitando problemi di lag per la user experience, aspetto sempre più importanti nello sviluppo di applicazioni lato utente per il web.
Componenti
Creare un'applicazione React significa creare uno o più componenti React che possono interagire l'uno con l'altro. Un componente React è semplicemente una classe JavaScript che implementa un metodo render. Fine, nessuna stregoneria. Il metodo render non fa altro che produrre in output del codice HTML, che può generare usando JavaScript o la sintassi JSX (che vedremo più avanti). Il metodo render è quindi sufficiente per realizzare un componente React, ma a seconda dei casi possono essere necessari ulteriori metodi per implementare funzionalità di gestione dati o metodi di lifecycle.
Creare un semplice progetto React
Do per scontato che abbiate già a disposizione un ambiente NodeJS, in caso contrario tornate al paragrafo relativo ai prerequisiti. Iniziamo quindi con l'installare un tool chiamato create-react-app che ci permetterà di creare il nostro primo progetto React:
npm install -g create-react-app
Navighiamo fino alla directory di root del nostro progetto e lanciamo il comando:
create-react-app my-first-react-project
Questo comando restituisce il seguente output
Success! Created my-first-react-project at /home/umberto/projects/my-first-react-project
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-first-react-project
npm start
Happy hacking!Entriamo quindi nella nuova directory my-first-react-project e apriamo il file package.json
{
"name": "my-first-react-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-scripts": "2.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}Possiamo notare che non sono presenti tutte le dipendenze che ci aspetteremmo di trovare. create-react-app è un fantastico tool che lavora dietro le quinte e separa il codice sorgente del nostro progetto dall'ambiente di sviluppo. Non avremo bisogno, ad esempio, di installare e configurare manualmente Webpack, Create React App lo ha già fatto per noi.
Eliminiamo, nel nostro progetto, tutto il contenuto della directory src, poiché vogliamo iniziare a scrivere il nostro codice React da zero. All'interno della stessa directory creiamo un file index.js e inseriamoci queste righe:
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root')) 
Questo è il più semplice esempio possibile di applicazione React. Il file index.js sarà l'origine del nostro progetto React, vediamo come funziona, nello specifico:
- Linea 1: viene importato il package di React per gestire la sintassi JSX
- Linea 2: viene importato il package ReactDOM per renderizzare i componenti React
- Linea 4: viene chiamato il metodo render di ReactDOM che si aspetta due parametri:
- <h1>Hello World</h1> un elemento JSX
- document.getElementById('root') un elemento HTML che fungerà da container
Il container HTML si trova nel file public/index.html, alla riga 28:
... <div id="root"></div> ...
Tutto ciò che è all'interno di questo container, verrà gestito dal DOM di React.
Sintassi JSX
JSX è un tipo di sintassi che permette di utilizzare, all'interno di file JavaScript, tag come <div>, <form>, <h1>. Somiglia moltissimo alla sintassi HTML, ma ci sono alcune differenze: non è possibile usare l'attributo class, che diventa quindi className, perché è una keyword riservata in JavaScript, inoltre eventi come onclick vengono scritti in camel case e diventano onClick.
Ci sono alcune regole da considerare, quando si utilizza la sintassi JSX: perché JSX funzioni, è necessario wrappare tutti gli elementi in un singolo tag. Ad esempio:
// NON VALIDO const invalidJSX = <em>Hello</em>, <strong>World</strong> // VALIDO const validJSX = <div> <em>Hello</em>, <strong>World</strong> </div>
Inoltre è possibile utilizzare espressioni JavaScript all'interno di JSX, usando le parentesi graffe per l'interpolazione:
const utente = {
nome: 'Umberto',
cognome: 'Di Lorenzo'
}
const element = <div>
<em>Hello</em>, <strong>{utente.nome}</strong>
</div>Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare politiche di resiliency con Azure Container App
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Creare gruppi di client per Event Grid MQTT
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Recuperare App Service cancellati su Azure
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Routing statico e PreRendering in una Blazor Web App
Disabilitare automaticamente un workflow di GitHub
Utilizzare Tailwind CSS all'interno di React: installazione
Sostituire la GitHub Action di login su private registry
Aggiungere interattività lato server in Blazor 8
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Recuperare App Service cancellati su Azure
- Utilizzare la classe Lock per acquisire un lock
- Escludere alcuni file da GitHub Secret Scanning
- Creare una libreria CSS universale - Rotazione degli elementi
- Aggiornare a .NET 9 su Azure App Service
- Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub