Tag JSX und Rendering-Elemente verstehen – ReactJS

Willkommen zu Tag 3 der „30 Days of ReactJS“-Challenge! Heute befassen wir uns mit einem der Kernkonzepte von React: JSX. Am Ende dieses Beitrags werden Sie ein solides Verständnis von JSX haben und wissen, wie React es zum Rendern von Elementen auf der Webseite verwendet.

Was ist JSX?
JSX steht für JavaScript XML. Es handelt sich um eine Syntaxerweiterung für JavaScript, mit der Sie HTML-ähnlichen Code in Ihre JavaScript-Dateien schreiben können. JSX erleichtert das Erstellen und Visualisieren der UI-Komponenten direkt in Ihrem Code und vereint die Logik und Struktur Ihrer App.

Wie JSX funktioniert
Wenn Sie JSX schreiben, schreiben Sie eine Mischung aus HTML und JavaScript. React nimmt dies und wandelt es in Standard-JavaScript-Objekte um, die Ihre Benutzeroberfläche darstellen.

Hier ist ein einfaches Beispiel:

const element = <h1>Hello, world!</h1>;

Diese Codezeile erstellt ein React-Element, das ein

Tag mit dem Text „Hallo Welt!“.

JSX ist kein HTML
Auch wenn JSX HTML sehr ähnlich sieht, ist es wichtig zu bedenken, dass es nicht genau dasselbe ist. JSX ist ein syntaktischer Zucker, den React zum Erstellen von Elementen verwendet.

In HTML werden beispielsweise Attribute wie „class“ verwendet, um CSS-Klassen anzuwenden:

<h1 class="header">Hello, world!</h1>

Aber in JSX müssen Sie className anstelle von class verwenden, da class ein reserviertes Schlüsselwort in JavaScript ist:

const element = <h1 className="header">Hello, world!</h1>;

Ausdrücke in JSX einbetten
Eine der leistungsstarken Funktionen von JSX besteht darin, dass Sie JavaScript-Ausdrücke direkt darin einbetten können. Dadurch können Sie Inhalte basierend auf der Logik Ihrer App dynamisch generieren.

Zum Beispiel:

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

Hier ist {name} ein JavaScript-Ausdruck, der ausgewertet und durch den Wert der Namensvariablen ersetzt wird und als „Hallo, Meraj!“ wiedergegeben wird. auf dem Bildschirm.

Elemente in React rendern
In React ist das Rendern von Elementen der Prozess der Anzeige von Inhalten auf der Seite. React-Elemente sind die Bausteine ​​der Benutzeroberfläche Ihrer App.

Um ein Element zu rendern, verwenden Sie die Methode ReactDOM.render(). Diese Methode benötigt zwei Argumente:

1. Das React-Element, das Sie rendern möchten.
2. Das DOM-Element, in dem Sie es rendern möchten.

So würden Sie das „Hallo Welt!“ wiedergeben. Beispiel:

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

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

Dieser Code weist React an, das Element innerhalb des HTML-Elements mit der ID „root“ zu rendern.

Die Kraft des virtuellen DOM von React
React verwendet ein virtuelles DOM, um Änderungen an der Benutzeroberfläche effizient zu verwalten. Wenn Sie ein Element aktualisieren, vergleicht React die neue Version mit der vorherigen und aktualisiert nur die Teile des tatsächlichen DOM, die sich geändert haben. Dieser Ansatz macht React schnell und effizient.

Beispiel aus dem wirklichen Leben: Eine Einkaufsliste
Stellen Sie sich eine Einkaufsliste auf einem Whiteboard vor. Wenn Sie ein Element ändern müssen, löschen Sie nicht die gesamte Liste und schreiben sie neu. Sie aktualisieren einfach das spezifische Element, das sich geändert hat. Das virtuelle DOM von React funktioniert ähnlich und aktualisiert nur die Teile, die geändert werden müssen.

Warum JSX verwenden?

• Lesbarer Code: Mit JSX können Sie Ihre Komponenten auf eine Weise schreiben, die leicht zu lesen und zu verstehen ist. Sie können die Struktur Ihrer Benutzeroberfläche direkt in Ihrem Code sehen.
• Weniger Code: Mit JSX können Sie weniger Code schreiben als mit React.createElement() zum manuellen Erstellen von Elementen.
• Integration mit JavaScript: Da JSX eine syntaktische Erweiterung von JavaScript ist, können Sie Logik direkt in Ihren UI-Code einbetten.

JSX mit Vite einrichten
Da wir Vite für die Entwicklung verwenden, ist die gute Nachricht, dass Vite vorkonfiguriert ist, um JSX sofort zu unterstützen. Das bedeutet, dass Sie ohne zusätzliche Einrichtung sofort mit dem Schreiben von JSX beginnen können.

Wenn Sie die Schritte von Tag 2 befolgt haben, ist Ihr Vite-Projekt bereits eingerichtet. Sie können mit der Erstellung von Komponenten mit JSX beginnen und sehen, wie sie sofort gerendert werden.

Fazit
JSX ist ein leistungsstarkes Tool, das die Lücke zwischen HTML und JavaScript schließt und die Erstellung dynamischer und interaktiver Benutzeroberflächen mit React erleichtert. Wenn Sie verstehen, wie JSX funktioniert und wie React es zum Rendern von Elementen verwendet, legen Sie eine solide Grundlage für Ihre React-Entwicklungsreise.

Morgen befassen wir uns mit Komponenten und Requisiten – den Kernbausteinen jeder React-Anwendung.

Das obige ist der detaillierte Inhalt vonTag JSX und Rendering-Elemente verstehen – ReactJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!