jQuery og React er begge populære JavaScript-biblioteker for frontend-utvikling. Mens jQuery er et DOM-manipulasjonsbibliotek, er React et JavaScript-bibliotek for å bygge brukergrensesnitt.

Finn ut hvordan du migrerer en eksisterende app fra jQuery til React.

jQuery vs. Reagere?

Når det gjelder å velge mellom jQuery og React, avhenger det av dine behov og preferanser. Hvis du leter etter et bibliotek som er enkelt å bruke og har et stort fellesskap, er jQuery et godt valg. Men hvis du leter etter et bibliotek som er mer egnet for storskala utvikling, er React det bedre alternativet.

Hvorfor migrere fra jQuery til å reagere?

Det er flere grunner til at du kanskje vil migrere appen din fra jQuery til React.

  • React er raskere enn jQuery: Hvis vi snakker om rå ytelse, er React raskere enn jQuery. Dette er fordi React bruker en virtuell DOM, som er en JavaScript-representasjon av den faktiske DOM. Dette betyr at når en bruker samhandler med en React-applikasjon, vil bare delene av DOM-en som endres oppdateres. Dette er mer effektivt enn jQuerys fulle DOM-manipulasjon.
    • instagram viewer
  • React er mer vedlikeholdbar: En annen grunn til å migrere til React er at den er mer vedlikeholdbar enn jQuery. Dette er fordi React-komponenter er selvstendige, slik at du enkelt kan gjenbruke dem. Dette betyr at hvis du trenger å gjøre en endring i en React-komponent, kan du gjøre det uten å påvirke resten av kodebasen.
  • React er mer skalerbar: Endelig er React mer skalerbar enn jQuery. Den bruker en komponentbasert arkitektur, som er mer skalerbar enn jQuerys monolitiske tilnærming. Dette betyr at du enkelt kan utvide og endre en React-applikasjon etter behov.
  • React har bedre støtte for enhetstesting: Når det gjelder enhetstesting har React bedre støtte enn jQuery. Fordi du enkelt kan isolere React-komponenter, er det lettere å skrive enhetstester for dem.

Hvordan migrere appen din fra jQuery til å reagere

Hvis du planlegger å migrere appen din fra jQuery til React, er det et par ting du må huske på. Det er viktig å vite hva du trenger for å begynne og få en god idé om hvordan du kan migrere individuelle deler av applikasjonen din.

Forutsetninger

Før du starter migreringsprosessen, er det noen ting du må gjøre for å sette opp ting. Først må du opprette en React-applikasjon ved hjelp av create-react-app.

Etter at du har installert disse avhengighetene, må du opprette en fil som heter index.js i din src katalog. Denne filen vil være inngangspunktet for din React-applikasjon.

Til slutt kan du gå videre til individuelle deler av kodebasen din og oppdatere dem deretter.

1. Håndtering av arrangementer

I jQuery kan du legge ved hendelser til elementer. Hvis du for eksempel har en knapp, kan du legge ved en klikkhendelse til den. Når noen klikker på knappen, vil hendelsesbehandleren kjøre.

$("knapp").click(funksjon() {
// gjør noe
});

React håndterer hendelser annerledes. I stedet for å knytte hendelser til elementer, definerer du dem i komponenter. Hvis du for eksempel har en knapp, vil du definere klikkhendelsen i komponenten:

klasseKnappstrekkerReagere.Komponent{
 handleClick() {
// gjør noe
 }
 render() {
komme tilbake (
<button onClick={this.handleClick}>
 Klikk på meg!
</button>
 );
 }
}

Her inneholder Button-komponenten definisjonen av handleClick()-metoden. Når noen klikker på knappen, vil denne metoden kjøre.

Hver metode har sine fordeler og ulemper. I jQuery er hendelser enkle å legge ved og fjerne. Det kan imidlertid være vanskelig å holde styr på dem hvis du har mange arrangementer. I React definerer du hendelser i komponenter, noe som kan gjøre dem lettere å holde styr på. Men de er ikke like enkle å feste og fjerne.

