jQuery og React er begge populære JavaScript-biblioteker til frontend-udvikling. Mens jQuery er et DOM-manipulationsbibliotek, er React et JavaScript-bibliotek til opbygning af brugergrænseflader.

Find ud af, hvordan du migrerer en eksisterende app fra jQuery til React.

jQuery vs. Reagere?

Når det kommer til at vælge mellem jQuery og React, afhænger det af dine behov og præferencer. Hvis du leder efter et bibliotek, der er nemt at bruge og har et stort fællesskab, så er jQuery et godt valg. Men hvis du leder efter et bibliotek, der er mere velegnet til udvikling i stor skala, er React den bedre mulighed.

Hvorfor migrere fra jQuery til React?

Der er flere grunde til, at du måske ønsker at migrere din app fra jQuery til React.

  • React er hurtigere end jQuery: Hvis vi taler om rå ydeevne, er React hurtigere end jQuery. Dette skyldes, at React bruger en virtuel DOM, som er en JavaScript-repræsentation af den faktiske DOM. Det betyder, at når en bruger interagerer med en React-applikation, vil kun de dele af DOM'et, der ændres, blive opdateret. Dette er mere effektivt end jQuerys fulde DOM-manipulation.
    instagram viewer
  • React er mere vedligeholdelsesvenlig: En anden grund til at migrere til React er, at det er mere vedligeholdelsesvenligt end jQuery. Dette skyldes, at React-komponenter er selvstændige, så du nemt kan genbruge dem. Det betyder, at hvis du skal lave en ændring af en React-komponent, kan du gøre det uden at påvirke resten af ​​kodebasen.
  • React er mere skalerbar: Endelig er React mere skalerbar end jQuery. Den bruger en komponentbaseret arkitektur, som er mere skalerbar end jQuerys monolitiske tilgang. Det betyder, at du nemt kan udvide og ændre en React-applikation efter behov.
  • React har bedre understøttelse af enhedstest: Når det kommer til enhedstest, har React bedre support end jQuery. Fordi du nemt kan isolere React-komponenter, er det nemmere at skrive enhedstests for dem.

Sådan migrerer du din app fra jQuery til React

Hvis du planlægger at migrere din app fra jQuery til React, er der et par ting, du skal huske på. Det er vigtigt at vide, hvad du skal bruge for at begynde og få en god idé om, hvordan du kan migrere individuelle dele af din applikation.

Forudsætninger

Før du starter migreringsprocessen, er der et par ting, du skal gøre for at sætte tingene op. Først skal du oprette en React-applikation ved hjælp af create-react-app.

Når du har installeret disse afhængigheder, skal du oprette en fil kaldet index.js i din src vejviser. Denne fil vil være indgangspunktet for din React-applikation.

Endelig kan du gå videre til individuelle dele af din kodebase og opdatere dem i overensstemmelse hermed.

1. Håndtering af arrangementer

I jQuery kan du vedhæfte begivenheder til elementer. For eksempel, hvis du har en knap, kan du vedhæfte en klikbegivenhed til den. Når nogen klikker på knappen, vil hændelseshåndteringen køre.

$("knap").klik(fungere() {
// gør noget
});

React håndterer begivenheder forskelligt. I stedet for at knytte begivenheder til elementer, definerer du dem i komponenter. For eksempel, hvis du har en knap, vil du definere klikhændelsen i komponenten:

klasseKnapstrækker sigReagere.Komponent{
 handleClick() {
// gør noget
 }
 render() {
Vend tilbage (
<button onClick={this.handleClick}>
 Klik på mig!
</button>
 );
 }
}

Her indeholder Button-komponenten definitionen af ​​handleClick()-metoden. Når nogen klikker på knappen, vil denne metode køre.

