ReactJS-Tutorial für Anfänger

Was ist ReactJS?

ReactJS ist ein Open-Source-Frontend JavaSkriptbibliothek zum Erstellen von Benutzeroberflächen. ReactJS Es wird von Meta (ehemals Facebook) und einer Community aus einzelnen Entwicklern und Unternehmen betreut. Es dient häufig als Basis für die Entwicklung von Single-Page-Anwendungen und mobilen Apps. Es ist sehr benutzerfreundlich und ermöglicht die Erstellung wiederverwendbarer UI-Komponenten.

Bevor Sie Ihre erste Zeile React-Code schreiben, ist es hilfreich zu wissen, was die Bibliothek von herkömmlichem Code unterscheidet. JavaSkript. Im nächsten Abschnitt werden die Kernfunktionen erläutert.

Funktionen von ReactJS

JSX: JSX ist eine Erweiterung von JavaSkript. Obwohl die Verwendung von JSX in React nicht zwingend erforderlich ist, gehört es zu den nützlichen und einfach zu verwendenden Funktionen.

KomponentenKomponenten sind wie reine JavaSkriptfunktionen vereinfachen den Code, indem sie die Logik in wiederverwendbaren, unabhängigen Code aufteilen. Komponenten können als Funktionen oder als Klassen verwendet werden. Komponenten verfügen über Zustand (State) und Eigenschaften (Props), was die Entwicklung erleichtert. Innerhalb einer Klassenkomponente werden Zustand und Eigenschaften verwaltet.

Virtuelles DOM: React erstellt ein virtuelles DOM, also einen Datenstruktur-Cache im Arbeitsspeicher. Nur die endgültigen Änderungen werden später im DOM des Browsers aktualisiert, wodurch das Rendering weiterhin schnell erfolgt.

JavaSkriptausdrücke: JS-Ausdrücke können in den JSX-Dateien mithilfe von geschweiften Klammern verwendet werden, zum Beispiel {}.

Vorteile von ReactJS

Hier sind wichtige Vorteile der Verwendung von ReactJS:

• ReactJS verwendet ein virtuelles DOM mit einem In-Memory-Datenstrukturcache, und nur die endgültigen Änderungen werden im DOM des Browsers aktualisiert. Dadurch wird die Anwendung beschleunigt.
• Mit der React-Komponentenfunktion können Sie Komponenten Ihrer Wahl erstellen. Diese Komponenten sind wiederverwendbar und erleichtern die Code-Wartung.
• ReactJS ist eine Open-Source-Software. JavaSkriptbibliothek, daher ist der Einstieg einfach.
• ReactJS erfreute sich innerhalb kurzer Zeit großer Beliebtheit und ist die Grundlage für Produkte wie Facebook und InstagramEs wird von vielen bekannten Unternehmen wie Apple verwendet. Netflix, usw.
• Meta pflegt die ReactJS-Bibliothek, sodass diese gut gewartet und stets auf dem neuesten Stand gehalten wird.
• Mit ReactJS kann eine umfassende Benutzeroberfläche sowohl für Desktop- als auch für mobile Apps entwickelt werden.
• Einfach zu debuggen und zu testen, da der Großteil der Codierung in erfolgt JavaSkript statt in HTML.

Nachteile von ReactJS

Hier sind die Nachteile der Verwendung von ReactJS:

• Der Großteil des Codes ist in JSX geschrieben, d. h. HTML und CSS sind Teil des Codes. JavaSkript. Das kann ziemlich verwirrend sein, da die meisten anderen Frameworks kee bevorzugen.ping HTML separat vom JavaSkriptcode.
• Die Dateigröße von ReactJS ist vergleichsweise groß.

Nachdem Sie die Vor- und Nachteile kennen, können Sie React einrichten. Am schnellsten geht es direkt über ein CDN, was wir zuerst behandeln; npm-basierte Setups für reale Projekte folgen im Anschluss.

Verwenden von ReactJS von CDN

Um mit React zu arbeiten, müssen wir zunächst ReactJS zu unserer Seite hinzufügen. Mit dem CDN können Sie ganz einfach mit ReactJS loslegen. JavaSkriptdateien, wie unten dargestellt.

Besuchen Sie die Website der alten React-Dokumentation, um die CDN-Links zu erhalten, z. B. https://legacy.reactjs.org/docs/cdn-links.htmlSie erhalten dann die benötigten Dateien, wie im folgenden Bild erläutert.

