ReactJS - React Without JSX

Was ist JSX?

Bevor wir uns ohne JSX in React einsteigen, lassen Sie uns zuerst verstehen, was JSX ist. JSX, oder JavaScript XML, ist eine Syntaxerweiterung für JavaScript, die ähnlich wie HTML aussieht. Es wird oft mit React verwendet, um zu beschreiben, wie die Benutzeroberfläche aussehen sollte. JSX ist jedoch keine Voraussetzung für die Verwendung von React. React kann ohne JSX verwendet werden, was wir in diesem Tutorial erkunden werden.

Warum React ohne JSX verwenden?

Sie fragen sich vielleicht, "Wenn JSX so verbreitet ist, warum wollten wir React ohne es verwenden?" Great question! Es gibt ein paar Gründe:

1. Lernen der Kernkonzepte: Das Verständnis, wie React ohne JSX funktioniert, kann Ihnen ein tieferes Verständnis der Bibliothek vermitteln.
2. Einschränkungen der Build-Tools: Einige Build-Umgebungen unterstützen möglicherweise nicht die Kompilierung von JSX.
3. Persönliche Präferenz: Einige Entwickler bevorzugen es einfach, reinen JavaScript zu schreiben.

Erstellen von Elementen mit React.createElement()

Das Herzstück der Verwendung von React ohne JSX ist die Funktion React.createElement(). Diese Funktion ist das, was JSX anyway kompiliert, also schneiden wir den Mittelmann heraus!

Lassen Sie uns mit einem einfachen Beispiel beginnen:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hallo, Welt!'
);

In diesem Beispiel erstellen wir ein h1-Element mit der Klasse 'greeting' und dem Textinhalt 'Hallo, Welt!'. Lassen Sie uns die Argumente aufschlüsseln:

1. Das erste Argument ('h1') gibt den Typ des Elements an, das wir erstellen möchten.
2. Das zweite Argument ({className: 'greeting'}) ist ein Objekt, das die Props für das Element enthält.
3. Das dritte Argument ('Hallo, Welt!') ist der Inhalt des Elements.

Wenn wir dies in JSX schreiben würden, sähe es so aus:

const element = <h1 className="greeting">Hallo, Welt!</h1>;

Sie sehen, wie viel kompakter JSX ist? Aber keine Sorge, mit Übung wird das Erstellen von Elementen ohne JSX zur zweiten Natur!

Verschachtelte Elemente

Nun, lassen Sie uns etwas Komplexeres versuchen. Wie wäre es mit der Erstellung eines div-Elements mit zwei Kinderelementen?

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Willkommen'),
React.createElement('p', null, 'Dies ist ein Absatz.')
);

Dies erstellt eine Struktur äquivalent zu:

<div>
<h1>Willkommen</h1>
<p>Dies ist ein Absatz.</p>
</div>

Beachten Sie, wie wir die createElement-Aufrufe verschachteln, um Kinderelemente zu erstellen. Die null-Argumente sind där, wo wir Props einfügen würden, wenn wir sie benötigen würden.

Erstellen von Komponenten

Komponenten sind die Bausteine von React-Anwendungen. Lassen Sie uns ein einfaches funktionalen Komponenten ohne JSX erstellen:

function Willkommen(props) {
return React.createElement(
'h1',
null,
'Willkommen, ' + props.name
);
}

Um diese Komponente zu verwenden, würden wir folgendes tun:

const element = React.createElement(Willkommen, {name: 'Alice'});

Dies entspricht dem JSX:

const element = <Willkommen name="Alice" />;

Ereignisbehandlung

Die Ereignisbehandlung in React ohne JSX ist sehr ähnlich zu der mit JSX. Lassen Sie uns einen Button erstellen, der eine Nachricht protokolliert, wenn er geklickt wird:

function handleClick() {
console.log('Button geklickt!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Klicke mich'
);

Hier übergeben wir die Funktion handleClick als das onClick-Prop an das Button-Element.

Bedingte Renderung

Bedingte Renderung ist ohne JSX etwas ausführlicher, aber trotzdem vollkommen möglich:

function Gruß(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Willkommen zurück!');
} else {
return React.createElement('h1', null, 'Bitte anmelden.');
}
}

const element = React.createElement(
Gruß,
{isLoggedIn: true}
);

Listen und Keys

Das Rendern von Listen ohne JSX erfordert, dass wir Array.map() explizit verwenden:

const zahlen = [1, 2, 3, 4, 5];

const listenElemente = zahlen.map((zahl) =>
React.createElement('li', {key: zahl.toString()}, zahl)
);

const liste = React.createElement('ul', null, listenElemente);

Beachten Sie, wie wir immer noch die key-Prop verwenden, die für den Reconciliation-Prozess von React entscheidend ist.

Methodentabelle

Hier ist eine Tabelle, die die wichtigsten Methoden zusammenfasst, die wir besprochen haben:

Methode	Beschreibung	Beispiel
React.createElement()	Erzeugt ein React-Element	React.createElement('div', null, 'Hallo')
Array.map()	Transformiert Array-Elemente	zahlen.map(n => React.createElement('li', null, n))
React.render()	Rendert ein React-Element in das DOM	ReactDOM.render(element, document.getElementById('root'))

Schlussfolgerung

Während JSX sicherlich das Schreiben von React-Code intuitiver und lesbarer macht, vermittelt das Verständnis von React ohne JSX Ihnen ein tiefes Verständnis dessen, was unter der Haube passiert. Es ist wie das Lernen, ein Handschaltauto zu fahren, bevor man ein Automatikauto fährt - es gibt Ihnen mehr Kontrolle und Verständnis für den Prozess.

Denken Sie daran, ob Sie JSX verwenden oder nicht, die Kernprinzipien von React bleiben gleich. Komponenten, Props, Zustand und die virtuelle DOM funktionieren auf die gleiche Weise. JSX ist nur syntaktischer Zucker, der den Codierungsprozess ein wenig süßer macht!

Also, wenn Sie das nächste Mal eine React-Anwendung debuggen und React.createElement() im kompilierten Code sehen, werden Sie genau wissen, was vor sich geht. Viel Spaß beim Coden und möge Ihre React-Elemente immer wahr sein!

Credits: Image by storyset