React-Projekt-Einrichtung: Erstellen und Ausführen Ihrer ersten App mit Vite

Einführung

Willkommen zu Ihrem ersten React-Lab! React ist eine leistungsstarke JavaScript-Bibliothek zum Erstellen dynamischer und interaktiver Benutzeroberflächen. Um mit der React-Entwicklung zu beginnen, müssen Sie zunächst eine geeignete Entwicklungsumgebung einrichten.

In diesem Lab verwenden Sie das moderne Build-Tool Vite, um ein neues Projekt zu starten. Wir werden Sie durch den Prozess der Erkundung der Projektstruktur, der Installation von Abhängigkeiten, dem Starten eines Entwicklungsservers, dem Modifizieren einer vorhandenen Komponente und dem Erstellen einer neuen Komponente führen. Am Ende dieses Labs werden Sie ein grundlegendes Verständnis für die React-Projekt-Einrichtung haben und bereit sein, Ihre eigenen Komponenten zu erstellen.

Projekt erkunden und Abhängigkeiten installieren

Der Einrichtungsprozess hat bereits ein neues React-Projekt für Sie in einem Verzeichnis namens my-app mit Vite erstellt. Lassen Sie uns zunächst überprüfen, ob Ihre Entwicklungsumgebung die notwendigen Werkzeuge, Node.js und npm, besitzt.

Öffnen Sie das Terminal und führen Sie die folgenden Befehle aus, um deren Versionen zu überprüfen:

node -v

Sie sollten eine Ausgabe sehen, die die Node.js-Version anzeigt, zum Beispiel:

v22.19.0

Überprüfen Sie als Nächstes die npm-Version:

npm -v

Sie sollten eine ähnliche Ausgabe für die npm-Version sehen:

10.9.3

Navigieren Sie nun in das Projektverzeichnis. Alle nachfolgenden Befehle sollten von innerhalb dieses Verzeichnisses aus ausgeführt werden.

cd my-app

Ihre React-Anwendung benötigt mehrere Pakete, um zu funktionieren, die in der Datei package.json aufgeführt sind. Sie müssen diese Abhängigkeiten mit npm installieren.

Führen Sie den folgenden Befehl aus:

Wichtig: Aus Sicherheitsgründen können kostenlose Benutzer keine Verbindung zum Internet herstellen, daher können npm-Pakete nicht installiert werden. Sie können die Dokumentation weiterlesen, andere Web Development Labs ausprobieren oder ein Upgrade auf einen Pro-Benutzer in Erwägung ziehen.

npm install

Dieser Befehl liest die Datei package.json und lädt alle erforderlichen Bibliotheken in einen Ordner namens node_modules innerhalb Ihres Projekts herunter. Sie sehen eine Fortschrittsanzeige und einige Meldungen, während die Pakete installiert werden.

Entwicklungsserver starten

Um Ihre React-Anwendung in Aktion zu sehen, müssen Sie den Entwicklungsserver starten. Da Sie sich bereits im Verzeichnis my-app befinden, können Sie das von Vite bereitgestellte Skript verwenden.

Führen Sie den folgenden Befehl aus, um den Server auf Port 8080 zu starten:

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

Dieser Befehl startet den Server und wird Ihr Terminal belegen, wobei die lokale URL angezeigt wird, unter der die App läuft. Lassen Sie dieses Terminal laufen. Nach einem Moment sehen Sie eine Meldung, die besagt, dass der Server bereit ist.

Um Ihre Anwendung anzuzeigen, klicken Sie auf den Tab Web 8080 oben in der Benutzeroberfläche. Sie sollten die Standard-Willkommensseite von Vite und React sehen.

Hinweis: Wenn Sie die Anwendung nicht sehen, versuchen Sie, auf die Schaltfläche zum Aktualisieren zu klicken, die sich links von der Adressleiste im Tab Web 8080 befindet.

Erste Komponente anpassen

Der Vite-Entwicklungsserver verfügt über Hot Module Replacement (HMR), das die Anwendung in Ihrem Browser sofort aktualisiert, wenn Sie Änderungen an einer Datei speichern. Lassen Sie uns dies in Aktion sehen.

Navigieren Sie im Dateiexplorer auf der linken Seite zu my-app -> src und klicken Sie auf die Datei App.jsx, um sie im Editor zu öffnen. Diese Datei definiert die Hauptkomponente App.

