React: la guida definitiva

27 Aprile 2024Tutorial

React è la libreria JavaScript front-end più popolare nel campo dello sviluppo web. React è una libreria JavaScript creata per sviluppare interfacce utente rapide e interattive per applicazioni web e mobile. È una libreria front-end open source, basata su componenti, responsabile solo del livello di visualizzazione dell’applicazione. React ha guadagnato popolarità grazie ad alcune delle sue caratteristiche: può essere utilizzato per lo sviluppo di app Web e mobile, flusso di dati unidirezionale, componenti riutilizzabili, creazione di applicazioni dinamiche e molto altro. In questa guida su React, tratterò tutte queste funzionalità, spiegherò cos’è esattamente React e i vantaggi del suo utilizzo, i suoi componenti, gli stati e altro ancora. Quindi inizia ad imparare, diventa un programmatore React, amplia le tue conoscenze e affina le tue abilità ora.

Cosè React

React è una libreria di sviluppo front end basata su JavaScript. Sebbene React sia una libreria piuttosto che un linguaggio, è ampiamente utilizzato nello sviluppo web. La libreria è apparsa per la prima volta a maggio 2013 ed è ora una delle librerie frontend più comunemente utilizzate per lo sviluppo web. React offre varie estensioni per l’intero supporto dell’architettura dell’applicazione, come Redux, Flux e React Native.

La popolarità di React oggi ha eclissato quella di altri framework di sviluppo front-end. Ecco perchè:

React semplifica la creazione di applicazioni Web dinamiche perché richiede meno sviluppo e offre più funzionalità, al contrario di JavaScript, dove lo sviluppo spesso diventa complesso molto rapidamente.
React utilizza Virtual DOM, creando così applicazioni web più veloci. Virtual DOM confronta gli stati precedenti dei componenti e aggiorna solo gli elementi nel Real DOM che sono stati modificati, invece di aggiornare nuovamente tutti i componenti, come fanno le applicazioni Web convenzionali.
I componenti sono gli elementi costitutivi di qualsiasi applicazione React e una singola app di solito è composta da più componenti. Questi componenti hanno le loro logiche ed i loro controlli e possono essere riutilizzati in tutta l’applicazione, il che a sua volta riduce drasticamente i tempi di sviluppo dell’applicazione stessa.
React segue un flusso di dati unidirezionale. Ciò significa che durante la progettazione di un’applicatione React, gli sviluppatori spesso annidano i componenti figli all’interno dei componenti padre. Poiché i dati fluiscono in un’unica direzione, diventa più facile eseguire il debug degli errori e sapere esattamente dove si verifica un problema.
React è facile da imparare, poiché combina principalmente concetti HTML e JavaScript di base con alcune utili aggiunte. Tuttavia, come nel caso di altri strumenti e framework, è necessario dedicare del tempo per ottenere una comprensione adeguata della libreria di React.
Sappiamo già che React viene utilizzato per lo sviluppo di applicazioni web, ma non è tutto ciò che può fare. Esiste un framework chiamato React Native, derivato dallo stesso React, che è estremamente popolare e viene utilizzato per creare bellissime applicazioni mobile. Quindi, in realtà, React può essere utilizzato per realizzare applicazioni sia web che mobile.
Leggi anche: Sviluppo MVP (Minimum Viable Product): perche ho scelto React Native
Facebook ha rilasciato un’estensione per Chrome che può essere utilizzata per eseguire il debug delle applicazioni React. Ciò rende il processo di debug delle applicazioni Web più rapido e semplice.

I motivi di cui sopra giustificano la popolarità della libreria React e il motivo per cui viene adottata da un gran numero di organizzazioni e aziende. Prima di proseguire con le caratteristiche di React, vediamo un po di codice.

Primo progetto

Ora che ti ho descritto cos’è e perché è cosi popolare React, è il caso di iniziare a vedere concretamente del codice. Scarica ed Installa se non lo hai già NodeJs, per creare il primo progetto utilizzeremo Visual Studio Code e Create React App. Di seguito i comandi da terminale per partire con il primo progetto di un’applicazione React.

npx create-react-app my-app
cd my-app
npm start