Für Entwickler

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Für Prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Ersetzen Version Geben Sie die gewünschte React-Version für react.development.js und react-dom.development.js an. Auf dieser Seite verwenden wir Version 16, daher funktionieren die folgenden Beispiele unverändert.

Falls Sie die CDN-Dateien verwenden möchten, stellen Sie sicher, dass Sie das `crossorigin`-Attribut beibehalten, um Probleme mit domänenübergreifenden Zugriffen zu vermeiden. ReactJS-Code kann nicht direkt im Browser ausgeführt werden und muss mit Babel transpiliert werden. JavaDas Skript wird im Browser ausgeführt.

Hier ist das BabelJS-Skript, das verwendet werden kann:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Hier ist ein funktionierendes ReactJS-Beispiel, das CDN-Dateien und das BabelJS-Skript verwendet.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Ausgang:

Im nächsten Kapitel gehen wir auf die Details des Codes ein; hier betrachten wir zunächst die Funktionsweise mit CDN-Dateien. Die direkte Verwendung des Babel-Skripts ist keine gute Vorgehensweise und sollte von Einsteigern vorerst nur zum Erlernen von ReactJS genutzt werden. Im Produktivbetrieb muss React über das npm-Paket installiert werden.

Verwendung von NPM-Paketen

Stellen Sie sicher, dass Node.js installiert ist. Falls nicht, folgen Sie diesem Tutorial für Node.js (https://www.guru99.com/node-js-tutorial.html) Installation.

Sobald Node.js installiert ist, erstellen Sie einen Ordner. Reaktionsprojekt/.

Um mit der Projekteinrichtung zu beginnen, führen Sie den Befehl aus npm-Init.

So sieht die Ordnerstruktur aus:

reactproj\
package.json

Jetzt installieren wir die Pakete, die wir benötigen.

Hier ist die Liste der Pakete für ReactJS. Wir legen React auf Version 16 fest, damit… ReactDOM.render Die Beispiele auf dieser Seite funktionieren genau wie gezeigt:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Öffnen Sie die Eingabeaufforderung und führen Sie die oben genannten Befehle im Ordner reactproj/ aus.

Erstellen Sie einen Ordner src / Hier wird der gesamte JavaScript-Code abgelegt. Der gesamte Code für das ReactJS-Projekt befindet sich im Ordner `src/`. Erstellen Sie eine Datei namens `index.js` und importieren Sie `react` und `react-dom`, wie unten gezeigt.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Wir haben den grundlegenden Code für ReactJS geschrieben. Die Details dazu erklären wir im nächsten Kapitel. Wir möchten Folgendes anzeigen: Hallo, von Guru99 TutorialsDasselbe gilt für das DOM-Element mit der ID „root“. Es stammt aus der Datei index.html, der Startdatei, wie unten dargestellt.

Erstellen Sie einen Ordner public/ und fügen Sie die Datei index.html wie unten gezeigt darin ein.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Das Paket react-scripts übernimmt das Kompilieren des Codes und das Starten des Servers, um die HTML-Datei (z. B. index.html) anzuzeigen. Sie müssen den Befehl in der package.json hinzufügen, der react-scripts zum Kompilieren des Codes und zum Starten des Servers verwendet, wie unten gezeigt:

 "scripts": {
    "start": "react-scripts start"
  }

Nach der Installation aller Pakete und dem Hinzufügen des obigen Befehls lautet die endgültige package.json wie folgt:

Paket.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Um mit dem Testen von ReactJS zu beginnen, führen Sie folgenden Befehl aus:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Es wird den Browser mit der URL http://localhost:3000/ wie unten dargestellt:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Wir werden denselben Prozess verwenden, um Folgendes auszuführen: JavaAuch in den nächsten Kapiteln werden Skriptdateien verwendet. Fügen Sie alle Ihre .js- und .jsx-Dateien in den Ordner „src/“ ein. Die Dateistruktur sieht dann wie folgt aus:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

So erstellen Sie Ihr erstes React-Projekt-Setup

In diesem ReactJS-Tutorial finden Sie eine Schritt-für-Schritt-Anleitung für den Einstieg in die erste React-Anwendung.

Schritt 1) Importieren Sie die Reaktionspakete.
1. Um mit ReactJS zu beginnen, müssen wir zunächst die Reaktionspakete wie folgt importieren.

import React from 'react';
import ReactDOM from 'react-dom';

2. Speichern Sie die Datei als index.js im Ordner src/.

