Was ist React? Wichtige Konzepte und Unterschiede zu jQuery

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen (UI). Während sich jQuery darauf konzentriert, Seitenelemente direkt auszuwählen und zu ändern, konzentriert sich React darauf, die Oberfläche für einen bestimmten Zustand Ihrer Daten zu beschreiben. Das Verständnis von Komponenten und State macht es einfacher, die beiden Werkzeuge zu vergleichen und zu entscheiden, wann man sie verwendet.

Was ist React?

In React bauen Sie Teile einer Benutzeroberfläche, wie Buttons, Suchfelder und Artikelkarten, als Komponenten. Jede Komponente vereint ihr Aussehen und das zugehörige Verhalten. Sie können Komponenten zu einer Seite kombinieren und eine Karte wiederverwenden, indem Sie für jeden Artikel einen anderen Titel und Autor angeben.

React verwendet JavaScript, und HTML und CSS bleiben nützlich, um die Struktur und das Aussehen einer Weboberfläche zu verstehen. Die Installation von React stellt nicht automatisch einen Login-Server, eine Datenbank oder die Navigation zwischen URLs bereit. Sie müssen die anderen Teile Ihrer Anwendung weiterhin auswählen und implementieren. Dieser Artikel konzentriert sich auf eine grundlegende Benutzeroberfläche, die im Browser läuft; der offizielle React Quick Start stellt seine Bausteine vor.

Die Kernkonzepte von React

Komponenten: Einheiten von Erscheinung und Verhalten

Eine Funktionskomponente ist eine JavaScript-Funktion, die den anzuzeigenden Inhalt zurückgibt. Die Namen der von Ihnen definierten Komponenten beginnen mit einem Großbuchstaben, wie zum Beispiel ProductCard, während HTML-Elemente wie button Kleinschreibungen verwenden. Die folgende Komponente definiert eine Karte einmal, sodass Sie deren Struktur mit verschiedenen Produktdaten wiederverwenden können.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX: Ausdrücken von Markup innerhalb von JavaScript

JSX ist eine Syntaxerweiterung, die es Ihnen ermöglicht, HTML-ähnliches Markup in einer JavaScript-Datei zu schreiben. Der obenstehende Abschnitt <article> ist JSX. Geschweifte Klammern ermöglichen es Ihnen, JavaScript-Ausdrücke wie name und price einzufügen. Das Einfügen dieser Komponente in eine gewöhnliche HTML-Datei reicht nicht aus, um sie auszuführen.

JSX verwendet className anstelle von class und erfordert explizit geschlossene Tags, wie <img />. Mehrere oberste Elemente müssen in einem übergeordneten Element oder einem Fragment eingeschlossen werden. JSX ist häufig in einführenden Beispielen und Projekten zu finden, obwohl React auch ohne JSX verwendet werden kann. Siehe Regeln von React für das Schreiben von JSX für die Syntax.

Props: Daten der übergeordneten Komponente

Props, kurz für properties (Eigenschaften), sind Werte, die eine übergeordnete Komponente an eine untergeordnete weitergibt. Sie ermöglichen es, dass dieselbe Karte verschiedene Namen und Preise anzeigt oder derselbe Button unterschiedliche Beschriftungen anzeigt. Eine Prop kann einen String, eine Zahl, ein Objekt oder eine Funktion enthalten. Hier ist ein illustratives Produkt, das in koreanischen Won (KRW) bepreist ist:

<ProductCard name="Beginner keyboard" price={35000} />

Eine untergeordnete Komponente liest ihre Props, um seine Ausgabe zu erstellen. Behandeln Sie Props als schreibgeschützt: Wenn ihre Werte sich ändern müssen, aktualisieren Sie die Daten in der übergeordneten Komponente, damit sie neue Werte übergibt. Eine übergeordnete Komponente kann auch eine Rückruffunktion übergeben, die die untergeordnete Komponente nach einer Benutzeraktion aufrufen kann. Das Übergeben von Props an eine Komponente erklärt diesen Datenfluss.

State: Werte merken, die sich ändern

