React JSX Grundlagen

Einführung

Willkommen in der Welt von React! In diesem Lab tauchen Sie in JSX ein, einen fundamentalen Bestandteil beim Erstellen von Benutzeroberflächen mit React. JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die es Ihnen ermöglicht, HTML-ähnlichen Code direkt in Ihren JavaScript-Dateien zu schreiben. Dies macht Ihren UI-Code lesbarer, ausdrucksstärker und einfacher zu warten.

Während dieses Labs lernen Sie die Kernregeln von JSX kennen, darunter:

• Schreiben von HTML-ähnlichen Elementen.
• Einbetten dynamischer JavaScript-Ausdrücke.
• Anwenden von CSS-Klassen.
• Verwenden von selbstschließenden Tags.
• Gruppieren mehrerer Elemente mit Fragments.

Ein grundlegendes React-Projekt wurde für Sie im Verzeichnis ~/project/my-app eingerichtet. Lassen Sie uns beginnen!

JSX-Element wie h1 im Komponenten-Return schreiben

In diesem Schritt schreiben Sie ein grundlegendes JSX-Element und sehen, wie es im Browser gerendert wird. JSX ermöglicht es Ihnen, Markup, das HTML sehr ähnlich sieht, direkt in Ihren React-Komponenten zu schreiben.

Zuerst bringen wir die Entwicklungsumgebung zum Laufen. Ihre gesamte Arbeit wird sich im Verzeichnis ~/project/my-app befinden.

Navigieren Sie im Terminal in das Projektverzeichnis, installieren Sie die notwendigen Abhängigkeiten und starten Sie den Entwicklungsserver.

cd ~/project/my-app
npm install

Nach Abschluss der Installation führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm run dev -- --host 0.0.0.0 --port 8080

Sie sehen eine Ausgabe, die anzeigt, dass der Server läuft. Klicken Sie nun auf den Tab Web 8080 oben auf dem Bildschirm, um Ihre Live-Anwendung anzuzeigen. Es sollte "Hello, React!" angezeigt werden.

Öffnen Sie als Nächstes die Datei src/App.jsx aus dem Dateiexplorer auf der linken Seite. Diese Datei enthält eine einfache React-Komponente namens App.

Lassen Sie uns das h1-Element ändern. Ändern Sie den Text innerhalb des <h1>-Tags zu "Welcome to JSX".

Ersetzen Sie den Inhalt von src/App.jsx durch den folgenden Code:

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

Speichern Sie die Datei (Strg+S oder Cmd+S). Die Anwendung im Tab Web 8080 wird automatisch aktualisiert, um den neuen Text anzuzeigen.

JavaScript-Ausdruck in geschweiften Klammern einbetten

In diesem Schritt lernen Sie, wie Sie JavaScript-Ausdrücke mithilfe von geschweiften Klammern {} direkt in Ihr JSX einbetten. Dies ist eine leistungsstarke Funktion, die es Ihnen ermöglicht, dynamische Inhalte zu rendern.

Sie können jeden gültigen JavaScript-Ausdruck innerhalb der geschweiften Klammern platzieren. Dies kann eine Variable, ein Funktionsaufruf oder eine arithmetische Operation sein.

Lassen Sie uns die App-Komponente ändern, um einen dynamischen Titel anzuzeigen. Öffnen Sie erneut die Datei src/App.jsx.

Deklarieren Sie innerhalb der App-Funktion, vor der return-Anweisung, eine JavaScript-Konstante namens title und weisen Sie ihr einen String-Wert zu. Verwenden Sie diese Konstante dann innerhalb des <h1>-Elements.

Aktualisieren Sie Ihre Datei src/App.jsx mit dem folgenden Code:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

Speichern Sie die Datei. Überprüfen Sie nun den Tab Web 8080. Sie werden sehen, dass die Überschrift zu "React JSX Basics" geändert wurde. React wertet den Ausdruck {title} aus und rendert dessen Wert als Inhalt des <h1>-Tags.

className-Attribut für CSS-Klasse hinzufügen

In diesem Schritt lernen Sie, wie Sie Ihren JSX-Elementen CSS-Klassen für das Styling hinzufügen.

In normalem HTML verwenden Sie das class-Attribut, um eine CSS-Klasse zuzuweisen. class ist jedoch ein reserviertes Schlüsselwort in JavaScript. Um Konflikte zu vermeiden, verwendet JSX stattdessen className.

Zuerst fügen wir eine Stilregel hinzu. Öffnen Sie die Datei src/App.css und fügen Sie den folgenden CSS-Code hinzu, um einen Stil für unseren Titel zu definieren:

.title-style {
  color: #61dafb;
  text-align: center;
}

