Tutorials

Installation von React auf Ubuntu 22.04 LTS und Erstellung einer App mit create-react-app

Melden

Hier ist ein ausführliches Tutorial zur Installation von React auf Ubuntu 22.04 LTS und der Erstellung deiner ersten Anwendung.

React ist eine der populärsten JavaScript-Bibliotheken für den Bau von Benutzeroberflächen. Um React-Anwendungen zu entwickeln, benötigst du Node.js und den Paketmanager npm.

Voraussetzungen

  • Ein System mit Ubuntu 22.04 LTS.
  • Zugriff auf das Terminal.
  • Benutzerrechte mit sudo-Berechtigungen.

Schritt 1: System aktualisieren

Bevor wir mit der Installation beginnen, solltest du sicherstellen, dass deine Paketlisten auf dem neuesten Stand sind. Öffne das Terminal und gib Folgendes ein:

sudo apt update && sudo apt upgrade -y

Schritt 2: Node.js und npm installieren

Die Standard-Repositorys von Ubuntu enthalten oft ältere Versionen von Node.js. Für die React-Entwicklung wird empfohlen, eine aktuellere LTS-Version (Long Term Support) zu verwenden. Wir nutzen hierfür das NodeSource-Repository.

  1. NodeSource-Repository hinzufügen: Installiere zunächst curl, falls es noch nicht vorhanden ist, und lade das Setup-Skript für Node.js (LTS) herunter:

    sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

  2. Node.js installieren: Nachdem das Repository hinzugefügt wurde, kannst du Node.js installieren (npm wird automatisch mitinstalliert):

    sudo apt install -y nodejs

Schritt 3: Installation überprüfen

Um sicherzustellen, dass die Installation erfolgreich war, prüfe die installierten Versionen:

node -v
npm -v

Beide Befehle sollten eine Versionsnummer ausgeben.

Schritt 4: Eine React-Anwendung mit create-react-app erstellen

Das Tool create-react-app ist der Standardweg, um eine neue React-Anwendung mit einer vordefinierten Konfiguration zu erstellen. Wir nutzen npx, um das Tool auszuführen, ohne es permanent global installieren zu müssen. Dies stellt sicher, dass du immer die neueste Version verwendest.

  1. Navigiere in den Ordner, in dem dein Projekt gespeichert werden soll (z. B. Dokumente):

    cd ~/Dokumente

  2. Erstelle das Projekt: Ersetze meine-react-app durch den gewünschten Namen deiner Anwendung.

    npx create-react-app meine-react-app

    Hinweis: Dieser Vorgang kann einige Minuten dauern, da alle notwendigen Abhängigkeiten heruntergeladen werden.

Schritt 5: Die React-Anwendung starten

Nachdem der Installationsprozess abgeschlossen ist, wechsle in das neu erstellte Projektverzeichnis:

cd meine-react-app

Starte nun den lokalen Entwicklungsserver:

npm start

Schritt 6: Das Ergebnis im Browser prüfen

Sobald du den Befehl npm start ausgeführt hast, kompiliert das System die App und startet einen Webserver.

  • Öffne deinen Browser und gib folgende Adresse ein: http://localhost:3000
  • Du solltest nun die Standard-Startseite von React sehen (das rotierende React-Logo).

Wichtige Befehle im Überblick

Hier sind die wichtigsten Befehle, die du während der Entwicklung benötigen wirst:

  • npm start: Startet den Entwicklungsserver.
  • npm run build: Erstellt eine produktionsreife Version deiner App im Ordner build.
  • npm test: Startet den Test-Runner.
  • Strg + C: Stoppt den laufenden Entwicklungsserver im Terminal.

Fazit

Du hast nun erfolgreich Node.js installiert und deine erste React-Anwendung auf Ubuntu 22.04 LTS aufgesetzt. Du kannst nun damit beginnen, die Datei src/App.js zu bearbeiten, um deine eigene Anwendung zu gestalten. Viel Erfolg!

0