State ist Information, die eine Komponente sich merken muss, wie zum Beispiel einen Eingabewert, eine Auswahl oder eine Klickanzahl. Der Aufruf von useState gibt den aktuellen Wert und eine Funktion zu seiner Aktualisierung zurück. useState ist ein Hook, eine Funktion, die einer Komponente Zugriff auf React-Funktionen gibt; rufen Sie sie auf der obersten Ebene der Komponente auf.

const [count, setCount] = useState(0);

Der Anfangswert ist 0, count ist der aktuelle Zustand und setCount fordert ein Update an. Das Ändern einer gewöhnlichen Variablen allein sagt React nicht, die Oberfläche zu aktualisieren. Werte, die die Anzeige steuern, benötigen eine geeignete Zustandsstruktur. State: das Gedächtnis einer Komponente erklärt, wie sich der Zustand von einer lokalen Variablen unterscheidet.

Wie aktualisiert React die Benutzeroberfläche?

In einem Zähler fordert das Klicken auf eine Schaltfläche ein Zustandsupdate an. React berechnet dann die Ausgabe für diesen Zustand und wendet die notwendigen Änderungen am DOM an. Das Document Object Model (DOM) ist die objektbasierte Darstellung eines Dokuments durch den Browser, einschließlich seiner Elemente und Texte.

1. Benutzeraktion: Ein Klick auf eine Schaltfläche führt einen Ereignishandler aus.
2. Update-Anfrage: setCount gibt den nächsten Wert an.
3. Rendern: React ruft Komponenten auf, um deren Ausgabe zu berechnen.
4. Commit: React wendet die erforderlichen Änderungen am DOM an.
5. Paint: der Browser zeichnet das Ergebnis.

Rendern bedeutet, die Ausgabe durch das Aufrufen von Komponenten zu berechnen. Es bedeutet nicht, die gesamte Seite neu zu laden oder jedes HTML-Element zu löschen und neu zu erstellen. Wenn die Ausgabe unverändert ist, kann ein Rendern keine DOM-Änderungen erfordern. Die Render- und Commit-Dokumentation von React unterscheidet diese Schritte.

Der Aufruf von setCount ersetzt nicht sofort den Wert von count innerhalb des laufenden Event-Handlers. Er fordert den Zustand für ein nachfolgendes Rendern an, und React kann mehrere Updates bündeln. Wenn der neue Wert vom vorherigen Wert abhängt, drücken Sie diese Beziehung mit einer Aktualisierungsfunktion aus:

setCount(previousCount => previousCount + 1);

Diese Funktion erhält den ausstehenden Zustand und gibt den nächsten Zustand zurück. Sie ist nützlich, wenn mehrere Inkremente anstehen, da jedes Update aus dem vorherigen Ergebnis berechnet wird. Die useState-Referenz erklärt Aktualisierungsfunktionen und ihre Anforderungen.

Was ist der Unterschied zwischen React und jQuery?

jQuery ist ebenfalls eine JavaScript-Bibliothek. Sie bietet Selektoren, Ereignisbehandlung, Änderungen von Inhalten und Stilen sowie Ajax-Anfragen. Ajax, kurz für Asynchronous JavaScript and XML, ist eine Technik zum Austausch von Daten mit einem Server, ohne die gesamte Seite neu zu laden; die ausgetauschten Daten müssen nicht XML sein. Die offizielle jQuery-Einführung listet DOM-Manipulation und Ereignisbehandlung als ihre Hauptmerkmale auf.

Betrachten Sie das Hinzufügen eines Produkts zu einem Warenkorb. Mit jQuery könnte Ihr Code ein Listenelement einfügen, die Menge und den Gesamtwert aktualisieren und die Nachricht für den leeren Warenkorb ausblenden. Mit React können Sie diese Anzeigen in Bezug auf den Warenkorb-Zustand beschreiben. Keiner der beiden Ansätze behandelt automatisch Serverfehler oder validiert alle eingehenden Daten.