Schritt 2) Schreiben Sie einfach Code.
Wir werden in diesem Tutorial React JS einen einfachen Code schreiben, in dem wir die Nachricht anzeigen „Hallo, von Guru99 Tutorials!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render wird hinzugefügt Fügen Sie das Tag dem Element mit der ID „root“ hinzu. Hier ist die HTML-Datei, die wir haben:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Schritt 3) Kompilieren Sie die Code.

Als nächstes müssen wir in diesem React.js-Tutorial den Code kompilieren, um die Ausgabe im Browser zu erhalten.

Hier ist die Ordnerstruktur:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Wir haben die Befehle zum Kompilieren der endgültigen Datei in package.json wie folgt hinzugefügt:

"scripts": {
    "start": "react-scripts start"
  },

Um die endgültige Datei zu kompilieren, führen Sie folgenden Befehl aus:

npm run start

Wenn Sie den obigen Befehl ausführen, werden die Dateien kompiliert und Sie werden über eventuelle Fehler benachrichtigt. Falls alles in Ordnung ist, wird der Browser geöffnet und die Seite unter [URL] angezeigt. http://localhost:3000/

Befehl: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Schritt 4) Überprüfen Sie die Ausgabe.
Das URL http://localhost:3000 wird sich nach der Kompilierung des Codes im Browser öffnen, wie unten dargestellt:

Wie man React mit Vite einrichtet (Moderner Ansatz)

Die oben beschriebene Konfiguration von react-scripts stammt von Create React App (CRA), das jahrelang der Standard für React-Einsteiger war. Das React-Team hat Create React App im Februar 2025 offiziell eingestellt, daher sollten neue Projekte stattdessen ein modernes Build-Tool verwenden. Die beliebteste Wahl ist derzeit … Schraube, wodurch ein schnellerer Start und kleinere Builds entstehen.

So erstellen Sie ein neues React-Projekt mit Vite:

Schritt 1) Führen Sie den Scaffolding-Befehl in Ihrem Terminal aus:

npm create vite@latest my-react-app -- --template react

Schritt 2) Wechseln Sie in den Ordner und installieren Sie die Abhängigkeiten:

cd my-react-app
npm install

Schritt 3) Starten Sie den Entwicklungsserver:

npm run dev

Vite bietet die App an unter http://localhost:5173/ Standardmäßig wird die Datei automatisch neu geladen, sobald Sie sie speichern.

Wichtigste Unterschiede zur älteren Darstellung auf dieser Seite:

• Die Einstiegsdatei ist src/main.jsx statt src/index.js.
• Es installiert die neueste Version von React, die Folgendes verwendet: createRoot statt ReactDOM.render.
• Die Datei index.html befindet sich im Projektverzeichnis, nicht im Verzeichnis public/.
• Builds werden erstellt mit npm run build in einen dist/-Ordner.

Für Full-Stack-Anforderungen wie Routing und serverseitiges Rendering empfiehlt das React-Team außerdem Frameworks wie Next.jsAlles, was Sie in den folgenden Kapiteln lernen – JSX, Komponenten, Zustand und Eigenschaften – gilt unverändert auch in einem Vite- oder Next.js-Projekt.

Was ist JSX?

JSX ist eine Erweiterung von JavaSkript. Es handelt sich um ein Vorlagenskript, mit dem Sie HTML und ... verwenden können. JavaDas Drehbuch zusammen schreiben.

Hier ist ein einfaches Beispiel für einen JSX-Code.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Warum brauchen wir JSX in React?

Für eine Benutzeroberfläche benötigen wir HTML, und jedes Element im DOM hat Ereignisse, die behandelt werden müssen, Zustandsänderungen usw.

Im Fall von React ermöglicht es uns die Verwendung von HTML und JavaDas Skript befindet sich in derselben Datei und kümmert sich effizient um die Zustandsänderungen im DOM.

Ausdrücke in JSX

Hier ist ein einfaches Beispiel für die Verwendung von Ausdrücken in JSX.

In früheren ReactJS-Beispielen hatten wir etwa Folgendes geschrieben:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Wir werden nun den obigen Code ändern, um Ausdrücke hinzuzufügen. Ausdrücke werden in geschweiften Klammern {} verwendet und zur Laufzeit expandiert. Ausdrücke in React sind dasselbe wie JavaSkriptausdrücke.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Lassen Sie uns nun dasselbe im Browser testen.

Wie im obigen Screenshot zu sehen ist, wird der {display}-Ausdruck nicht ersetzt. React weiß nicht, wie es mit Ausdrücken in .js-Dateien umgehen soll.

