ReactJS - JSX: Ein Anfängerleitfaden

Hallo da draußen, zukünftige React-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ReactJS und JSX zu sein. Als jemand, der seit vielen Jahren Informatik unterrichtet, habe ich unzählige Schüler gesehen, die aufleuchten, wenn sie diese Konzepte verstehen. Also tauchen wir ein und zaubern gemeinsam etwas React-Zauber!

Was ist JSX?

Bevor wir uns den Details zuwenden, lassen Sie uns mit den Grundlagen beginnen. JSX steht für JavaScript XML. Es ist eine Syntaxerweiterung für JavaScript, die es Ihnen ermöglicht, HTML-ähnlichen Code in Ihren JavaScript-Dateien zu schreiben. Ich mag es, es als einen leckeren Sandwich vorzustellen, bei dem HTML das Brot und JavaScript die Füllung ist. Mjam!

Verwendung von JSX in ReactJS

In React ist JSX die bevorzugte Methode, um unsere Komponenten zu strukturieren. Es macht unseren Code lesbarer und einfacher zu verstehen. Sehen wir uns ein einfaches Beispiel an:

const element = <h1>Hello, React World!</h1>;

Dies sieht vielleicht wie HTML aus, aber es ist actually JSX! React wird dies im Hintergrund in reinen JavaScript umwandeln.

Warum JSX?

Vielleicht fragen Sie sich, "Warum machen wir uns die Mühe mit JSX, wenn wir einfach reinen JavaScript schreiben könnten?" Great question! Hier ist der Grund:

1. Vertrautheit: Wenn Sie HTML kennen, wird JSX Ihnen vertraut vorkommen.
2. Lesbarkeit: Es ist einfacher, die Struktur Ihrer Benutzeroberfläche zu visualisieren.
3. Syntaxprüfung: Es hilft, Fehler früh im Entwicklungsprozess zu fangen.

Ausdrücke in JSX

Eine der coolersten Dinge an JSX ist, dass Sie JavaScript-Ausdrücke direkt in Ihrer Markup einbetten können. Es ist wie das Hinzufügen von Streuseln zu Ihrem Eis - es macht alles besser! Hier ist wie:

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

Diese geschweiften Klammern {} sind Ihr Zauberstab. Alles, was innen ist, wird als JavaScript-Ausdruck ausgewertet.

Funktionen in JSX

Wir können dies einen Schritt weiter gehen und Funktionen in unserem JSX verwenden. Sehen Sie sich das an:

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'React',
lastName: 'Learner'
};

const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);

Hier rufen wir die Funktion formatName direkt in unserem JSX auf. Cool, oder?

Attribute in JSX

Genau wie in HTML können wir Attribute zu unseren JSX-Elementen hinzufügen. Aber es gibt eine Wendung! In JSX verwenden wir camelCase für Attributnamen anstelle von Kleinbuchstaben. Zum Beispiel:

const element = <div className="container">Hello, JSX!</div>;

Beachten Sie, dass wir className anstelle von class verwenden. Dies liegt daran, dass class ein reserviertes Wort in JavaScript ist.

Verwendung von Ausdrücken within Attributes

Erinnern Sie sich an die magischen geschweiften Klammern? Wir können sie auch in Attributen verwenden!

const imgUrl = 'https://example.com/react-logo.png';
const element = <img src={imgUrl} alt="React Logo" />;

Dies ermöglicht es uns, Attributwerte dynamisch zu setzen, was äußerst nützlich beim Aufbau interaktiver Benutzeroberflächen ist.

Geschachtelte Elemente in JSX

Genau wie in HTML können wir Elemente in JSX geschachteln. Dies ist, wie wir komplexe Benutzeroberflächen aufbauen:

const element = (
<div>
<h1>Welcome to React</h1>
<p>Let's learn JSX together!</p>
</div>
);

Beachten Sie, wie wir mehrere Zeilen von JSX in Klammern einpacken. Dies ist nicht streng notwendig, aber es hilft bei der Lesbarkeit.

JSX-Methoden

Hier ist eine Tabelle mit einigen häufigen JSX-Methoden, die Sie antreffen werden:

Methode	Beschreibung	Beispiel
React.createElement()	Erzeugt ein React-Element	React.createElement('div', null, 'Hello, JSX!')
ReactDOM.render()	Rendert ein React-Element in das DOM	ReactDOM.render(element, document.getElementById('root'))
React.Fragment	Ermöglicht das Rückgabe mehrerer Elemente ohne zusätzliche Knoten im DOM hinzuzufügen	<React.Fragment> Title Paragraph </React.Fragment>

Abschluss

Und da haben Sie es, Leute! Wir haben unsere ersten Schritte in die Welt von JSX unternommen. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, mit diesen Konzepten zu experimentieren.

Wie ich meinen Schülern immer sage, coden ist wie das Fahrradfahren lernen. Es mag am Anfang wackelig erscheinen, aber wenn Sie den Dreh raus haben, werden Sie schnell vorankommen. Also weiter treten, und bevor Sie es wissen, werden Sie erstaunliche React-Anwendungen bauen!

Frohes Coden und bis zur nächsten Lektion, in der wir noch tiefer in die React-Welt eintauchen werden!

Credits: Image by storyset