React ist nicht immer schneller, und jQuery-Code ist nicht immer schwerer zu warten. Die Ergebnisse hängen von der Benutzeroberfläche, der Implementierung, dem geladenen Code und den Benutzeraktionen ab. Eine einzelne kleine Interaktion und eine Benutzeroberfläche, die viele Zustände synchronisiert, erzeugen unterschiedliche Wartungsanforderungen, daher sollten sie im eigenen Kontext bewertet werden.

Erstellen Sie denselben Zähler mit jQuery und React

Beide Beispiele beginnen bei 0 und erhöhen die Zahl jedes Mal um 1, wenn die Schaltfläche aktiviert wird. Ihre Überschriften identifizieren die Bibliothek; ihre Funktionalität und ihr Layout sind ansonsten gleichwertig. Vergleichen Sie, wo jede Implementierung die angezeigte Zahl aktualisiert. Die unten stehenden Beispiele wurden mit React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0 und Microsoft Edge 154 überprüft, einschließlich Mausklicks, Tastaturaktivierung und Seitenaktualisierungen.

jQuery-Beispiel: den Text eines ausgewählten Elements ändern

Speichern Sie den vollständigen Code unten als jquery-counter.html mit UTF-8-Codierung und öffnen Sie ihn dann in einem Browser. Er lädt jQuery 4.0.0 vom offiziellen Content Delivery Network (CDN), daher benötigen Sie eine Internetverbindung. Überprüfen Sie die offiziellen jQuery-Versionen, um die verfügbaren Versionen und Dateien zu sehen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") wählt die Schaltfläche aus, und .on("click", ...) hängt den Handler an. Nach dem Ändern der Variablen ruft der Code $("#count").text(count) auf, um den angezeigten Text zu aktualisieren. Siehe die jQuery .on()-Referenz und die jQuery .text()-Referenz für diese Operationen.

Die Skripte stehen im HTML-Code hinter dem Button, sodass die Ziel-Elemente bereits existieren, wenn dieses Beispiel ausgeführt wird. Wenn sich nichts ändert, überprüfen Sie die CDN-Anfrage und Konsolenfehler in den Entwicklertools des Browsers und vergleichen Sie die Element-IDs mit den Selektoren. Beim Anpassen an ein WordPress-Theme vermeiden Sie, die Bibliothek zweimal zu laden, und prüfen Sie, ob $ sich unter seiner noConflict-Konfiguration auf jQuery bezieht.

React-Beispiel: Zustand aktualisieren, um die Benutzeroberfläche zu ändern

Dieses Lernbeispiel verwendet das JavaScript-React-Template von Vite. Vite stellt einen Entwicklungsserver bereit und transformiert sowie baut Quellcodedateien. Node.js führt diese Werkzeuge auf Ihrem Computer aus, und npm installiert Pakete und führt Projektbefehle aus. Installieren Sie eine unterstützte Long-Term-Support-(LTS)-Version von Node.js, die die Vite-Startanforderungen erfüllt. Im Oktober 2026 listet die Anleitung Node.js 20.19+ oder 22.12+; prüfen Sie auch alle zusätzlichen Anforderungen des generierten Templates.

1. Öffnen Sie ein Terminal in dem Ordner, in dem Sie das Projekt erstellen möchten. Stellen Sie sicher, dass kein Ordner mit demselben Namen bereits existiert.
2. Führen Sie die folgenden Befehle aus, um das JavaScript-react-Template zu erstellen und seine Pakete zu installieren.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

Beim ersten Ausführen kann npm Sie bitten, die Installation des Gerüstwerkzeugs zu bestätigen. Nach der Installation ersetzen Sie den Inhalt von src/App.jsx durch den folgenden Code. label ist eine von der übergeordneten Komponente bereitgestellte Prop, und count ist ein vom Komponentenzustand gespeicherter Wert.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

Verwenden Sie den folgenden Einstiegscode in src/main.jsx. createRoot verbindet die React-Oberfläche mit dem HTML-Element mit der ID root, und index.css liefert die Stile.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Ersetzen Sie src/index.css durch das CSS unten, um dem jQuery-Beispiel zu entsprechen. Das ersetzte App.jsx importiert kein App.css, sodass die Standardkomponentenstile der Vorlage dieses Layout nicht beeinträchtigen.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

