jQuery e React sono entrambe librerie JavaScript popolari per lo sviluppo front-end. Mentre jQuery è una libreria di manipolazione DOM, React è una libreria JavaScript per la creazione di interfacce utente.

Scopri come migrare un'app esistente da jQuery a React.

jQuery vs. Reagire?

Quando si tratta di scegliere tra jQuery e React, dipende dalle tue esigenze e preferenze. Se stai cercando una libreria facile da usare e con una vasta comunità, allora jQuery è una buona scelta. Ma se stai cercando una libreria più adatta allo sviluppo su larga scala, React è l'opzione migliore.

Perché migrare da jQuery a React?

Esistono diversi motivi per cui potresti voler migrare la tua app da jQuery a React.

  • React è più veloce di jQuery: Se parliamo di prestazioni grezze, React è più veloce di jQuery. Questo perché React utilizza un DOM virtuale, che è una rappresentazione JavaScript del DOM effettivo. Ciò significa che quando un utente interagisce con un'applicazione React, verranno aggiornate solo le parti del DOM che cambiano. Questo è più efficiente della manipolazione completa del DOM di jQuery.
    • instagram viewer
  • React è più gestibile: Un altro motivo per migrare a React è che è più gestibile di jQuery. Questo perché i componenti di React sono autonomi, quindi puoi riutilizzarli facilmente. Ciò significa che se devi apportare una modifica a un componente React, puoi farlo senza influire sul resto della base di codice.
  • React è più scalabile: Infine, React è più scalabile di jQuery. Utilizza un'architettura basata su componenti, che è più scalabile dell'approccio monolitico di jQuery. Ciò significa che puoi facilmente estendere e modificare un'applicazione React secondo necessità.
  • React ha un supporto migliore per i test unitari: Quando si tratta di unit test, React ha un supporto migliore di jQuery. Poiché puoi facilmente isolare i componenti React, è più facile scrivere unit test per loro.

Come migrare la tua app da jQuery a React

Se hai intenzione di migrare la tua app da jQuery a React, ci sono alcune cose che devi tenere a mente. È importante sapere di cosa hai bisogno per iniziare e avere una buona idea di come puoi migrare singole parti della tua applicazione.

Prerequisiti

Prima di iniziare il processo di migrazione, ci sono alcune cose che devi fare per impostare le cose. Per prima cosa, devi creare un'applicazione React usando create-react-app.

Dopo aver installato queste dipendenze, è necessario creare un file chiamato index.js nel tuo src directory. Questo file sarà il punto di ingresso per la tua applicazione React.

Infine, puoi passare alle singole parti della tua base di codice e aggiornarle di conseguenza.

1. Gestione degli eventi

In jQuery, puoi allegare eventi agli elementi. Ad esempio, se si dispone di un pulsante, è possibile allegare ad esso un evento clic. Quando qualcuno fa clic sul pulsante, verrà eseguito il gestore dell'evento.

$("pulsante").clic(funzione() {
// fare qualcosa
});

React gestisce gli eventi in modo diverso. Invece di allegare eventi agli elementi, li definisci nei componenti. Ad esempio, se hai un pulsante, devi definire l'evento clic nel componente:

classePulsanteestendeReagire.Componente{
 manigliaclic() {
// fare qualcosa
 }
 rendere() {
ritorno (
<pulsante onClick={this.handleClick}>
 Cliccami!
</button>
 );
 }
}

Qui, il componente Button contiene la definizione del metodo handleClick(). Quando qualcuno fa clic sul pulsante, questo metodo verrà eseguito.

Ogni metodo ha i suoi pro e contro. In jQuery, gli eventi sono facili da allegare e rimuovere. Tuttavia, può essere difficile tenerne traccia se si hanno molti eventi. In React, definisci gli eventi nei componenti, il che può renderli più facili da tenere traccia. Ma non sono così facili da attaccare e rimuovere.