Il primo comando installa il pacchetto fornito dagli stessi sviluppatori di Facebook e che consente di avere già tutti gli elementi per un progetto di base, con il secondo comando entriamo nella cartella di progetto e col terzo lanciamo il progetto così da poter visualizzare sul browser l’applicazione.

Caratteristiche di React

React offre alcune caratteristiche eccezionali che la rendono la libreria più adottata per lo sviluppo di app frontend. Ecco l’elenco di queste caratteristiche.

JSX

JSX è un’estensione sintattica JavaScript. È un termine usato in React per descrivere come dovrebbe apparire l’interfaccia utente. Puoi scrivere strutture HTML nello stesso file del codice JavaScript utilizzando JSX. Vediamo una semplice implementazione tramite app.js presente nella cartella src del nostro primo progetto.

import logo from './logo.svg';
import './App.css';

const App = () => {
  const learnReact = 'Learn React';
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {learnReact}
        </a>
      </header>
    </div>
  );
}

export default App;

Il codice sopra mostra come JSX è implementato in React. Non è né una stringa né HTML. Invece, incorpora HTML nel codice JavaScript.

Virtual Document Object Model (DOM)

Il Virtual DOM è la versione leggera di React del Real DOM. La manipolazione DOM reale è sostanzialmente più lenta della manipolazione DOM virtuale. Quando lo stato di un oggetto cambia, Virtual DOM aggiorna solo quell’oggetto nel DOM reale anziché tutti.

Che cos’è il Document Object Model (DOM)?

DOM (Document Object Model) tratta un documento XML o HTML come una struttura ad albero in cui ogni nodo è un oggetto che rappresenta una parte del documento.

In che modo Virtual DOM e React DOM interagiscono tra loro?

Quando lo stato di un oggetto cambia in un’applicazione React, VDOM viene aggiornato. Quindi confronta il suo stato precedente e aggiorna solo quegli oggetti nel DOM reale invece di aggiornare tutti gli oggetti. Questo fa sì che le cose si muovano velocemente, soprattutto se confrontate con altre tecnologie front-end che devono aggiornare ogni oggetto anche se solo un singolo oggetto cambia nell’applicazione web.

Architettura

In un’architettura Model View Controller (MVC), React è la view, responsabile dell’aspetto e della sensazione dell’app. MVC è un modello architettonico che divide il livello dell’applicazione in Model, View e Controller. Il model si riferisce a tutta la logica relativa ai dati; la view viene utilizzata per la logica dell’interfaccia utente dell’applicazione e il controller è un’interfaccia tra il model e la view.

Estensioni

React va oltre il semplice essere una libreria UI; contiene molte estensioni che coprono l’intera architettura dell’applicazione. Aiuta la creazione di app mobile e fornisce il rendering lato server. Flux e Redux, tra le altre cose, possono estendere React.

Data Binding

Poiché React utilizza il data binding unidirezionale, tutte le attività rimangono modulari e veloci. Inoltre, con un flusso di dati unidirezionale è comune annidare i componenti figli all’interno dei componenti principali durante lo sviluppo di un progetto.

Debugging

Poiché esiste un’ampia comunità di sviluppatori, le applicazioni React sono semplici e facili da testare. Facebook fornisce un’estensione del browser chrome che semplifica e velocizza il debug di React. Questa estensione, ad esempio, aggiunge una scheda dedicata nell’opzione degli strumenti per sviluppatori all’interno del browser Web Chrome. La scheda semplifica l’ispezione diretta dei componenti React. Ora che conosci le caratteristiche chiave di React, passiamo alla comprensione dei pilastri importanti di React.

Componenti in React

I componenti sono gli elementi costitutivi che compongono un’applicazione React, rappresentano una parte dell’interfaccia utente. React separa l’interfaccia utente in numerosi componenti, rendendo il debug più accessibile e ogni componente ha il proprio insieme di proprietà e funzioni.

Ecco alcune delle caratteristiche dei componenti

