JSX in React – Anleitung zur Anwendung

Das Erstellen von Benutzeroberflächen (UIs) in React wird durch JSX vereinfacht, eine syntaktische Erweiterung von JavaScript. JSX ermöglicht es dir, HTML-ähnliche Syntax in JavaScript zu nutzen, wodurch die Erstellung von Komponenten intuitiver wird. Diese Anleitung zeigt dir, wie du JSX effektiv verwendest, um Komponenten in React zu erstellen, und gibt dir wertvolle Einblicke in die Funktionsweise von JSX im Hintergrund.

Wichtigste Erkenntnisse

• JSX ist eine Syntaxerweiterung für JavaScript, die es ermöglicht, HTML-ähnliche Strukturen zu erstellen.
• JSX wird in reguläres JavaScript transpiliert, um auf Browserkompatibilität zu gewährleisten.
• Mit der createElement-Methode kannst du React-Elemente direkt ohne JSX erstellen.
• Es existieren einige Unterschiede zwischen herkömmlichem HTML und JSX, die beachtet werden sollten.

Schritt-für-Schritt-Anleitung

Schritt 1: JSX einführen

Öffne zunächst deine React-Anwendung und schau dir die Grundstruktur an. Du wirst feststellen, dass JSX bereits in deinem Projekt verwendet wird. Ein einfaches Beispiel für JSX wäre:

. Du kannst dies probieren, indem du die Hauptkomponente deiner App entsprechend anpasst.

Schritt 2: JSX Syntax verstehen

Wenn du JSX in deinem Code verwendest, sieht das wie HTML aus. Beachte jedoch, dass dieser Code direkt nicht in einem normalen JavaScript-Umfeld funktioniert. Versuche, den JSX-Code im Browser auszuführen, und du wirst einen Syntaxfehler erhalten. Das liegt daran, dass JSX durch einen Transpiler in gültiges JavaScript übersetzt werden muss.

Schritt 3: Arbeiten mit React.createElement

Um zu verstehen, wie JSX funktioniert, wirf einen Blick auf die createElement-Methode von React. Diese Methode ermöglicht es dir, ein React-Element zu erstellen, indem du den Tag-Namen, möglicherweise Props und Kinder übergibst. Anstelle des JSX-Codes könntest du also einen Code wie den folgenden verwenden:

React.createElement('div', null, 'Hello World')

Dieser Code erzeugt das gleiche Ergebnis wie der JSX-Ausdruck.

Schritt 4: Verschachtelte Elemente mit createElement

Um ein komplexeres Element mit verschachtelten Strukturen zu erstellen, kannst du createElement mehrmals aufrufen. Nehmen wir an, du möchtest ein div-Element innerhalb eines anderen div-Elements erstellen. Hier ist ein Beispiel:

React.createElement('div', null, 
    React.createElement('div', null, 'Hello World')
);

Dies erstellt ein äußeres div, das ein inneres div mit dem Text Hello World enthält.

Schritt 5: Komponenten in JSX verwenden

Wenn du deine eigenen Komponenten erstellen möchtest, kannst du JSX direkt verwenden, um diese einzufügen. Definiere eine einfache Funktion, die deine Komponente zurückgibt, und nutze sie dann innerhalb von JSX:

function MyComponent() {
    return <div>Hello from MyComponent</div>;
}

// In deinem Haupt-Render-Block:

Diese Komponente wird dann korrekt in deiner Anwendung gerendert.

Schritt 6: Unterschiede zwischen HTML und JSX

Achte darauf, dass einige Attribute in JSX eine andere Schreibweise haben als in herkömmlichem HTML. Beispielsweise wird class in JSX als className bezeichnet, da class ein reserviertes Schlüsselwort in JavaScript ist. So könntest du beispielsweise Folgendes schreiben:

<div className="my-class">Content</div>

Zusammenfassung

Die Nutzung von JSX in React ermöglicht es dir, Benutzeroberflächen auf eine deklarative Art und Weise zu erstellen und zu strukturieren. Während JSX eine HTML-ähnliche Syntax bietet, wird es intern in JavaScript übersetzt, was die Leserlichkeit und Wartbarkeit verbessert. Diese Anleitung hat die Grundlagen von JSX, den Einsatz der createElement-Methode und wichtige Unterschiede zwischen JSX und HTML behandelt. Das Verständnis dieser Konzepte ist entscheidend für die Entwicklung von effizienten React-Anwendungen.