Se stai utilizzando React, dovrai aggiornare il codice per utilizzare il nuovo metodo di gestione degli eventi. Per ogni evento che vuoi gestire, dovrai definire un metodo nel componente. Questo metodo verrà eseguito quando si attiva l'evento.

2. Effetti

In jQuery, potresti utilizzare i metodi .show() o .hide() per mostrare o nascondere un elemento. Per esempio:

$("#elemento").spettacolo();

In React, puoi utilizzare l'hook useState() per gestire lo stato. Ad esempio, se vuoi mostrare o nascondere un elemento, devi definire lo stato nel componente:

importare { usaStato } da "reagire";
funzioneComponente() {
cost [isShown, setIsShown] = useState(falso);
ritorno (
<div>
 {è mostrato &&<div>Ciao!</div>}
<pulsante al clic={() => setIsShown(!isShown)}>
 Alterna
</button>
</div>
 );
}

Questo codice definisce la variabile di stato isShown e la funzione setIsShown(). Reagire ha diversi tipi di ganci che puoi utilizzare nella tua app, di cui useState è uno. Quando un utente fa clic sul pulsante, la variabile di stato isShown si aggiorna e l'elemento viene visualizzato solo quando appropriato.

In jQuery, gli effetti sono facili da usare e funzionano bene. Tuttavia, possono essere difficili da gestire se ne hai molti. In React, gli effetti risiedono all'interno di componenti che possono renderli più facili da gestire, se non altrettanto facili da usare.

3. Recupero dati

In jQuery, puoi utilizzare il metodo $.ajax() per recuperare i dati. Ad esempio, se desideri recuperare alcuni dati JSON, puoi farlo in questo modo:

$.ajax({
 URL: "https://example.com/data.json",
 tipo di dati: "json",
 successo: funzione(dati) {
 // Fare qualcosa con IL dati
 }
});

In React, puoi utilizzare il metodo fetch() per recuperare i dati. Ecco come recuperare i dati JSON utilizzando questo metodo:

andare a prendere("https://example.com/data.json")
 .poi (risposta => risposta.json())
 .then (dati => {
 // Fare qualcosa con IL dati
 });

In jQuery, il metodo $.ajax() è facile da usare. Tuttavia, può essere difficile gestire gli errori. In React, il metodo fetch() è più prolisso, ma è più facile gestire gli errori.

4. CSS

In jQuery, puoi specificare CSS per pagina. Ad esempio, se desideri applicare uno stile a tutti i pulsanti di una pagina, puoi farlo scegliendo come target l'elemento pulsante:

pulsante {
 colore di sfondo: rosso;
 colore bianco;
}

In React, puoi utilizzare i CSS in diversi modi. Un modo è usare gli stili in linea. Ad esempio, se vuoi dare uno stile a un pulsante, puoi farlo aggiungendo l'attributo style all'elemento:

<stile pulsante={{backgroundColor: 'rosso', colore: 'bianco'}}>
 Cliccami!
</button>

Un altro modo per modellare i componenti React è usare gli stili globali. Gli stili globali sono regole CSS definite all'esterno di un componente e applicate a tutti i componenti dell'applicazione. Per fare ciò, puoi utilizzare una libreria CSS-in-JS come styled-components:

importare stile da 'componenti con stile';
cost Button = styled.button`
 colore di sfondo: rosso;
 colore bianco;
`;

Non esiste una scelta giusta o sbagliata tra stili in linea e stili globali. Dipende molto dalle tue esigenze. In generale, gli stili in linea sono più facili da usare per piccoli progetti. Per progetti più grandi, gli stili globali sono un'opzione migliore.

Distribuisci facilmente la tua app React

Uno dei vantaggi più significativi di React è che è molto facile distribuire la tua app React. Puoi distribuire React su qualsiasi server web statico. Devi solo compilare il tuo codice utilizzando uno strumento come Webpack, quindi inserire il file bundle.js risultante sul tuo server web.

Puoi anche ospitare la tua app React gratuitamente sulle pagine GitHub.