Lassen Sie uns nun Änderungen hinzufügen und eine .jsx-Datei erstellen, wie unten gezeigt:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Wir haben den erforderlichen Code hinzugefügt und werden die Datei test.jsx in index.js verwenden. Wir möchten, dass h1tag Die Variable soll innerhalb von index.js verwendet werden, daher wird sie wie oben in test.jsx gezeigt exportiert.

Hier ist der geänderte Code in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Um die Datei test.jsx in index.js verwenden zu können, müssen wir sie zuerst wie unten gezeigt importieren:

import h1tag from './test.jsx';

Wir können den h1tag jetzt im ReactDOM.render verwenden, wie unten gezeigt:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Hier ist die Ausgabe, wenn wir dasselbe im Browser überprüfen:

Was sind Komponenten in ReactJS?

Komponenten sind wie reine JavaSkriptfunktionen, die die Codierung vereinfachen, indem sie die Logik in wiederverwendbaren, unabhängigen Code aufteilen.

Komponenten als Funktionen

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Wir haben eine Funktion namens erstellt Hallo Das gibt ein h1-Tag zurück, wie oben gezeigt. Der Name der Funktion fungiert als Element, wie unten gezeigt:

const Hello_comp = <Hello />;
export default Hello_comp;

Die Komponente Hallo wird als HTML-Tag verwendet, d.h. , zugeordnet dem Hallo_comp Variable, und dasselbe wird mit export exportiert.

Lassen Sie uns diese Komponente nun in der Datei index.js wie unten gezeigt verwenden:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Hier ist die Ausgabe im Browser:

Klasse als Komponente

Hier ist ein ReactJS-Beispiel, das eine Klasse als Komponente verwendet.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Wir können die Hello-Komponente in der index.js-Datei wie folgt verwenden:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Die Komponente Hello wird als HTML-Tag verwendet, d.h. .

Hier ist die Ausgabe desselben.

Klassenkomponenten vs. Funktionskomponenten und Hooks

Sie haben nun beide Möglichkeiten kennengelernt, eine Komponente zu schreiben. Welche sollten Sie also verwenden? Diese Seite behandelt Klassenkomponenten, da sie Zustands- und Lebenszykluskonzepte explizit darstellen. Dies ist besonders für Anfänger wertvoll und findet sich auch heute noch in älteren Codebasen. Seit React 16.8 jedoch Hooks eingeführt hat, können auch Funktionskomponenten Zustände verwalten und sind für alle neuen Codes die empfohlene Vorgehensweise.

Aspekt	Klassenkomponente	Funktionskomponente mit Hooks
Staat	this.state und this.setState()	useState() Hook
Lebenszyklus	componentDidMount, componentDidUpdate, componentWillUnmount	Der useEffect()-Hook deckt alle drei ab
Syntax	Mehr Boilerplate-Code (Konstruktor, Bindung, this)	Kürzer, kein dieses Schlüsselwort
Status	Unterstützt, Legacy-Stil	Empfohlen für neuen Code

Hier ist das Zustandsbeispiel von dieser Seite, neu geschrieben mit dem useState-Hook:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Beide Versionen erzeugen die gleiche Ausgabe. Lernen Sie die in den folgenden Kapiteln verwendete Klassensyntax und üben Sie anschließend, jedes Beispiel in Hooks umzuwandeln.

Was ist ein Zustand in ReactJS?

Ein Staat ist ein JavaDas Script-Objekt, ähnlich wie Props, enthält Daten, die beim Rendern in ReactJS verwendet werden. Die Zustandsdaten sind ein privates Objekt und werden innerhalb von Komponenten innerhalb einer Klasse verwendet.

Beispiel für einen Staat

Hier ist ein funktionierendes Beispiel, wie man den Zustand innerhalb einer Klasse verwendet.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Das bekommen wir, wenn wir es im Browser testen:

Was sind Requisiten in ReactJS?

Props sind Eigenschaften, die innerhalb einer Komponente verwendet werden. Sie fungieren als globale Objekte oder Variablen, die innerhalb der Komponente verwendet werden können.

Requisiten zur Funktionskomponente

Hier ist ein Beispiel für die Übergabe von Requisiten an eine Funktionskomponente.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Wie oben gezeigt, haben wir Folgendes hinzugefügt: msg dem zuschreiben Komponente. Auf dieselbe kann zugegriffen werden als Hilfsmittel innerhalb der Hello-Funktion, die ein Objekt ist, das Folgendes enthält: msg Attributdetails, und dasselbe wird als Ausdruck verwendet.