Speichern Sie die Datei src/App.css.

Nun wenden wir diese Klasse auf unser <h1>-Element an. Öffnen Sie src/App.jsx und fügen Sie das className-Attribut zum h1-Tag hinzu.

Aktualisieren Sie Ihre Datei src/App.jsx wie folgt:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

Speichern Sie die Datei und wechseln Sie zum Tab Web 8080. Sie sollten nun sehen, dass der Titeltext zentriert und hellblau gefärbt ist, entsprechend den Stilen, die Sie in App.css definiert haben.

Selbstschließendes Tag für img-Element verwenden

In diesem Schritt lernen Sie, wie Sie selbstschließende Tags in JSX verwenden. In HTML sind einige Elemente wie <img>, <br> und <input> "leere" Elemente, was bedeutet, dass sie keinen schließenden Tag haben.

In JSX müssen Sie jeden Tag explizit schließen. Für Elemente, die keine Kinder haben, verwenden Sie eine selbstschließende Syntax, indem Sie einen Schrägstrich / vor der schließenden spitzen Klammer hinzufügen, z. B. <img />.

Eine React-Komponente kann nur ein einziges Root-Element zurückgeben. Um mehrere Elemente zu rendern, müssen Sie diese in einen Container einpacken, z. B. in ein <div>.

Fügen wir unter unserem Titel ein Bild hinzu. Wir werden sowohl das <h1> als auch das neue <img>-Tag in ein <div> einpacken.

Aktualisieren Sie Ihre Datei src/App.jsx mit dem folgenden Code:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

In diesem Code haben wir ein <img>-Tag hinzugefügt. Beachten Sie, dass es selbstschließend ist (/>). Wir haben auch geschweifte Klammern verwendet, um das src-Attribut dynamisch aus der imageUrl-Variable zu setzen.

Speichern Sie die Datei und schauen Sie sich den Tab Web 8080 an. Sie werden das LabEx-Logo unter dem Titel angezeigt sehen.

Mehrere Elemente in Fragment <> </> rendern

In diesem Schritt lernen Sie eine bessere Methode, um mehrere Elemente zu gruppieren, ohne einen zusätzlichen Knoten zum DOM hinzuzufügen: React Fragments.

Im vorherigen Schritt haben wir ein <div> verwendet, um unsere <h1>- und <img>-Elemente zu umschließen, da eine Komponente ein einziges Root-Element zurückgeben muss. Manchmal ist dieses zusätzliche <div> jedoch unnötig und kann Ihr CSS-Layout (z. B. mit Flexbox oder Grid) beeinträchtigen.

React bietet eine Lösung namens Fragments. Ein Fragment ermöglicht es Ihnen, eine Liste von Kindern zu gruppieren, ohne zusätzliche Knoten zum DOM hinzuzufügen. Sie können die Kurzschreibweise <> ... </> verwenden.

Lassen Sie uns unsere App-Komponente refaktorisieren, um ein Fragment anstelle eines <div> zu verwenden.

Öffnen Sie src/App.jsx und ersetzen Sie das öffnende <div> und schließende </div> durch <> bzw. </>.

Ihr endgültiger src/App.jsx-Code sollte wie folgt aussehen:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

Speichern Sie die Datei. Die visuelle Ausgabe im Tab Web 8080 wird identisch mit dem vorherigen Schritt aussehen. Wenn Sie jedoch das HTML in den Entwicklertools Ihres Browsers inspizieren würden, würden Sie sehen, dass die <h1>- und <img>-Elemente nun direkte Geschwister sind, ohne ein übergeordnetes <div>. Dies schafft eine sauberere und effizientere DOM-Struktur.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs "React JSX Basics"! Sie haben die grundlegenden Regeln und die Syntax für das Schreiben von Benutzeroberflächen in einer React-Anwendung gelernt.

In diesem Lab haben Sie Folgendes geübt:

• Schreiben von HTML-ähnlichen Elementen wie <h1> in der Return-Anweisung Ihrer Komponente.
• Einbetten von dynamischen JavaScript-Variablen und -Ausdrücken in Ihr Markup mithilfe von geschweiften Klammern {}.
• Anwenden von CSS-Klassen mithilfe des className-Attributs.
• Verwenden von selbstschließenden Tags für Elemente wie <img> mit der />-Syntax.
• Gruppieren mehrerer Elemente, ohne zusätzliche DOM-Knoten hinzuzufügen, durch die Verwendung von React Fragments (<> </>).

Diese Konzepte sind die Bausteine für die Erstellung komplexer und dynamischer Benutzeroberflächen mit React. Üben Sie weiter, um sich mit der Leistungsfähigkeit und Flexibilität von JSX vertrauter zu machen.