Dein erstes React-Lab

Einführung

Hallo und herzlich willkommen bei LabEx! In diesem ersten Lab lernst du das klassische "Hello, World!"-Programm in React kennen.

Klicke auf die Schaltfläche Weiter unten, um das Lab zu starten.

Hallo React

Voraussetzungen

Bevor wir beginnen, müssen wir sicherstellen, dass Node.js und npm auf der LabEx VM installiert sind.

Öffne das Terminal oder die Eingabeaufforderung und führe die folgenden Befehle aus:

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

React-Initialisierung

Versuchen wir, eine React-"Hello World"-Demo zu starten.

Öffne dein Terminal oder die Eingabeaufforderung und führe den folgenden Befehl aus, um ein neues React-Projekt zu erstellen:

cd ~/project
npx create-react-app hello-world-demo

Bitte warte, bis die Installation abgeschlossen ist.

Aktualisieren der React-Anwendung

Als Nächstes aktualisieren wir die Standard-React-Anwendung, um eine "Hello, World!"-Nachricht anzuzeigen.

Öffne die Datei src/App.js in deinem bevorzugten Code-Editor und ersetze den Inhalt durch den folgenden Code:

import React from "react";

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

export default App;

Standardmäßig verwendet der React-Entwicklungsserver Port 3000. Um ihn auf Port 8080 zu ändern, öffne die Datei package.json in deinem Code-Editor.

Finde den scripts-Abschnitt und aktualisiere das start-Skript, um die Umgebungsvariable PORT einzubeziehen:

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
 ...
}

Abschließend führe den folgenden Befehl aus, um den React-Entwicklungsserver zu starten:

cd hello-world-demo
npm start

Das war's! Du hast erfolgreich eine React-"Hello World"-Demo auf deinem lokalen Server unter Verwendung von Port 8080 gestartet.

Jetzt kannst du zur Registerkarte Web 8080 wechseln und auf die Aktualisierungsschaltfläche klicken, um die Webseite anzuzeigen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dein erstes LabEx-Lab abgeschlossen.

Wenn du mehr über LabEx und seine Verwendung erfahren möchtest, kannst du unseren Support Center besuchen. Oder du kannst dir das Video ansehen, um mehr über LabEx zu erfahren.

Programmieren ist eine lange Reise, aber das nächste Lab ist nur einen Klick entfernt. Lass uns anfangen!