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>
2 pagine in totale: 1 2
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

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

Misc