Hvis du bruker React, må du oppdatere koden din for å bruke den nye hendelseshåndteringsmetoden. For hver hendelse du vil håndtere, må du definere en metode i komponenten. Denne metoden kjøres når hendelsen utløses.

2. Effekter

I jQuery kan du bruke metodene .show() eller .hide() for å vise eller skjule et element. For eksempel:

$("#element").forestilling();

I React kan du bruke useState()-kroken for å administrere tilstanden. Hvis du for eksempel vil vise eller skjule et element, vil du definere tilstanden i komponenten:

import { useState } fra "reagere";
funksjonKomponent() {
konst [isShown, setIsShown] = useState(falsk);
komme tilbake (
<div>
 {er vist &&<div>Hallo!</div>}
<knapp påKlikk={() => setIsShown(!isShown)}>
 Veksle
</button>
</div>
 );
}

Denne koden definerer tilstandsvariabelen isShown og funksjonen setIsShown(). React har forskjellige typer kroker som du kan bruke i appen din, hvorav useState er en. Når en bruker klikker på knappen, oppdateres tilstandsvariabelen isShown, og elementet vises bare når det er aktuelt.

I jQuery er effekter enkle å bruke, og de fungerer bra. De kan imidlertid være vanskelige å håndtere hvis du har mange av dem. I React bor effekter inne i komponenter som kan gjøre dem enklere å administrere, om ikke like enkle å bruke.

3. Datahenting

I jQuery kan du bruke metoden $.ajax() for å hente data. Hvis du for eksempel vil hente JSON-data, kan du gjøre det slik:

$.ajax({
 url: "https://example.com/data.json",
 data-type: "json",
 suksess: funksjon(data) {
 // gjøre noe med de data
 }
});

I React kan du bruke fetch()-metoden for å hente data. Slik kan du hente JSON-data ved å bruke denne metoden:

hente("https://example.com/data.json")
 .da (respons => response.json())
 .da (data => {
 // gjøre noe med de data
 });

I jQuery er $.ajax()-metoden enkel å bruke. Det kan imidlertid være vanskelig å håndtere feil. I React er fetch()-metoden mer detaljert, men det er lettere å håndtere feil.

4. CSS

I jQuery kan du spesifisere CSS etter side. Hvis du for eksempel vil style alle knappene på en side, kan du gjøre det ved å målrette mot knappeelementet:

knapp {
 bakgrunnsfarge: rød;
 farge: hvit;
}

I React kan du bruke CSS på forskjellige måter. En måte er å bruke innebygde stiler. Hvis du for eksempel vil style en knapp, kan du gjøre det ved å legge til stilattributtet til elementet:

<button style={{bakgrunnsfarge: 'rød', farge: 'hvit'}}>
 Klikk på meg!
</button>

En annen måte å style React-komponenter på er å bruke globale stiler. Globale stiler er CSS-regler som du definerer utenfor en komponent og gjelder for alle komponentene i applikasjonen. For å gjøre dette kan du bruke et CSS-in-JS-bibliotek som stylede-komponenter:

import stylet fra 'stylede-komponenter';
konst Knapp = stylet.knapp`
 bakgrunnsfarge: rød;
 farge: hvit;
`;

Det er ikke noe riktig eller galt valg mellom innebygde stiler og globale stiler. Det avhenger virkelig av dine krav. Generelt er innebygde stiler enklere å bruke for små prosjekter. For større prosjekter er globale stiler et bedre alternativ.

Distribuer React-appen din enkelt

En av de viktigste fordelene med React er at det er veldig enkelt å distribuere React-appen din. Du kan distribuere React på hvilken som helst statisk webserver. Du trenger bare å kompilere koden din ved å bruke et verktøy som Webpack, og deretter legge den resulterende bundle.js-filen på webserveren din.

Du kan også være vert for React-appen din gratis på GitHub-sider.