Riutilizzabilità: un componente utilizzato in un’area dell’applicazione può essere riutilizzato in un’altra area. Questo aiuta ad accelerare il processo di sviluppo.
Componenti nidificati: un componente può contenere molti altri componenti.
Metodo di rendering: nella sua forma base, un componente deve definire un metodo di rendering che specifichi come il componente esegue il rendering sul DOM.
Passaggio di parametri: un componente può anche ricevere proprietà (props). Queste sono proprietà passate dal suo genitore per specificare i valori.

Componenti annidati

In React, possiamo annidare i componenti uno dentro l’altro. Questo aiuta a creare interfacce utente più complesse. I componenti nidificati all’interno dei componenti padre sono chiamati componenti figlio. Le parole chiave Import ed Export facilitano l’annidamento dei componenti.

Esporta – Questa parola chiave viene utilizzata per esportare un particolare modulo o file e utilizzarlo in un altro modulo.
Importa – Questa parola chiave viene utilizzata per importare un particolare modulo o file e utilizzarlo nel modulo esistente.

Stati in React

Uno stato è un oggetto che memorizza i valori delle proprietà per quelli attribuiti a un componente che potrebbero cambiare nel tempo.

Uno stato può essere modificato a seguito dell’azione di un utente.
React esegue nuovamente il rendering del componente nel browser ogni volta che lo stato di un oggetto cambia.
La funzione Object() { [codice nativo] } è dove viene creato l’oggetto stato.
È possibile memorizzare più proprietà nell’oggetto stato.
setState() viene utilizzato per modificare il valore dell’oggetto stato.
La funzione setState() unisce in modo superficiale lo stato nuovo e quello precedente.

Uno stato può essere aggiornato dai gestori di eventi, dalle risposte del server o alle modifiche alle prop. Questo viene fatto usando il metodo setState().

setState() accoda tutti gli aggiornamenti effettuati allo stato del componente e indica a React di rieseguire il rendering del componente e dei suoi figli con lo stato aggiornato.

Considera lo scenario in cui si fa clic su un pulsante contatore. Facendo clic sul pulsante, il valore cambia e viene incrementato. Per implementarlo, utilizzerai il metodo setState().

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <p>click counter: {counter}</p>
        <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};

export default App;

Molto semplicemente, al click viene chiemato il metodo setCounter(), il quale incrementa il valore e l’applicazione viene aggiornata di conseguenza.

Props in React

In React, le props sono un tipo di oggetto in cui è memorizzato il valore degli attributi di un tag. La parola “props” implica “proprietà” e la sua funzionalità di lavoro è abbastanza simile agli attributi HTML. Fondamentalmente, questi componenti sono di sola lettura. In React, i dati possono essere passati da un componente a un altro usando queste prop, in modo simile a come vengono passati gli argomenti ad una funzione. All’interno del componente possiamo aggiungere gli attributi chiamati props; tuttavia, non possiamo cambiare o modificare gli oggetti di scena all’interno del componente poiché sono immutabili. Per comprendere meglio, creiamo un’altro file, FirstComponent.js

// FirstComponent.js
import React from "react";
const FirstComponent = (props) => {
  console.log(props);
  return (
    <>
      <p>click counter: {props.counter}</p>
      <button onClick={() => props.setCounter(props.counter + 1)}>Click</button>
    </>
  );
};
export default FirstComponent;
// App.js
import { useState } from "react";
import FirstComponent from "./FirstComponent";
const App = () => {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
        <FirstComponent counter={counter} setCounter={setCounter} />
    </div>
  );
};
export default App;

First component, utilizzando le props comunica con il componente padre ed assolve a tutte le funzioni già previste nell’esempio precedente.

Le props giocano un ruolo molto importante in React. Possiamo utilizzare i dati dinamici all’interno del nostro componente passando l’attributo tramite prop da un componente all’altro. Poiché sono componenti di sola lettura, gli oggetti di scena che stiamo passando dal componente padre non possono essere modificati nel componente figlio in cui sono stati passati i dati.

Effect in React

La parola effect, ‘effetto’ si riferisce a un termine di programmazione funzionale chiamato side effect, “effetto collaterale”. Ma per capire davvero cos’è un side effet, dobbiamo prima capire il concetto di pure function, “funzione pura”. Potresti non saperlo, la maggior parte dei componenti di React sono intesi come pure function. Può essere strano pensare ai componenti di React come funzioni, ma lo sono. Un normale componente della funzione React è dichiarato come una funzione JavaScript:

const MyReactComponent = () => {}

La maggior parte dei componenti React sono pure function, il che significa che ricevono un input e producono un output prevedibile JSX. Gli input per una funzione JavaScript sono gli “argomenti”. Qual è l’input per un componente React, tuttavia? le props!

I side effects non sono prevedibili poiché sono azioni che vengono eseguite dal il “mondo esterno”. Eseguiamo un side effects quando dobbiamo raggiungere l’esterno dei nostri componenti React per fare qualcosa. L’esecuzione di un side effects, tuttavia, non ci darà un risultato prevedibile. Pensa se dovessimo richiedere dati (come i post del blog) da un server che ha fallito e invece dei dati dei nostri post, ci fornisse una risposta con codice di stato 500. Praticamente tutte le applicazioni si basano sui side effects per funzionare in un modo o nell’altro, a parte le applicazioni più semplici. I side effects comuni includono:

Effettuare una richiesta a un’API per i dati da un server back-end
Per interagire con le API del browser (ovvero per utilizzare direttamente il documento o la finestra)
Utilizzo di funzioni temporizzate come setTimeout o setInterval

Questo è il motivo per cui esiste useEffect: per fornire un modo per gestire l’esecuzione di questi side effects in quelli che altrimenti sarebbero componenti React puri.

Vediamo un’esempio:

// FirstComponent.js
import React from "react";
const FirstComponent = (props) => {
  console.log(props);
  return (
    <>
      <p>click counter: {props.counter}</p>
      <button onClick={() => props.setCounter(props.counter + 1)}>Click</button>
    </>
  );
};
export default FirstComponent;
// App.js
import { useState, useEffect } from "react";
import FirstComponent from "./FirstComponent";
const App = () => {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
     console.log('Counter updated!')
  }, [counter])
  return (
    <div className="App">
        <FirstComponent counter={counter} setCounter={setCounter} />
    </div>
  );
};
export default App;

La funzione useEffect accetta due argomenti, di cui il secondo è opzionale, tale funzione viene eseguita una volta al caricamento della pagina. Il secondo argomento permette di restare in ascolto di ogni modifica che avviene un una variabile di stato, nell’esempio sopra, ogni qual volta che la variabile counter viene aggiornata.

React Redux

Il trasferimento di stato tra i componenti è piuttosto disordinato in React poiché è difficile tenere traccia da quale componente provengono i dati. Diventa davvero complicato se gli utenti lavorano con un gran numero di stati all’interno di un’applicazione.

Redux è un contenitore di stato prevedibile per le applicazioni JavaScript. Ti aiuta a scrivere app che si comportano in modo coerente, vengono eseguite in ambienti diversi (client, server e nativi) e sono facili da testare. Redux gestisce lo stato di un’applicazione con un unico oggetto globale chiamato Store.

Principi di Redux

I tre principi Redux più importanti sono:

unico archivio: gli stati dell’intera applicazione sono archiviati in un albero di oggetti all’interno di un singolo archivio. Un singolo albero di stato semplifica il debug o l’ispezione di un’applicazione.
read only: l’unico modo per cambiare lo stato è avviare un’azione, un oggetto che descrive ciò che è accaduto. Questa funzione garantisce che nessun evento possa modificare lo stato. Possono solo esprimere l’intenzione di cambiare lo stato.
Le modifiche vengono apportate con funzioni dedicate: Per specificare in che modo le azioni trasformano l’albero degli stati, è necessario scrivere riduttori, REDUCERS. L’utente può restituire nuovi oggetti di stato invece di mutare lo stato precedente, può iniziare con un singolo reducer e, man mano che l’app cresce, può dividerlo in reducer più piccoli che gestiscono parti specifiche dell’albero dello stato. Poiché i reducer sono solo funzioni, è facile controllare l’ordine in cui vengono chiamati, passare dati aggiuntivi o persino creare reducer riutilizzabili.