Die Komponente wird in index.js wie folgt verwendet:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Hier ist die Ausgabe im Browser:

Requisiten zur Klassenkomponente

Um auf die Eigenschaften einer Klasse zuzugreifen, können wir folgendermaßen vorgehen:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Das msg Das Attribut wird wie folgt an die Komponente in index.js übergeben:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Dies ist die Ausgabe im Browser:

Überprüfen Sie auch: - AngularJS-Tutorial für Anfänger: Lernen Sie AngularJS Schritt für Schritt

Lebenszyklus einer Komponente

Nachdem wir Komponenten, Zustand und Eigenschaften behandelt haben, geht es im nächsten Schritt darum zu verstehen, wann React die Methoden Ihrer Komponente aufruft. Der Lebenszyklus einer Komponente ist in die Phasen Initialisierung, Einbinden, Aktualisieren und Entfernen unterteilt.

Hier finden Sie eine detaillierte Erklärung der einzelnen Schritte.

Eine Komponente in ReactJS durchläuft folgende Phasen:

Initialisierung: Dies ist die erste Phase des Komponentenlebenszyklus.

Hier werden die Standard-Requisiten und der Status auf der Anfangsebene angezeigt.

MontageIn dieser Phase wird die Komponente innerhalb des DOM gerendert. Im Mounting-Zustand stehen uns die folgenden Methoden zur Verfügung:

• render(): Diese Methode steht für alle erstellten Komponenten zur Verfügung. Sie gibt den HTML-Knoten zurück.
• componentDidMount(): Diese Methode wird unmittelbar nach dem Hinzufügen der Komponente zum DOM aufgerufen.

UpdateIn diesem Zustand interagiert der Benutzer mit dem DOM, wodurch dieser aktualisiert wird. Wenn Sie beispielsweise etwas in das Textfeld eingeben, werden die Zustandseigenschaften aktualisiert.

Im Aktualisierungszustand stehen folgende Methoden zur Verfügung:

• shouldComponentUpdate(): Diese Methode wird vor dem erneuten Rendern aufgerufen und ermöglicht es Ihnen zu entscheiden, ob die Komponente aktualisiert werden soll. Die Rückgabe von true führt zu einem erneuten Rendern der Komponente.
• componentDidUpdate(): Wird aufgerufen, nachdem die Komponente aktualisiert wurde.

Demontage: Dieser Zustand tritt in Erscheinung, wenn die Komponente nicht benötigt wird oder entfernt wird.

Im Unmount-Zustand steht folgende Methode zur Verfügung:

• componentWillUnmount(): wird aufgerufen, kurz bevor die Komponente entfernt oder zerstört wird.

Anwendungsbeispiel für Lebenszyklusmethoden

Hier ist ein funktionierendes Beispiel, das die in jeder Phase aufgerufenen Methoden zeigt.

Beispiel: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Wenn Sie die Ausgabe im Browser überprüfen:

In der Browserkonsole wird Folgendes angezeigt:

Wenn der Benutzer in das Textfeld eingibt:

In der Konsole werden folgende Meldungen angezeigt:

Nachdem Sie nun wissen, wann eine Komponente gerendert und aktualisiert wird, wollen wir Zustand und Ereignisse auf einen praktischen Anwendungsfall anwenden: die Verarbeitung von Benutzereingaben über Formulare.

Arbeiten mit Formularen

In ReactJS werden HTML-Eingabeelemente wie , , und <select /> haben ihren eigenen Zustand und müssen bei Benutzerinteraktionen mit der Methode setState() aktualisiert werden.

In diesem Kapitel werden wir sehen, wie man in ReactJS mit Formularen arbeitet.

Hier ist ein funktionierendes Beispiel:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Für die Eingabefelder müssen wir den Zustand beibehalten, daher bietet React eine spezielle Methode namens setStateDies hilft dabei, den Zustand bei Änderungen aufrechtzuerhalten. In einer realen Anwendung wird dies auch so bezeichnet. event.preventDefault() innerhalb von formSubmit, um zu verhindern, dass der Browser die Seite beim Absenden neu lädt.

Wir haben die Ereignisse onChange und onClick für das Textfeld und die Schaltfläche „Absenden“ verwendet. Wenn der Benutzer in das Textfeld tippt, wird das Ereignis onChange aufgerufen und das Namensfeld im Zustandsobjekt aktualisiert, wie unten dargestellt:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Die Ausgabe im Browser sieht wie folgt aus:

Schritt 1) Geben Sie Ihren Namen in das Textfeld ein:

Schritt 2) Klicken Sie auf die Schaltfläche „Absenden“:

Arbeiten mit Ereignissen in ReactJS

Formulare sind nur eine Möglichkeit der Benutzerinteraktion. Die Arbeit mit Ereignissen in ReactJS ist dieselbe wie in früheren Versionen. JavaSkript. Sie können alle Ereignisbehandler verwenden, die in JavaSkript. Die Methode setState() wird verwendet, um den Zustand zu aktualisieren, wenn der Benutzer mit einem beliebigen HTML-Element interagiert.

Hier ist ein funktionierendes Beispiel für die Verwendung von Ereignissen in ReactJS.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Für die Eingabefelder müssen wir den Zustand beibehalten, dafür bietet React die entsprechende Funktion. setState Methode, die dabei hilft, den Zustand bei Änderungen aufrechtzuerhalten.

Wir haben die Ereignisse genutzt onChange und onClick auf dem Textfeld und dem Button. Wenn der Benutzer in das Textfeld tippt, onChange Das Ereignis wird ausgelöst und das Namensfeld im Zustandsobjekt wird aktualisiert, wie unten dargestellt:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Hier ist die Ausgabe im Browser:

Wenn ein Benutzer den Namen eingibt:

Wenn der Benutzer auf die Schaltfläche „Hier klicken“ klickt:

Arbeiten mit Inline-CSS in ReactJS

Sobald Ihre Komponenten Daten und Ereignisse verarbeiten, besteht der letzte Schritt darin, sie zu gestalten. Wir sehen uns ein funktionierendes Beispiel an, um Inline-CSS in ReactJS zu verstehen.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Ich habe dem h1-Tag die Farbe 'rot' hinzugefügt.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Die Ausgabe im Browser sieht wie folgt aus:

Sie können ein Objekt mit dem gewünschten Stil für das Element erstellen und einen Ausdruck verwenden, um den Stil hinzuzufügen, wie im obigen Beispiel gezeigt.

Arbeiten mit externem CSS in ReactJS

Wir erstellen nun eine externe CSS-Datei. Dazu erstellen wir einen Ordner namens css/ und fügen die Datei style.css hinein.

style.css

.h1tag {
color:red;
}

Fügen Sie die style.css zu Ihrer index.html-Datei hinzu

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Fügen wir nun die Klasse dem h1-Tag in der .jsx-Datei hinzu.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Dem Attribut className werden die Klassendetails zugewiesen. Beachten Sie, dass JSX Folgendes verwendet: Klassenname anstelle des HTML-Klassenattributs, da „class“ ein reserviertes Schlüsselwort ist in JavaSkript. Jetzt testen wir es im Browser.

Das sehen Sie, wenn Sie das h1-Tag im Browser untersuchen:

Sie können sehen, dass die Klasse „h1tag“ erfolgreich zum h1-Tag hinzugefügt wurde.

Warum ReactDOM.render durch createRoot ersetzt wurde

Alle Beispiele auf dieser Seite binden die Anwendung mit `ReactDOM.render` ein, was für React 16 und 17, die Versionen dieses Kurses, korrekt ist. React 18, veröffentlicht im März 2022, ersetzte diesen Einstiegspunkt durch die `createRoot`-API, und React 19 entfernte `ReactDOM.render` vollständig. Der Grund dafür ist die Parallelverarbeitung: `createRoot` ermöglicht es React, mehrere Versionen der Benutzeroberfläche gleichzeitig vorzubereiten, das Rendering mit niedriger Priorität zu unterbrechen und die UI-Versionen übersichtlich zu halten.ping und Animationen laufen flüssig. Funktionen wie automatisches Batching, useTransition und Suspense-basiertes Streaming hängen alle davon ab.

Die moderne Entsprechung der auf dieser Seite verwendeten index.js sieht folgendermaßen aus:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Alles andere, was Sie hier gelernt haben – Komponenten, JSX, Zustand, Eigenschaften und Ereignisse – funktioniert nach dieser einzeiligen Änderung am Einstiegspunkt weiterhin genauso. Versionsunterschiede wie dieser treten häufig auf. React JS InterviewfragenDaher lohnt es sich, beide APIs zu verstehen.

FAQs

Überprüfen Sie auch: - Die 70 wichtigsten Fragen und Antworten zum React-Interview (aktualisiert)