Einführung in React-Komponenten

Einführung

In diesem Lab lernen Sie das grundlegende Konzept von Komponenten in React kennen. Komponenten sind unabhängige und wiederverwendbare Code-Schnipsel. Sie erfüllen denselben Zweck wie JavaScript-Funktionen, arbeiten jedoch isoliert und geben HTML (über JSX) zurück, das auf dem Bildschirm gerendert wird. Wir werden uns auf die Erstellung einer einfachen "funktionalen Komponente" konzentrieren.

Sie erstellen eine neue Komponente in ihrer eigenen Datei, exportieren sie und importieren und rendern sie dann innerhalb der Hauptkomponente App.

Funktionale Komponente in neuer Datei Hello.jsx erstellen

In diesem Schritt erstellen Sie Ihre erste React-Komponente. Es ist üblich, jede Komponente in ihrer eigenen Datei zu platzieren, um den Code organisiert und wiederverwendbar zu halten. Wir erstellen eine neue Datei für eine Komponente namens Hello.

Zuerst bereiten wir die Entwicklungsumgebung vor. Die Projektdateien wurden für Sie im Verzeichnis my-app erstellt. Sie müssen in dieses Verzeichnis navigieren, die notwendigen Abhängigkeiten installieren und den Entwicklungsserver starten.

Öffnen Sie ein Terminal im WebIDE (Sie können das Menü verwenden: Terminal > New Terminal) und führen Sie die folgenden Befehle nacheinander aus:

cd my-app

npm install

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

Nachdem Sie den letzten Befehl ausgeführt haben, startet der Entwicklungsserver. Sie können die laufende Anwendung anzeigen, indem Sie auf den Tab Web 8080 in der LabEx-Oberfläche klicken. Während dieses Labs können Sie zu diesem Tab wechseln, um Ihre Änderungen zu sehen.

Navigieren Sie im WebIDE-Dateiexplorer auf der linken Seite zum Verzeichnis my-app/src. Klicken Sie mit der rechten Maustaste auf den Ordner src und wählen Sie "New File". Benennen Sie die neue Datei Hello.jsx.

Fügen Sie nun den folgenden Code in Ihre neu erstellte Datei my-app/src/Hello.jsx ein. Dieser Code definiert eine einfache funktionale Komponente.

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

Lassen Sie uns diesen Code aufschlüsseln:

• function Hello(): Dies ist eine Standard-JavaScript-Funktion. In React sind funktionale Komponenten einfach JavaScript-Funktionen. Gemäß Konvention beginnen Komponentennamen immer mit einem Großbuchstaben.
• return <h1>...</h1>;: Die Funktion gibt JSX zurück. JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die HTML sehr ähnlich sieht. Damit beschreiben wir, wie die Benutzeroberfläche aussehen soll.

Komponentenfunktion als Standard exportieren

In diesem Schritt machen Sie die Hello-Komponente für die Verwendung in anderen Teilen Ihrer Anwendung verfügbar. Dazu müssen Sie sie aus der Datei Hello.jsx exportieren.

Es gibt zwei Hauptarten von Exporten in JavaScript-Modulen: benannte Exporte (named exports) und Standardexporte (default exports). Für dieses Lab verwenden wir einen Standardexport, was für Komponenten üblich ist, wenn eine Datei nur eine Sache exportiert.

Fügen Sie die folgende Zeile am Ende Ihrer Datei my-app/src/Hello.jsx hinzu:

export default Hello;

Ihre vollständige Datei my-app/src/Hello.jsx sollte nun wie folgt aussehen:

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

Diese export default-Anweisung macht die Hello-Funktion zum Haupt-Export dieser Datei und ermöglicht es anderen Dateien, sie zu importieren.

Komponente mit Import-Anweisung in App.jsx importieren

In diesem Schritt importieren Sie die Hello-Komponente in die Hauptanwendungskomponente App.jsx, damit Sie sie verwenden können.

Suchen und öffnen Sie im WebIDE-Dateiexplorer die Datei my-app/src/App.jsx.