Hver metode har sine fordele og ulemper. I jQuery er begivenheder nemme at vedhæfte og fjerne. Det kan dog være svært at holde styr på dem, hvis man har mange arrangementer. I React definerer du hændelser i komponenter, hvilket kan gøre dem nemmere at holde styr på. Men de er ikke så nemme at fastgøre og fjerne.

Hvis du bruger React, skal du opdatere din kode for at bruge den nye hændelseshåndteringsmetode. For hver hændelse, du vil håndtere, skal du definere en metode i komponenten. Denne metode kører, når hændelsen udløses.

2. Effekter

I jQuery kan du bruge metoderne .show() eller .hide() til at vise eller skjule et element. For eksempel:

$("#element").at vise();

I React kan du bruge useState()-krogen til at administrere tilstand. Hvis du f.eks. vil vise eller skjule et element, skal du definere tilstanden i komponenten:

importere { useState } fra "reagere";
fungereKomponent() {
konst [isShown, setIsShown] = useState(falsk);
Vend tilbage (
<div>
 {er vist &&<div>Hej!</div>}
<knap påKlik={() => setIsShown(!isShown)}>
 Skift
</button>
</div>
 );
}

Denne kode definerer tilstandsvariablen isShown og funktionen setIsShown(). React har forskellige typer kroge som du kan bruge i din app, hvoraf useState er en. Når en bruger klikker på knappen, opdateres tilstandsvariablen isShown, og elementet vises kun, når det er relevant.

I jQuery er effekter nemme at bruge, og de fungerer godt. De kan dog være svære at overskue, hvis man har mange af dem. I React bor effekter inde i komponenter, som kan gøre dem nemmere at administrere, hvis ikke lige så nemme at bruge.

3. Datahentning

I jQuery kan du bruge metoden $.ajax() til at hente data. For eksempel, hvis du vil hente nogle JSON-data, kan du gøre det sådan:

$.ajax({
 url: "https://example.com/data.json",
 datatype: "json",
 succes: fungere(data) {
 // gør noget med det data
 }
});

I React kan du bruge metoden fetch() til at hente data. Sådan kan du hente JSON-data ved hjælp af denne metode:

hente("https://example.com/data.json")
 .da (svar => response.json())
 .da (data => {
 // gør noget med det data
 });

I jQuery er $.ajax() metoden nem at bruge. Det kan dog være svært at håndtere fejl. I React er fetch()-metoden mere omfattende, men det er lettere at håndtere fejl.

4. CSS

I jQuery kan du angive CSS efter side. Hvis du f.eks. vil style alle knapperne på en side, kan du gøre det ved at målrette knapelementet:

knap {
 baggrundsfarve: rød;
 farve: hvid;
}

I React kan du bruge CSS på forskellige måder. En måde er at bruge inline-stile. For eksempel, hvis du vil style en knap, kan du gøre det ved at tilføje stilattributten til elementet:

<knap stil={{baggrundsfarve: 'rød', farve: 'hvid'}}>
 Klik på mig!
</button>

En anden måde at style React-komponenter på er at bruge globale stilarter. Globale stilarter er CSS-regler, som du definerer uden for en komponent og gælder for alle komponenter i applikationen. For at gøre dette kan du bruge et CSS-in-JS-bibliotek som stylede-komponenter:

importere stylet fra 'stylede-komponenter';
konst Knap = stylet.knap`
 baggrundsfarve: rød;
 farve: hvid;
`;

Der er ikke noget rigtigt eller forkert valg mellem inline-stile og globale stilarter. Det afhænger virkelig af dine krav. Generelt er inline-stile nemmere at bruge til små projekter. For større projekter er globale stilarter en bedre mulighed.

Implementer nemt din React-app

En af de vigtigste fordele ved React er, at det er meget nemt at implementere din React-app. Du kan implementere React på enhver statisk webserver. Du skal blot kompilere din kode ved hjælp af et værktøj som Webpack, og derefter lægge den resulterende bundle.js-fil på din webserver.

Du kan også hoste din React-app gratis på GitHub-sider.