Pilastri di Redux

Store

Uno store è un oggetto che contiene l’albero degli stati dell’applicazione. Dovrebbe esserci un solo store in un’app Redux, poiché la composizione avviene a livello di reducer.

getState() restituisce lo stato corrente dello store.

dispatch() invia un’azione. È l’unico modo per aggiornare lo stato dell’applicazione.

subscribe() iscrive un listener di modifiche allo stato.

unsubscribe() è utile quando non vuoi più chiamare il tuo metodo listener quando lo stato cambia.

Action

Un’action è un semplice oggetto che rappresenta l’intenzione di cambiare lo stato. Devono avere una proprietà per indicare il tipo di azione da svolgere.

Le azioni inviano dati dalla tua applicazione al tuo store.
Tutti i dati devono essere eventualmente inviati come azioni.
Le azioni devono avere un campo tipo, che indica il tipo di azione eseguita.

Reducers

I reducer sono funzioni che specificano come cambia lo stato dell’applicazione in risposta alle azioni inviate allo store.

Le azioni descrivono solo cosa è successo, non come cambia lo stato dell’applicazione.
Un reducer è una funzione che accetta lo stato e l’azione correnti e restituisce un nuovo stato con l’azione eseguita.
L’utility combineReducers() può essere utilizzata per combinare tutti i reducer nell’app in un unico reducer che rende la mantenibilità molto più semplice.

React Technical Interview

Ecco alcune domande tecniche su ReactJS.

Quali sono le caratteristiche di React?

JSX: JSX è un’estensione della sintassi di JavaScript. Viene utilizzato con React per descrivere come dovrebbe essere l’interfaccia utente. Utilizzando JSX, possiamo scrivere strutture HTML nello stesso file che contiene codice JavaScript.

Componenti: i componenti sono gli elementi costitutivi di qualsiasi applicazione React e una singola app di solito è composta da più componenti. Suddividono l’interfaccia utente in parti indipendenti e riutilizzabili che possono essere elaborate separatamente.

DOM virtuale: React mantiene una rappresentazione leggera del DOM reale nella memoria, noto come DOM virtuale. Quando lo stato di un oggetto cambia, il DOM virtuale cambia solo quell’oggetto nel DOM reale, invece di aggiornare tutti gli oggetti.

One-way data-binding: l’associazione dati unidirezionale di React mantiene tutto modulare e veloce. Un flusso di dati unidirezionale significa che quando si progetta un’app React, spesso si annidano i componenti figlio all’interno dei componenti padre.

Prestazioni elevate: React aggiorna solo i componenti che sono stati modificati, anziché aggiornare tutti i componenti contemporaneamente. Ciò si traduce in applicazioni web molto più veloci.

Cos’è JSX?

JSX è un’estensione della sintassi di JavaScript. Viene utilizzato con React per descrivere come dovrebbe essere l’interfaccia utente. Utilizzando JSX, possiamo scrivere strutture HTML nello stesso file che contiene codice JavaScript.

I browser Web possono leggere direttamente JSX?

I browser Web non possono leggere JSX direttamente. Questo perché sono costruiti per leggere solo oggetti JS regolari e JSX non è un normale oggetto JavaScript. Affinché un browser Web possa leggere un file JSX, il file deve essere trasformato in un normale oggetto JavaScript. Per questo, usiamo Babel.

Cos’è il DOM virtuale?

DOM sta per Document Object Model. Il DOM rappresenta un documento HTML con una struttura ad albero logica. Ogni ramo dell’albero termina in un nodo e ogni nodo contiene oggetti. React mantiene in memoria una rappresentazione leggera del DOM reale, noto come DOM virtuale. Quando lo stato di un oggetto cambia, il DOM virtuale cambia solo quell’oggetto nel DOM reale, invece di aggiornare tutti gli oggetti.

Perché usare React invece di un framework, come Angular?

React semplifica la creazione di applicazioni web dinamiche perché fornisce meno codice e fornisce più funzionalità, mentre, con le applicazioni JavaScript, il codice tende a diventare complesso molto rapidamente. React utilizza il DOM virtuale, che rende le applicazioni web più veloci.