Um die Hello-Komponente zu verwenden, müssen Sie sie zuerst importieren. Fügen Sie die folgende Import-Anweisung am Anfang der Datei my-app/src/App.jsx hinzu, vor der Definition der App-Funktion:

import Hello from "./Hello.jsx";

Diese Zeile weist JavaScript an, den Standardexport aus der Datei Hello.jsx zu importieren (die sich im selben Verzeichnis befindet, daher ./) und ihn einer Variablen namens Hello zuzuweisen.

Nachdem Sie den Import hinzugefügt haben, wird der obere Teil Ihrer Datei my-app/src/App.jsx ungefähr so aussehen (die anderen Imports können leicht abweichen):

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... rest of the file

Importierte Komponente im App-Return rendern

In diesem Schritt rendern Sie die Hello-Komponente innerhalb der App-Komponente. Sobald eine Komponente importiert ist, können Sie sie in JSX wie ein reguläres HTML-Tag verwenden.

Suchen Sie in der Datei my-app/src/App.jsx die return-Anweisung innerhalb der App-Funktion. Der vorhandene Code ist der Standardinhalt von Vite. Sie können ihn vollständig durch Ihre neue Komponente ersetzen.

Ändern Sie die App-Funktion, um den Standardinhalt zu entfernen und stattdessen die <Hello />-Komponente zu rendern.

Ihre App-Funktion sollte wie folgt aussehen:

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

Hier ist <Hello /> die Art und Weise, wie Sie die Hello-Komponente rendern. Die <> und </> werden als Fragment bezeichnet; sie ermöglichen es Ihnen, eine Liste von Kindern zu gruppieren, ohne zusätzliche Knoten zum DOM hinzuzufügen.

Ihre gesamte Datei my-app/src/App.jsx sollte nun wie folgt aussehen:

import Hello from "./Hello.jsx";
import "./App.css";

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

Hinweis: Wir haben die ungenutzten Imports und die State-Logik zur besseren Übersichtlichkeit entfernt.

Dateien speichern und im Browser auf aktualisiertes Rendering prüfen

In diesem Schritt sehen Sie das Ergebnis Ihrer Arbeit.

Stellen Sie sicher, dass Sie alle Ihre Änderungen sowohl in my-app/src/Hello.jsx als auch in my-app/src/App.jsx gespeichert haben. Sie können eine Datei speichern, indem Sie Strg+S oder Cmd+S drücken.

Der Vite-Entwicklungsserver, den Sie in der Einleitung gestartet haben, verwendet Hot Module Replacement (HMR). Das bedeutet, dass er Dateiänderungen automatisch erkennt und die Anwendung im Browser aktualisiert, ohne dass ein vollständiges Neuladen der Seite erforderlich ist.

Wechseln Sie zum Tab Web 8080 in der LabEx-Oberfläche. Sie sollten nun den Text "Hello from the Hello component!" auf der Seite sehen. Dieser Inhalt wird von Ihrer neuen Hello-Komponente gerendert.

Wenn Sie die Änderungen nicht sehen, versuchen Sie, auf die Aktualisieren-Schaltfläche in der Adressleiste des Browser-Tabs zu klicken.

Herzlichen Glückwunsch, Sie haben Ihre erste React-Komponente erfolgreich erstellt, exportiert und gerendert!

Zusammenfassung

In diesem Lab haben Sie den grundlegenden Workflow zur Erstellung und Verwendung von Komponenten in einer React-Anwendung kennengelernt. Dieser modulare Ansatz ist ein Kernprinzip der React-Entwicklung.

Sie haben erfolgreich:

• Eine neue funktionale Komponente in einer separaten Datei (Hello.jsx) erstellt.
• export default verwendet, um die Komponente für andere Teile der Anwendung verfügbar zu machen.
• import verwendet, um die Komponente in die Hauptdatei App.jsx zu importieren.
• Die importierte Komponente mithilfe der JSX-Tag-Syntax (<Hello />) gerendert.

Dieses Muster der Erstellung, des Exports und des Imports von Komponenten ist grundlegend für den Aufbau großer und wartbarer React-Anwendungen.