Angular 100% operativo: corso completo! Libro acquistabile su AMAZON (-15%). Gratuito con 18app e carta docenti. Clicca qui
Davide Copelli WebSU

Da jQuery a React

Articolo a cura di: Davide Copelli {ing}

Facebook

Nell'anno 2018, per la prima volta, un maggior numero di persone ha cercato su Google il termine "React" rispetto a "jQuery". Questo dato preso da solo non vuol dire molto, ma se lo accostiamo ad altri importanti dati (ad esempio il numero di progetti su Git, sondaggio StackOverflow, etc), possiamo iniziare a pensare che React stia diventando la principale libreria per lo sviluppo web front-end.

Come e' accaduto per quasi tutte le nuove tecnologie che si sono succedute in questi anni, anche per React possiamo dire che non è la soluzione vincente da adottare per ogni progetto. Chi lavora nel mondo web conosce molto bene questo concetto. Ogni tecnologia ha i suoi pregi e difetti, quindi il compito del bravo sviluppatore è scegliere quella più idonea per l’obiettivo che si è prefissato.

Chi proviene dal mondo jQuery, potrebbe vedere React con un occhio non proprio benevolo, anche se molti si fanno ingannare dalle apparenze. E' vero che per diventare abili nell'uso di questa libreria non basta solo imparare una nuova sintassi, ma è necessario anche cambiare l'atteggiamento che porta alla progettazione del codice e all'aggiunta d'interattività alle pagine web. Questo però non significa che ci siano degli elementi comuni.

Personalmente ritengo che, allo stato attuale, forse con jQuery si riescono a gestire più rapidamente situazioni in cui l’animazione di un elemento della pagina, vincola l’esecuzione temporale di un altro effetto.

Le animazione complesse però sono sempre più rare nel web di oggi - rispetto all'era delle animazioni realizzate in Flash - quindi potrebbe in realtà non essere un reale vantaggio. Spesso però le vecchie mode ritornano.

E' possibile usare jQuery in React?

Certo è possibile usare jQuery in React,ma non te lo consiglio perché equivale a sacrificare molti dei vantaggi di React. Più del 90% di quello che puoi ottenere sfruttando JQuery, può essere fatto in modo nativo sfruttando React. Richiede solo un modo diverso di pensare.

Se proprio hai bisogno di jQuery in React dovrai installarlo nel progetto con:

npm install jquery –save

Fatto questo, puoi importare il simbolo $ da JQuery, inserendo nella parte superiore di qualsiasi file React, la riga per importarlo:

import $ from 'jquery';

Vantaggi di React rispetto a jQuery

Il tradizionale modo di pensare associato all'uso di JQuery, implica la selezione di elementi dal DOM, ogni volta che si desidera una nuova funzionalità JavaScript. Il "Document Object Model" come ben saprai è l'interfaccia che consente ai siti Web di modificare il proprio codice HTML in tempo reale. Lavorare sul DOM implica consumare risorse e rallentare il browser.

Al contrario, React tenta di limitare l'interazione con il DOM al minimo indispensabile. Utilizza quello che viene chiamato in gergo tecnico "Virtual DOM", ossia una copia del DOM che viene gestita e mantenuta invisibile all'utente.

Lavorando direttamente su questa copia, React è in grado di intervenire "chirurgicamente" sul DOM reale per apportare solo le modifiche degli elementi che effettivamente lo richiedono, ottimizzando così l'interazione con il DOM.

Dal selettore alla definizione di una funzionalità

Il classico esempio da cui partire è la gestione del click fatta su un elemento del DOM. In jQuery, la maggior parte delle operazioni inizia proprio con una query, ossia una selezione di qualche elemento del DOM. Per gestire il click infatti, per prima cosa è necessario identificare l’elemento nel codice HTML della pagina. Un concetto simile a quello che si fa con i CSS.

Qui sotto puoi trovare alcuni esempi classici:

$('h1') // Seleziono ogni tag <h1> presente nella pagina
$('.btn') // Seleziono tutti gli elementi con attributo di classe 'btn'
$('#ordine') // Seleziono un elemento con attributo id 'ordine'
$("[color='yellow']") // Seleziono tutti gli elementi con attributo 'color' uguale a 'yellow'

