jQuery und React sind beide beliebte JavaScript-Bibliotheken für die Frontend-Entwicklung. Während jQuery eine DOM-Manipulationsbibliothek ist, ist React eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

Erfahren Sie, wie Sie eine vorhandene App von jQuery zu React migrieren.

jQuery vs. Reagieren?

Die Wahl zwischen jQuery und React hängt von Ihren Bedürfnissen und Vorlieben ab. Wenn Sie nach einer Bibliothek suchen, die einfach zu bedienen ist und eine große Community hat, dann ist jQuery eine gute Wahl. Wenn Sie jedoch nach einer Bibliothek suchen, die sich besser für die Entwicklung in großem Maßstab eignet, ist React die bessere Option.

Warum von jQuery zu React migrieren?

Es gibt mehrere Gründe, warum Sie Ihre App möglicherweise von jQuery zu React migrieren möchten.

  • React ist schneller als jQuery: Wenn wir über reine Leistung sprechen, ist React schneller als jQuery. Dies liegt daran, dass React ein virtuelles DOM verwendet, das eine JavaScript-Darstellung des tatsächlichen DOM ist. Das bedeutet, dass, wenn ein Benutzer mit einer React-Anwendung interagiert, nur die Teile des DOM aktualisiert werden, die sich ändern. Dies ist effizienter als die vollständige DOM-Manipulation von jQuery.
    instagram viewer
  • React ist wartungsfreundlicherHinweis: Ein weiterer Grund für die Migration zu React ist, dass es wartungsfreundlicher ist als jQuery. Dies liegt daran, dass React-Komponenten eigenständig sind, sodass Sie sie problemlos wiederverwenden können. Wenn Sie also eine Änderung an einer React-Komponente vornehmen müssen, können Sie dies tun, ohne den Rest der Codebasis zu beeinträchtigen.
  • React ist skalierbarerHinweis: Schließlich ist React skalierbarer als jQuery. Es verwendet eine komponentenbasierte Architektur, die skalierbarer ist als der monolithische Ansatz von jQuery. Dies bedeutet, dass Sie eine React-Anwendung bei Bedarf einfach erweitern und ändern können.
  • React bietet eine bessere Unterstützung für Unit-Tests: Wenn es um Unit-Tests geht, bietet React eine bessere Unterstützung als jQuery. Da Sie React-Komponenten einfach isolieren können, ist es einfacher, Unit-Tests für sie zu schreiben.

So migrieren Sie Ihre App von jQuery zu React

Wenn Sie planen, Ihre App von jQuery zu React zu migrieren, müssen Sie einige Dinge beachten. Es ist wichtig zu wissen, was Sie zu Beginn benötigen und eine gute Vorstellung davon zu bekommen, wie Sie einzelne Teile Ihrer Anwendung migrieren können.

Voraussetzungen

Bevor Sie mit dem Migrationsprozess beginnen, müssen Sie einige Dinge einrichten. Zuerst müssen Sie Erstellen Sie eine React-Anwendung mit create-react-app.

Nachdem Sie diese Abhängigkeiten installiert haben, müssen Sie eine Datei namens erstellen index.js in deinem Quelle Verzeichnis. Diese Datei ist der Einstiegspunkt für Ihre React-Anwendung.

Schließlich können Sie zu einzelnen Teilen Ihrer Codebasis übergehen und diese entsprechend aktualisieren.

1. Umgang mit Ereignissen

In jQuery können Sie Ereignisse an Elemente anhängen. Wenn Sie beispielsweise eine Schaltfläche haben, können Sie ihr ein Click-Ereignis zuordnen. Wenn jemand auf die Schaltfläche klickt, wird der Ereignishandler ausgeführt.

$("Schaltfläche").click(Funktion() {
// etwas tun
});

React behandelt Ereignisse anders. Anstatt Ereignisse an Elemente anzuhängen, definieren Sie sie in Komponenten. Wenn Sie beispielsweise eine Schaltfläche haben, würden Sie das Click-Ereignis in der Komponente definieren:

KlasseTasteerweitertReagieren.Komponente{
 handleClick() {
// etwas tun
 }
 rendern() {
zurückkehren (
<Schaltfläche onClick={this.handleClick}>
 Klick mich!
</button>
 );
 }
}

Hier enthält die Button-Komponente die Definition der handleClick()-Methode. Wenn jemand auf die Schaltfläche klickt, wird diese Methode ausgeführt.

Jede Methode hat ihre Vor- und Nachteile. In jQuery lassen sich Ereignisse einfach anhängen und entfernen. Es kann jedoch schwierig sein, den Überblick zu behalten, wenn Sie viele Ereignisse haben. In React definieren Sie Ereignisse in Komponenten, wodurch sie leichter nachverfolgt werden können. Aber sie sind nicht so einfach anzubringen und zu entfernen.