Virtual DOM confronta il suo stato precedente e aggiorna solo quei componenti nel DOM reale, i cui stati sono cambiati, invece di aggiornare tutti i componenti, come le applicazioni web convenzionali.

I componenti sono gli elementi costitutivi di qualsiasi applicazione React e una singola app di solito è composta da più componenti. Questi componenti hanno la loro logica e controlli e possono essere riutilizzati attraverso l’applicazione, che, a sua volta, riduce drasticamente il tempo di sviluppo di un’applicazione.

React segue un flusso di dati unidirezionale. Ciò significa che durante la progettazione di un’app React, spesso annidiamo i componenti figlio all’interno dei componenti padre. E poiché i dati fluiscono in un’unica direzione, diventa più facile eseguire il debug degli errori e sapere dove si verifica il problema in un’applicazione al momento.

Facebook ha rilasciato un’estensione Chrome che possiamo utilizzare per eseguire il debug delle applicazioni React. Ciò rende il processo di debug di React alle applicazioni Web più rapido e semplice.

Che cos’è un evento in React?

Un evento è un’azione che un utente o un sistema può attivare, come la pressione di un tasto, un clic del mouse, ecc.

Gli eventi React sono denominati utilizzando camelCase, anziché minuscolo in HTML.
Con JSX, passi una funzione come gestore di eventi, piuttosto che una stringa in HTML.
<Button onClick={increaseCounter} />

Perché è necessario utilizzare le chiavi negli elenchi?

Le chiavi sono molto importanti negli elenchi per i seguenti motivi:

Una chiave è un identificatore univoco e viene utilizzata per identificare quali elementi sono stati modificati, aggiornati o eliminati dagli elenchi.
Aiuta anche a determinare quali componenti devono essere renderizzati nuovamente invece di eseguire nuovamente il rendering di tutti i componenti ogni volta. Pertanto, aumenta le prestazioni, poiché solo i componenti aggiornati vengono renderizzati nuovamente.

Che cos’è uno stato in React?

Lo stato è un oggetto React integrato che viene utilizzato per contenere dati o informazioni sul componente. Lo stato in un componente può cambiare nel tempo e, ogni volta che cambia, il componente viene riprodotto.
Il cambiamento di stato può avvenire in risposta all’azione dell’utente o agli eventi generati dal sistema. Determina il comportamento del componente e come verrà visualizzato.

Cos’è Redux?

Redux è una libreria JavaScript open source utilizzata per gestire lo stato delle applicazioni web. React usa Redux per costruire l’interfaccia utente. È un contenitore di stato prevedibile per le applicazioni JavaScript e viene utilizzato per la gestione dello stato dell’intera applicazione.

Quali sono i componenti di Redux?

Store: mantiene lo stato dell’applicazione.
Action: le informazioni di origine per lo store.
Reducer: specifica come cambia lo stato dell’applicazione in risposta alle azioni inviate allo store.

Cos’è Flux?

Flux è l’architettura dell’applicazione utilizzata da Facebook per la creazione di applicazioni web. È un metodo per gestire dati complessi all’interno di un’applicazione lato client e gestisce il flusso di dati in un’applicazione React. Esiste un’unica fonte di dati (lo store) e l’attivazione di determinate azioni è l’unico modo per aggiornarle. Le azioni chiamano il dispatcher, quindi lo store viene attivato e aggiornato di conseguenza con i propri dati. Quando un dispacher è stato attivato e lo store si aggiorna, emetterà un evento di modifica che le visualizzazioni possono eseguire nuovamente il rendering di conseguenza.

Cos’è il router React?

React Router è una libreria di routing costruita su React, che viene utilizzata per creare percorsi in un’applicazione React.

Perché abbiamo bisogno del React router?

Mantiene una struttura e un comportamento coerenti e viene utilizzato per sviluppare applicazioni Web single page.
Consente più viste in una singola applicazione definendo più percorsi nell’applicazione React.

Conclusione

Questa guida verrà aggiornata costantemente, vuole essere un modo per capire velocemente tutti i concetti chiave della libreria in modo tale da poter cominciare subito a sviluppare con essa.