jQuery en React zijn beide populaire JavaScript-bibliotheken voor front-end ontwikkeling. Hoewel jQuery een DOM-manipulatiebibliotheek is, is React een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces.

Ontdek hoe u een bestaande app migreert van jQuery naar React.

jQuery vs. Reageer?

Als het gaat om het kiezen tussen jQuery en React, hangt het af van uw behoeften en voorkeuren. Als u op zoek bent naar een bibliotheek die gemakkelijk te gebruiken is en een grote community heeft, dan is jQuery een goede keuze. Maar als u op zoek bent naar een bibliotheek die meer geschikt is voor grootschalige ontwikkeling, is React de betere optie.

Waarom migreren van jQuery naar React?

Er zijn verschillende redenen waarom u uw app van jQuery naar React wilt migreren.

  • React is sneller dan jQuery: Als we het hebben over onbewerkte prestaties, is React sneller dan jQuery. Dit komt omdat React een virtuele DOM gebruikt, wat een JavaScript-representatie is van de daadwerkelijke DOM. Dit betekent dat wanneer een gebruiker interactie heeft met een React-applicatie, alleen de delen van de DOM die veranderen, worden bijgewerkt. Dit is efficiënter dan de volledige DOM-manipulatie van jQuery.
    instagram viewer
  • Reageren is beter onderhoudbaar: Een andere reden om naar React te migreren is dat het beter te onderhouden is dan jQuery. Dit komt omdat React-componenten op zichzelf staan, zodat u ze gemakkelijk kunt hergebruiken. Dit betekent dat als u een wijziging in een React-component moet aanbrengen, u dit kunt doen zonder de rest van de codebase te beïnvloeden.
  • React is beter schaalbaar: Ten slotte is React schaalbaarder dan jQuery. Het maakt gebruik van een op componenten gebaseerde architectuur, die schaalbaarder is dan de monolithische benadering van jQuery. Dit betekent dat u een React-applicatie indien nodig eenvoudig kunt uitbreiden en wijzigen.
  • React heeft betere ondersteuning voor het testen van eenheden: Als het gaat om het testen van eenheden, heeft React betere ondersteuning dan jQuery. Omdat u React-componenten eenvoudig kunt isoleren, is het eenvoudiger om er unit-tests voor te schrijven.

Hoe u uw app kunt migreren van jQuery naar React

Als u van plan bent uw app van jQuery naar React te migreren, zijn er een paar dingen waar u rekening mee moet houden. Het is belangrijk om te weten wat je nodig hebt om te beginnen en om een ​​goed idee te krijgen van hoe je individuele onderdelen van je applicatie kunt migreren.

Vereisten

Voordat u het migratieproces start, zijn er een paar dingen die u moet doen om dingen in te stellen. Eerst moet je maak een React-applicatie met behulp van create-react-app.

Nadat u deze afhankelijkheden hebt geïnstalleerd, moet u een bestand maken met de naam index.js in uw src map. Dit bestand is het startpunt voor uw React-toepassing.

Ten slotte kunt u doorgaan naar afzonderlijke delen van uw codebase en deze dienovereenkomstig bijwerken.

1. Gebeurtenissen afhandelen

In jQuery kunt u gebeurtenissen aan elementen koppelen. Als u bijvoorbeeld een knop heeft, kunt u er een klikgebeurtenis aan koppelen. Wanneer iemand op de knop klikt, wordt de gebeurtenishandler uitgevoerd.

$("knop").klik(functie() {
// doe iets
});

React gaat anders om met gebeurtenissen. In plaats van gebeurtenissen aan elementen te koppelen, definieert u ze in componenten. Als u bijvoorbeeld een knop heeft, definieert u de klikgebeurtenis in de component:

klasKnopstrekt zich uitReageer.Onderdeel{
 handleClick() {
// doe iets
 }
 veroorzaken() {
opbrengst (
<knop onClick={dit.handleClick}>
 Klik hier!
</button>
 );
 }
}

Hier bevat de component Button de definitie van de methode handleClick(). Wanneer iemand op de knop klikt, wordt deze methode uitgevoerd.

Elke methode heeft zijn voor- en nadelen. In jQuery zijn events eenvoudig te koppelen en te verwijderen. Het kan echter moeilijk zijn om ze bij te houden als u veel evenementen heeft. In React definieert u gebeurtenissen in componenten, waardoor ze gemakkelijker bij te houden zijn. Maar ze zijn niet zo eenvoudig te bevestigen en te verwijderen.