Wenn Sie React verwenden, müssen Sie Ihren Code aktualisieren, um die neue Ereignisbehandlungsmethode zu verwenden. Für jedes Ereignis, das Sie behandeln möchten, müssen Sie eine Methode in der Komponente definieren. Diese Methode wird ausgeführt, wenn das Ereignis ausgelöst wird.

2. Auswirkungen

In jQuery können Sie die Methoden .show() oder .hide() verwenden, um ein Element anzuzeigen oder auszublenden. Zum Beispiel:

$("#Element").zeigen();

In React können Sie den useState()-Hook verwenden, um den Status zu verwalten. Wenn Sie beispielsweise ein Element ein- oder ausblenden möchten, würden Sie den Zustand in der Komponente definieren:

importieren { useState } aus "reagieren";
FunktionKomponente() {
konst [wirdangezeigt, setwirdangezeigt] = useState(FALSCH);
zurückkehren (
<div>
 {wird gezeigt &&<div>Hallo!</div>}
<Schaltfläche onClick={() => setIsShown(!isShown)}>
 Umschalten
</button>
</div>
 );
}

Dieser Code definiert die Zustandsvariable isShown und die Funktion setIsShown(). Reagieren hat verschiedene Arten von Haken die Sie in Ihrer App verwenden können, von denen useState einer ist. Wenn ein Benutzer auf die Schaltfläche klickt, wird die Zustandsvariable isShown aktualisiert und das Element wird nur dann angezeigt, wenn es angemessen ist.

In jQuery sind Effekte einfach zu verwenden und funktionieren gut. Sie können jedoch schwierig zu verwalten sein, wenn Sie viele davon haben. In React leben Effekte innerhalb von Komponenten, wodurch sie einfacher zu verwalten, wenn auch nicht so einfach zu bedienen sind.

3. Datenabruf

In jQuery können Sie die Methode $.ajax() verwenden, um Daten abzurufen. Wenn Sie beispielsweise einige JSON-Daten abrufen möchten, können Sie dies folgendermaßen tun:

$.ajax({
 URL: "https://example.com/data.json",
 Datentyp: "json",
 Erfolg: Funktion(Daten) {
 // Tun etwas mit Die Daten
 }
});

In React können Sie die Methode fetch() verwenden, um Daten abzurufen. So können Sie JSON-Daten mit dieser Methode abrufen:

bringen("https://example.com/data.json")
 .then (Antwort => Antwort.json())
 .then (Daten => {
 // Tun etwas mit Die Daten
 });

In jQuery ist die Methode $.ajax() einfach zu verwenden. Es kann jedoch schwierig sein, mit Fehlern umzugehen. In React ist die Methode fetch() ausführlicher, aber es ist einfacher, mit Fehlern umzugehen.

4. CSS

In jQuery können Sie CSS seitenweise angeben. Wenn Sie beispielsweise alle Schaltflächen auf einer Seite gestalten möchten, können Sie dies tun, indem Sie auf das Schaltflächenelement abzielen:

Taste {
 Hintergrundfarbe: rot;
 Farbe weiß;
}

In React können Sie CSS auf verschiedene Arten verwenden. Eine Möglichkeit besteht darin, Inline-Stile zu verwenden. Wenn Sie beispielsweise eine Schaltfläche formatieren möchten, können Sie dies tun, indem Sie dem Element das style-Attribut hinzufügen:

<Schaltflächenstil = {{Hintergrundfarbe: 'Rot', Farbe: 'Weiss'}}>
 Klick mich!
</button>

Eine andere Möglichkeit, React-Komponenten zu gestalten, ist die Verwendung globaler Stile. Globale Stile sind CSS-Regeln, die Sie außerhalb einer Komponente definieren und auf alle Komponenten in der Anwendung anwenden. Dazu können Sie eine CSS-in-JS-Bibliothek wie styled-components verwenden:

importieren gestylt aus 'gestylte Komponenten';
konst Button = styled.button`
 Hintergrundfarbe: rot;
 Farbe weiß;
`;

Es gibt keine richtige oder falsche Wahl zwischen Inline-Stilen und globalen Stilen. Es hängt wirklich von Ihren Anforderungen ab. Im Allgemeinen sind Inline-Stile für kleine Projekte einfacher zu verwenden. Für größere Projekte sind globale Stile eine bessere Option.

Stellen Sie Ihre React-App ganz einfach bereit

Einer der wichtigsten Vorteile von React ist, dass es sehr einfach ist, Ihre React-App bereitzustellen. Sie können React auf jedem statischen Webserver bereitstellen. Sie müssen nur Ihren Code mit einem Tool wie Webpack kompilieren und dann die resultierende bundle.js-Datei auf Ihrem Webserver ablegen.

Sie können Ihre React-App auch kostenlos auf GitHub-Seiten hosten.