jQuery och React är båda populära JavaScript-bibliotek för frontend-utveckling. Medan jQuery är ett DOM-manipulationsbibliotek, är React ett JavaScript-bibliotek för att bygga användargränssnitt.

Ta reda på hur du migrerar en befintlig app från jQuery till React.

jQuery vs. Reagera?

När det kommer till att välja mellan jQuery och React beror det på dina behov och preferenser. Om du letar efter ett bibliotek som är lätt att använda och har en stor community, då är jQuery ett bra val. Men om du letar efter ett bibliotek som är mer lämpat för storskalig utveckling är React det bättre alternativet.

Varför migrera från jQuery till React?

Det finns flera anledningar till varför du kanske vill migrera din app från jQuery till React.

  • React är snabbare än jQuery: Om vi ​​pratar om råprestanda är React snabbare än jQuery. Detta beror på att React använder en virtuell DOM, som är en JavaScript-representation av den faktiska DOM. Detta innebär att när en användare interagerar med en React-applikation kommer endast de delar av DOM som ändras att uppdateras. Detta är mer effektivt än jQuerys fullständiga DOM-manipulation.
    instagram viewer
  • React är mer underhållbart: En annan anledning att migrera till React är att det är mer underhållbart än jQuery. Detta beror på att React-komponenter är fristående så att du enkelt kan återanvända dem. Det betyder att om du behöver göra en förändring i en React-komponent kan du göra det utan att påverka resten av kodbasen.
  • React är mer skalbart: Slutligen är React mer skalbar än jQuery. Den använder en komponentbaserad arkitektur, som är mer skalbar än jQuerys monolitiska tillvägagångssätt. Detta innebär att du enkelt kan utöka och modifiera en React-applikation vid behov.
  • React har bättre stöd för enhetstestning: När det kommer till enhetstestning har React bättre stöd än jQuery. Eftersom du enkelt kan isolera React-komponenter är det lättare att skriva enhetstester för dem.

Hur du migrerar din app från jQuery till React

Om du planerar att migrera din app från jQuery till React finns det några saker du måste tänka på. Det är viktigt att veta vad du behöver för att börja och att få en god uppfattning om hur du kan migrera enskilda delar av din applikation.

Förutsättningar

Innan du startar migreringsprocessen finns det några saker du behöver göra för att ställa in saker. Först måste du skapa en React-applikation med create-react-app.

Efter att du har installerat dessa beroenden måste du skapa en fil som heter index.js i din src katalog. Den här filen kommer att vara startpunkten för din React-applikation.

Slutligen kan du gå vidare till enskilda delar av din kodbas och uppdatera dem därefter.

1. Hantera evenemang

I jQuery kan du bifoga händelser till element. Om du till exempel har en knapp kan du bifoga en klickhändelse till den. När någon klickar på knappen körs händelsehanteraren.

$("knapp").click(fungera() {
// göra någonting
});

React hanterar händelser annorlunda. Istället för att koppla händelser till element definierar du dem i komponenter. Till exempel, om du har en knapp, skulle du definiera klickhändelsen i komponenten:

klassKnappsträcker sigReagera.Komponent{
 handleClick() {
// göra någonting
 }
 framställa() {
lämna tillbaka (
<button onClick={this.handleClick}>
 Klicka här!
</button>
 );
 }
}

Här innehåller Button-komponenten definitionen av handleClick()-metoden. När någon klickar på knappen kommer den här metoden att köras.

Varje metod har sina för- och nackdelar. I jQuery är händelser lätta att bifoga och ta bort. Det kan dock vara svårt att hålla koll på dem om man har många evenemang. I React definierar du händelser i komponenter, vilket kan göra dem lättare att hålla reda på. Men de är inte lika lätta att fästa och ta bort.

Om du använder React måste du uppdatera din kod för att använda den nya händelsehanteringsmetoden. För varje händelse som du vill hantera måste du definiera en metod i komponenten. Den här metoden körs när händelsen utlöses.

2. Effekter

I jQuery kan du använda metoderna .show() eller .hide() för att visa eller dölja ett element. Till exempel:

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

I React kan du använda haken useState() för att hantera tillstånd. Om du till exempel vill visa eller dölja ett element, skulle du definiera tillståndet i komponenten:

importera { useState } från "reagera";
fungeraKomponent() {
konst [isShown, setIsShown] = useState(falsk);
lämna tillbaka (
<div>
 {visas &&<div>Hallå!</div>}
<knappen onClick={() => setIsShown(!isShown)}>
 Växla
</button>
</div>
 );
}

Den här koden definierar tillståndsvariabeln isShown och funktionen setIsShown(). React har olika typer av krokar som du kan använda i din app, varav useState är en. När en användare klickar på knappen uppdateras tillståndsvariabeln isShown och elementet visas endast när det är lämpligt.

I jQuery är effekter lätta att använda och de fungerar bra. De kan dock vara svåra att hantera om man har många av dem. I React finns effekter inuti komponenter som kan göra dem lättare att hantera, om inte lika lätta att använda.

3. Datahämtning

I jQuery kan du använda metoden $.ajax() för att hämta data. Om du till exempel vill hämta JSON-data kan du göra det så här:

$.ajax({
 url: "https://example.com/data.json",
 data typ: "json",
 Framgång: fungera(data) {
 // do något med de data
 }
});

I React kan du använda metoden fetch() för att hämta data. Så här kan du hämta JSON-data med den här metoden:

hämta("https://example.com/data.json")
 .då (svar => response.json())
 .då (data => {
 // do något med de data
 });

I jQuery är metoden $.ajax() lätt att använda. Det kan dock vara svårt att hantera fel. I React är metoden fetch() mer utförlig, men det är lättare att hantera fel.

4. CSS

I jQuery kan du ange CSS per sida. Om du till exempel vill utforma alla knappar på en sida kan du göra det genom att rikta in dig på knappelementet:

knapp {
 bakgrundsfärg: röd;
 färg vit;
}

I React kan du använda CSS på olika sätt. Ett sätt är att använda inline-stilar. Om du till exempel vill formatera en knapp kan du göra det genom att lägga till stilattributet till elementet:

<button style={{bakgrundsfärg: 'röd', Färg: 'vit'}}>
 Klicka här!
</button>

Ett annat sätt att styla React-komponenter är att använda globala stilar. Globala stilar är CSS-regler som du definierar utanför en komponent och tillämpar på alla komponenter i applikationen. För att göra detta kan du använda ett CSS-in-JS-bibliotek som styled-components:

importera stylad från 'stilade komponenter';
konst Knapp = styled.button`
 bakgrundsfärg: röd;
 färg vit;
`;

Det finns inget rätt eller fel val mellan inline-stilar och globala stilar. Det beror verkligen på dina krav. I allmänhet är inline-stilar lättare att använda för små projekt. För större projekt är globala stilar ett bättre alternativ.

Implementera enkelt din React-app

En av de viktigaste fördelarna med React är att det är väldigt enkelt att distribuera din React-app. Du kan distribuera React på vilken statisk webbserver som helst. Du behöver bara kompilera din kod med ett verktyg som Webpack och sedan lägga den resulterande filen bundle.js på din webbserver.

Du kan också vara värd för din React-app gratis på GitHub-sidor.