Innerhalb der return-Anweisung sehen Sie einen Codeblock, der wie HTML aussieht. Dies ist JSX, eine Syntaxerweiterung für JavaScript, die es Ihnen ermöglicht, UI-Strukturen auf eine vertraute Weise zu schreiben.

Ersetzen Sie den gesamten Inhalt innerhalb von return (...) durch eine einfache Überschrift. Ihre Datei App.jsx sollte wie folgt aussehen:

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

Speichern Sie die Datei, indem Sie Strg+S (oder Cmd+S auf Mac) drücken. Wechseln Sie nun zurück zum Tab Web 8080. Sie werden sehen, dass die Seite sofort aktualisiert wurde und Ihre neue "Hello, LabEx!"-Überschrift anzeigt.

Neue Komponente erstellen

Ein Kernprinzip von React ist der Aufbau von Benutzeroberflächen aus kleinen, wiederverwendbaren Teilen, die als Komponenten bezeichnet werden. Lassen Sie uns eine neue Komponente erstellen.

Klicken Sie im Dateiexplorer auf der linken Seite mit der rechten Maustaste auf das Verzeichnis src innerhalb von my-app.
Wählen Sie "Neue Datei" und nennen Sie sie Welcome.jsx.
Öffnen Sie die neu erstellte Datei Welcome.jsx und fügen Sie den folgenden Code hinzu:

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

Lassen Sie uns diesen Code aufschlüsseln:

import React from 'react';: Diese Zeile ist für jede Datei erforderlich, die JSX verwendet.
function Welcome() { ... }: Dies definiert eine einfache funktionale Komponente namens Welcome.
return <h2>...</h2>;: Die Komponente gibt ein JSX-Element zurück, das auf dem Bildschirm gerendert wird.
export default Welcome;: Dies macht die Welcome-Komponente für die Verwendung in anderen Dateien verfügbar.

Speichern Sie die Datei (Strg+S). Im Browser wird sich noch nichts ändern, da wir diese neue Komponente noch nicht verwendet haben.

Neue Komponente verwenden

Nachdem Sie die Welcome-Komponente erstellt haben, wollen wir sie nun innerhalb unserer Hauptkomponente App verwenden. Dies wird als Komponentenkomposition (component composition) bezeichnet.

Öffnen Sie erneut die Datei my-app/src/App.jsx.
Fügen Sie am Anfang der Datei eine import-Anweisung hinzu, um Ihre neue Komponente einzubinden:

import Welcome from "./Welcome.jsx";

Platzieren Sie als Nächstes Ihre neue Komponente innerhalb der return-Anweisung der App-Komponente. Fügen Sie <Welcome /> unter dem <h1>-Tag hinzu, um die Komponente zu rendern. Der endgültige Code für App.jsx sollte wie folgt aussehen:

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

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;

Speichern Sie die Datei App.jsx (Strg+S).

Wechseln Sie ein letztes Mal zum Tab Web 8080. Sie sehen nun die Nachricht "Welcome to my first React App!" unter Ihrer Hauptüberschrift gerendert. Sie haben erfolgreich React-Komponenten erstellt und komponiert!

React-App zeigt Willkommensnachricht unter der Überschrift an

Zusammenfassung

In diesem Lab haben Sie die ersten wesentlichen Schritte in die Welt der React-Entwicklung mit der modernen Vite-Toolchain unternommen.

Sie haben gelernt, wie Sie:

Eine Entwicklungsumgebung für Node.js und npm überprüfen.
Ein neues React-Projekt mit Vite erstellen.
Projekt-Abhängigkeiten mit npm install installieren.
Den React-Entwicklungsserver mit npm run dev starten.
Eine bestehende Komponente modifizieren und Live-Updates mit Hot Module Replacement sehen.
Eine neue funktionale Komponente von Grund auf in einer .jsx-Datei erstellen.
Komponenten importieren und komponieren, um eine komplexere Benutzeroberfläche zu erstellen.

Sie haben erfolgreich ein React-Projekt eingerichtet, den modernen Entwicklungs-Workflow kennengelernt und die Grundlagen der komponentenbasierte Architektur geübt. Sie sind nun bestens darauf vorbereitet, fortgeschrittenere React-Konzepte anzugehen.

React-Einrichtung und erste App