ReactJS - DOM: Ein Anfängerguide

Hallo da draußen, zukünftige React-Entwickler! Ich freue mich, euch auf eine Reise durch die faszinierende Welt von ReactJS und das Document Object Model (DOM) mitzunehmen. Als jemand, der seit Jahren Informatik unterrichtet, habe ich viele Schüler gesehen, die initially mit diesen Konzepten zu kämpfen hatten, aber glaubt mir, wenn ihr es einmal verstanden habt, ist es wie das Fahrrad fahren - ihr werdet es nie vergessen!

Was ist das DOM?

Bevor wir uns der Beziehung von React zum DOM zuwenden, lassen Sie uns mit den Grundlagen beginnen. Stellt euch das DOM als Familiengeschichte eurer Webseite vor. Jedes Element auf eurer Seite - sei es ein Knopf, ein Absatz oder ein Bild - ist wie ein Familienmitglied in diesem Baum. Genau wie ihr die Frisur oder Kleidung eines Familienmitglieds ändern könnt, könnt ihr diese DOM-Elemente manipulieren, um das Aussehen und Verhalten eurer Webseite zu ändern.

ReactDOM: Die Brücke zwischen React und dem Browser

Nun lassen Sie uns unseren Starspieler vorstellen: ReactDOM. Stellt euch ReactDOM als äußerst effizienten persönlichen Assistenten für React vor. Seine Hauptaufgabe ist es, die von euch erstellten React-Komponenten in etwas zu übersetzen, das der Browser verstehen und darstellen kann.

Verwendung von ReactDOM

Lassen Sie uns mit einem einfachen Beispiel beginnen:

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

const element = <h1>Hello, React World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

In diesem Code-Schnipsel sagen wir ReactDOM, dass es unser element (eine einfache h1-Überschrift) in das DOM-Element mit der ID 'root' rendern soll. Es ist, als würde man seinem Assistenten sagen: "Kannst du dieses Bild (unser React-Element) in diesen Rahmen (das 'root'-Element) an der Wand platzieren?"

ReactDOMServer: React auf dem Server rendern

Als nächstes haben wir ReactDOMServer. Dies ist wie ReactDOM Zwilling, der im Hintergrund arbeitet. Während ReactDOM sich um Dinge im Browser kümmert, hilft ReactDOMServer uns dabei, React-Komponenten auf dem Server zu rendern.

Hier ist ein einfaches Beispiel:

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

Dieser Code nimmt unsere gesamte App-Komponente und verwandelt sie in eine HTML-Zeichenkette. Es ist, als würde man ein Polaroid von seiner React-App machen - ein Schnappschuss, der schnell an den Browser gesendet werden kann.

ReactDOMClient: Der Neue im Block

Mit React 18 wurden wir mit ReactDOMClient bekannt gemacht. Dies ist wie der jüngere, energiegeladenere Bruder von ReactDOM, der sich um Leistung und neue Funktionen kümmert.

So könntet ihr es verwenden:

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

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

Anstatt unsere App direkt zu rendern, erstellen wir zuerst eine 'root'. Diese Wurzel ist wie ein spezieller Topf, in den wir unsere React-App pflanzen und sie mit allen neuen Funktionen von React 18 wachsen sehen können.

Verwendung von ReactDOMClient

Lassen Sie uns tiefer einsteigen, wie wir ReactDOMClient in einer realen Welt-Szene verwenden können:

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

function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Du hast {count} Mal geklickt</p>
<button onClick={() => setCount(count + 1)}>
Klicke mich
</button>
</div>
);
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

In diesem Beispiel erstellen wir eine einfache.Counter-App. Die Funktion createRoot richtet unsere React-18-Umgebung ein, allowing uns, alle neuen Funktionen wie automatisches Batching für bessere Leistung zu verwenden.

Vergleichen der ReactDOM-Methoden

Um euch zu helfen, die verschiedenen Methoden zu verstehen, die wir besprochen haben, hier ist eine praktische Tabelle:

Methode	Verwendet in	Zweck
ReactDOM.render()	Browser	Rendered React-Elemente in den DOM
ReactDOMServer.renderToString()	Server	Rendered React-Komponenten in HTML-Zeichenketten
ReactDOMClient.createRoot()	Browser	Erstellt eine Wurzel für React-18-Funktionen
root.render()	Browser	Rendered Komponenten in die erstellte Wurzel

Schlussfolgerung

Und hier habt ihr es, Leute! Wir haben die React-DOM-Landschaft durchquert, von dem klassischen ReactDOM über den serverseitigen ReactDOMServer bis hin zum glänzenden neuen ReactDOMClient. Denkt daran, dass wie beim Lernen jeder neuen Sprache (programmieren oder andere) Übung macht den Meister. Habt keine Angst, diese Konzepte in euren eigenen Projekten auszuprobieren.

Wie ich meinen Schülern immer sage, Coding ist wie Kochen - man macht vielleicht am Anfang einen Schlamassel, aber mit der Zeit und Übung werdet ihr köstliche React-Anwendungen zaubern können! Also, lasst euch an den Code ran und viel Spaß beim React-ing!

Credits: Image by storyset