Die index.html des Projekts muss <div id="root"></div> und das Modulskript enthalten, das src/main.jsx lädt. Behalten Sie diese Struktur aus der Vite-Vorlage bei und verwenden Sie lang="en" für das englische Dokument. Starten Sie den Entwicklungsserver:

npm run dev

Öffnen Sie die lokale Adresse, die im Terminal angezeigt wird. Es ist normalerweise http://localhost:5173, aber ein anderer Port kann verwendet werden, wenn dieser Port bereits belegt ist. Stoppen Sie den Server mit Strg+C im Terminal. Wenn Änderungen nicht erscheinen, überprüfen Sie, ob Sie die Datei gespeichert haben und im richtigen Projekt arbeiten. JSX-Fehler erscheinen im Terminal oder in der Fehleranzeige des Browsers.

Der React-Handler wählt das Zahlenelement nicht aus und ersetzt dessen Text. Der JSX-Ausdruck {count} verbindet die Ausgabe mit dem Zustand, und setCount fordert einen neuen Zustand an. In beiden Beispielen setzt das Neuladen der Seite den Zähler auf 0 zurück, da keine Speicherung implementiert ist. Diese Beispiele veranschaulichen die Update-Muster; sie sind kein Leistungsmaßstab.

Wann sollte man React oder jQuery wählen?

Hinzufügen einer kleinen Funktion zu einer bestehenden Seite

Eine Schaltfläche, die ein Element oder ein kleines Menü umschaltet, kann mit jQuery unkompliziert sein. Wenn die bestehende Seite bereits von jQuery abhängt, kann das Beibehalten dieser Struktur den Umfang der Änderung verringern. Überlegen Sie auch, ob die Standard-DOM-APIs ausreichen. Eine neue Abhängigkeit ist für jede kleine Interaktion nicht notwendig.

Eine Schnittstelle mit verbundenen Zuständen erstellen

Das Komponenten- und Zustandsmodell von React ist zu berücksichtigen, wenn dieselben Daten eine Produktliste, Filter und Warenkorbsummen beeinflussen oder wenn ähnliche Schnittstellen wiederholt erscheinen. Sie müssen dennoch entscheiden, welche Komponente welchen Zustand besitzt und wann Serverdaten aktualisiert werden sollten. Die Einführung von React allein garantiert kein gutes Design.

React zu einem Teil einer bestehenden Website hinzufügen

Sie müssen die gesamte Website nicht neu aufbauen, um React zu verwenden. Sie können eine Komponente innerhalb eines bestimmten Elements einfügen und den Rest der Seite in ihrer bestehenden Form belassen. Der offizielle Leitfaden zum Hinzufügen von React zu einem bestehenden Projekt beschreibt die Einrichtung und den Umfang.

Wenn React und jQuery eine Seite teilen, geben Sie ihnen klare Grenzen für die DOM-Verwaltung. Willkürliches Hinzufügen oder Entfernen von Kindern, die von React verwaltet werden, kann das echte DOM mit Reacts Ansicht davon außer Synchronisation bringen. Ein Plugin, das das DOM manipuliert, benötigt eine Integration, die seine Initialisierung und Bereinigung innerhalb des entsprechenden Lebenszyklus verwaltet. Siehe React-Leitfaden zum Ändern des verwalteten DOM für diese Einschränkungen.

Bevor Sie ein Tool übernehmen, sollten Sie die Komplexität des Interface-Zustands, die Komponenten, die Sie wiederverwenden können, die JavaScript-Erfahrung Ihres Teams sowie die Entwicklungs- und Bereitstellungskonfiguration berücksichtigen. Eine kleine Seite mit einer vorhandenen jQuery-Abhängigkeit hat andere Anforderungen als eine neue interaktive Anwendung. Nachdem Sie die Grundlagen von HTML, CSS und JavaScript gelernt haben, bietet das Ausführen dieser Zähler einen konkreten Vergleich zwischen dem direkten Ändern von Elementen und dem Beschreiben eines Interfaces über den Zustand.