Als u React gebruikt, moet u uw code bijwerken om de nieuwe gebeurtenisafhandelingsmethode te gebruiken. Voor elke gebeurtenis die u wilt afhandelen, moet u een methode in de component definiëren. Deze methode wordt uitgevoerd wanneer de gebeurtenis wordt geactiveerd.

2. Effecten

In jQuery kunt u de methoden .show() of .hide() gebruiken om een ​​element weer te geven of te verbergen. Bijvoorbeeld:

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

In React kun je de useState() hook gebruiken om de status te beheren. Als u bijvoorbeeld een element wilt weergeven of verbergen, definieert u de status in de component:

importeren { useState } van "Reageer";
functieOnderdeel() {
const [isShown, setIsShown] = useState(vals);
opbrengst (
<div>
 {wordt getoond &&<div>Hallo!</div>}
<knop onClick={() => setIsShown(!isShown)}>
 Schakelaar
</button>
</div>
 );
}

Deze code definieert de statusvariabele isShown en de functie setIsShown(). Reageren heeft verschillende soorten haken die u kunt gebruiken in uw app, waarvan useState er een is. Wanneer een gebruiker op de knop klikt, wordt de statusvariabele isShown bijgewerkt en wordt het element alleen weergegeven wanneer dit van toepassing is.

In jQuery zijn effecten eenvoudig te gebruiken en ze werken goed. Ze kunnen echter moeilijk te beheren zijn als je er veel hebt. In React leven effecten in componenten waardoor ze gemakkelijker te beheren, zo niet zo gebruiksvriendelijk kunnen zijn.

3. Gegevens ophalen

In jQuery kunt u de methode $.ajax() gebruiken om gegevens op te halen. Als u bijvoorbeeld wat JSON-gegevens wilt ophalen, kunt u dit als volgt doen:

$.ajax({
 url: "https://example.com/data.json",
 data type: "json",
 succes: functie(gegevens) {
 // Doen iets met de gegevens
 }
});

In React kun je de methode fetch() gebruiken om gegevens op te halen. Hier leest u hoe u JSON-gegevens kunt ophalen met deze methode:

ophalen("https://example.com/data.json")
 .then (antwoord => reactie.json())
 .then (gegevens => {
 // Doen iets met de gegevens
 });

In jQuery is de methode $.ajax() eenvoudig te gebruiken. Het kan echter moeilijk zijn om met fouten om te gaan. In React is de methode fetch() uitgebreider, maar het is gemakkelijker om met fouten om te gaan.

4. CSS

In jQuery kunt u CSS per pagina specificeren. Als u bijvoorbeeld alle knoppen op een pagina wilt opmaken, kunt u dit doen door het knopelement te targeten:

knop {
 achtergrondkleur: rood;
 kleur wit;
}

In React kun je CSS op verschillende manieren gebruiken. Een manier is om inline stijlen te gebruiken. Als u bijvoorbeeld een knop wilt stylen, kunt u dit doen door het style-attribuut aan het element toe te voegen:

<knopstijl={{backgroundColor: 'rood', kleur: 'wit'}}>
 Klik hier!
</button>

Een andere manier om React-componenten te stylen, is door globale stijlen te gebruiken. Globale stijlen zijn CSS-regels die u buiten een component definieert en toepast op alle componenten in de toepassing. Om dit te doen, kunt u een CSS-in-JS-bibliotheek gebruiken, zoals gestileerde componenten:

importeren gestileerd van 'stijl-componenten';
const Knop = gestileerde.knop`
 achtergrondkleur: rood;
 kleur wit;
`;

Er is geen goede of foute keuze tussen inline stijlen en globale stijlen. Het hangt echt af van uw wensen. Over het algemeen zijn inline-stijlen gemakkelijker te gebruiken voor kleine projecten. Voor grotere projecten zijn globale stijlen een betere optie.

Implementeer eenvoudig uw React-app

Een van de belangrijkste voordelen van React is dat het heel eenvoudig is om uw React-app te implementeren. U kunt React op elke statische webserver implementeren. U hoeft alleen uw code te compileren met behulp van een tool zoals Webpack en vervolgens het resulterende bestand bundle.js op uw webserver te plaatsen.

Je kunt je React-app ook gratis hosten op GitHub-pagina's.