Pertanto se devo gestire il click sull’elemento <h1> di questa semplice pagina  HTML:

<html>
<body>
<h1>Titolo principale della pagina</h1>
<p>testo della pagina</p>
</body>
</html>

in jQuery scriverò:

$('h1').click(function() {
  alert('Clic sul titolo!');
});

In React, l'obiettivo è minimizzare il numero di chiamate fatte al DOM, così invece di selezionare gli elementi usando le query, si deve inserire una nuova funzionalità. Si lavora in modo simile al classico JavaScript perché, dopo aver trasformato la pagina in un componente, l’effetto equivalente si otterrà con queste righe:

const gestiscoClic = () => {
  alert('Clic sul titolo!');
};
<h1 onClick={gestiscoClic}>Titolo principale della pagina</h1>  

Chiaramente sono righe isolate da un contesto, ma giusto per vedere le differenza macro tra l’una e l’altra libreria.

Proprietà dell’oggetto evento

In jQuery è anche possibile accedere alle proprietà dell’oggetto evento, sfruttando l’argomento passato alla funzione anonima:

$('h1').click(function(event) {
  console.log('Accedo alla proprietà currentTarget ' + event.currentTarget);
  alert('Click sul titolo!');
});

in React diventa:

const gestiscoClic = (event) => {
  console.log('Accedo alla proprietà currentTarget ' + event.currentTarget);
  alert('Clic sul titolo!');
};

Gestire cambi di attributi di classe

JQuery ha molti metodi relativi all'aggiunta, all'eliminazione e all'aggiornamento degli attributi di classe di elementi HTML: addClass(), removeClass(), toggleClass(), etc. Come possiamo effettuare queste operarazioni in React?

Ad esempio se volessi cambiare il colore di sfondo di una specifica sezione della pagina, sfruttando una regola CSS di nome black, da aggiungere a un tag <p> dopo il clic sul testo interno a <H1>, in jQuery potrei scrivere:

$('h1').click(function() {
  $('p').addClass('black');
});

In React devo sfruttare il concetto di stato del componente e definire un “segnaposto” che conterrà il valore da assegnare allo specifico tag.

<h1 onClick={gestiscoClic}>Titolo della pagina</h1>
<p className={sfondo}>Testo della pagina</p>

E all’interno della funzione gestiscoClic, richiamare una funzione dedicata ottenuta tramite il richiamo di useState():

const [sfondo, setSfondo] = useState('')    // stato del componente (notazione Hook)

const gestiscoClic = () => {
  setSfondo('black');
};

La grossa differenza, come vedi, è che in React si lavora prima sulla sezione equivalente all’HTML (DOM virtuale) e poi si decide come questa deve cambiare e in quali circostanze.

Gran parte del lavoro da compiere in React infatti è nella fase di individuazione delle sezioni del codice HTML da trasformare in componenti in grado di relazionarsi gli uni con gli altri.

Modificare il testo presente nella pagina

Altra operazione tipica, è cambiare il testo di un elemento delle pagina, già inserito in fase di creazione. Sempre riferendoci al paragrafo sottostante al titolo, se volessi modificare il testo in “ciao a tutti”, dopo che l’utente ha fatto il classico clic sul titolo, in jQuery scriverei:

$('h1').click(function() {
  $('p').html('<b>Ciao a tutti</b>');
});

In React, dovrei prevedere una variabile di stato sfruttando le stesse tecniche viste per gli attributi di classe. Dovrei quindi modificare il codice HTML:

<h1 onClick={gestiscoClic}>Titolo della pagina</h1>
<p className={sfondo}>{testoparagrafo}</p>

e poi inizializzare la variabile testoparagrafo usata come segnaposto, con un valore iniziale pari a “Testo della pagina” e poi con la scritta “Ciao a tutti” dopo che l’utente ha fatto clic sul titolo:

const [testoparagrafo, setTestoPar] = useState(" Testo della pagina");  // stato del componente (notazione Hook)
const gestiscoClic = () => {
  setTestoPar('<b>Ciao a tutti</b>');
};

E’ chiaro che se volessi effettuare questa operazione anche dopo il click fatto su un altro titolo presente nella pagina:

<html>
<body>
 <h1>Titolo principale della pagina</h1>
 <p>testo della pagina</p>
 <h2>Secondo Titolo nella pagina</h2>
</body>
</html>

In jQuery dovrei aggiungere:

$('h1').click(function() {
  $('p').text('<b>Ciao a tutti</b>');
});
$('h2').click(function() {
  $('p').text('<b>Ciao a tutti</b>');
});

mentre in React l’unica modifica sarebbe sul codice HTML (in realtà è codice JSX):

<h1 onClick={gestiscoClic}>Titolo della pagina</h1>
<p className={sfondo}>{testoparagrafo}</p>
<h2 onClick={gestiscoClic}>Secondo Titolo nella pagina</h1>

Caricare dati da sorgenti esterne

Uno dei vantaggi più evidenti di React rispetto a jQuery è quando si devono recuperare dei dati da sorgenti esterne al fine di creare pezzi del DOM, non presenti in precedenza e con cui interagire.

Se ad esempio i dati che ci vengono forniti dall’API da interrogare sono nel formato JSON e con informazioni suddivise in questo modo:

{  "dati" :  [
               {"id": 1, "titolo": "Titolo News 1", "descrizione": "Descrizione News 1"},
               {"id": 2, "titolo": "Titolo News 2", "descrizione": "Descrizione News 2"}
              ]
} 

che intendo rappresentare come una lista di news con questa struttura HTML:

<html>
<body>
<h1>Titolo principale della pagina</h1>
<p>testo della pagina</p>
<h2>Secondo Titolo nella pagina</h2>
<section id="news">
<div class="row">
  <h2>Titolo News 1</h2>
  <p>Descrizione News 1</p>
</div>
<div class="row">
  <h2>Titolo News 2</h2>
  <p>Descrizione News 2</p>
</div>
</section>
</body>
</html>

sempre ipotizzando di recuperare i dati dopo il clic fatto sul titolo, in jQuery potrei scrivere nel DOM questo

<h1>Titolo principale della pagina</h1>
<p>testo della pagina</p>
<h2>Secondo Titolo nella pagina</h2>
<section id="news">
</section>

mentre per la gestione del clic:

$("h1").click(function() {                
      $.ajax({    
        type: "GET",
        url: "shownews.php",             
        dataType: "JSON",              
        success: function(response){                    
                $.each(response.dati, function(chiave,valore){
                listanews += "<div class=\"row\"><h2>\" + valore.titolo + "<\h2>" + 
                                       "<p>" + valore.descrizione  + "</p></div>";
        });
       $('#news').append(listanews);
     });
});

In React possono sfruttare direttamente le API del browser o altre librerie esterne. Come sempre dobbiamo concentrarci sulla parte HTML e scrivere:

<h1 onClick={gestiscoClic}>Titolo della pagina</h1>
<p className={sfondo}>{testoparagrafo}</p>
<h2 onClick={gestiscoClic}>Secondo Titolo nella pagina</h1>
<section id="news">
{ listanews.map((el) =>
       ({ <div className="row"><h2>{el.titolo}</h2><p>{el.descrizione}</p></div>}))
}
</section>

A differenza di jQuery abbiamo già inserito le righe che dovranno essere ripetute scorrendo l’array listanews. Quest’ultimo sarà valorizzato durante il recupero dei dati dall’API.

const [listanews,setListaNews] = useState([]);
const gestiscoClic = () => {
  fetch("shownews.php"l)
    .then(r => r.json())
    .then(r => {
      const { dati } = r;
      setListaNews(dati);
   })
};

Conclusione

Sebbene jQuery sia ancora popolare tra gli sviluppatori web, è sicuramente iniziata una fase di decrescita nell'utilizzo a favore di tecnologie più snelle e performanti. Le differenze non sono poi così "impressionanti" quindi se già conosci jQuery, non dovresti fare molta fatica a imparare velocemente questa nuova tecnologia.

Per gli amanti della lettura su carta, ti consiglio il mio ultimo libro "React 100% Operativo" che puoi acquistare direttamente su Amazon cliccando qui.

React 100% Operativo libro

Ricevi le anteprime dei nuovi corsi! Iscriviti Gratuitamente

Cliccando su Iscriviti, accetti le nostre condizioni d'uso e la politica sulla privacy

×