Ein React-Frontend mit Node, npm und Vite einrichten

Der Übergang von Python-Tools zu einem React-Portfolio beginnt oft mit einer einfachen Frage: Welche Komponenten ersetzen venv, pip und requirements.txt?

Python isoliert Pakete in einer virtuellen Umgebung und legt sie in einer Anforderungsdatei fest. Eine React-Voransicht verwendet einen anderen Stack. Node.js stellt die Laufzeitumgebung bereit, npm installiert Pakete und Vite erstellt eine schnelle lokale Anwendung. Die folgenden Schritte erstellen eine React-Plus-Vite-Umgebung aus einem leeren Verzeichnis.

1. Node.js installieren

Die React-Tools erfordern Node.js, das zusammen mit npm (Node Package Manager) geliefert wird. Nach der Installation von Node aus der offiziellen Distribution für Ihr Betriebssystem sollten Sie beide Binärdateien in einer Terminalkonsole überprüfen:

node --version
npm --version

npm erfüllt eine ähnliche Funktion wie pip: Es lädt Bibliotheken herunter und protokolliert die Versionen für das Projekt. Für diesen Workflow muss man kein separates virtuelles Umfeld im Python-Stil erstellen; Node sowie der projektbezogene node_modules-Ordner übernehmen die Isolierung.

2. Ein GitHub-Repository erstellen

Erstellen Sie ein neues GitHub-Repository für die Website. Initialisieren Sie es mit einer README.md-Datei sowie einer .gitignore-Datei, die für Frontend-Arbeiten geeignet ist. Mindestens sollten in der ignore-Datei folgende Elemente aufgeführt sein:

node_modules/
dist/
.env
.env.*

Verwenden Sie niemals node_modules bei einem Commit. Diese Pakete sind lokale Artefakte. Jeder, der das Repository kloniert, kann sie mithilfe von npm install aus der package.json-Datei erneut erstellen. Halten Sie auch Geheimnisse außerhalb von Git: .env sowie .env.*-Dateien sollten in der ignore-Liste stehen, damit API-Schlüssel niemals im Versionsverlauf landen.

3. Das Projekt lokal klonen oder öffnen

Klonen Sie das Repository oder erstellen Sie den Ordner auf der Festplatte, öffnen Sie ihn anschließend in VS Code (oder einem anderen Editor). Die Arbeit innerhalb dieses Verzeichnisses sorgt dafür, dass Vites Scaffold sowie die späteren npm-Befehle an der richtigen Stelle bleiben.

4. React mit Vite initialisieren

Vite bietet modernen Frontend-Anwendungen einen schnellen Einstieg sowie einen reaktiven Entwicklungsserver. Aus der Projektwurzel ausführen Sie:

npm create vite@latest .

Der angehängte . weist den Scaffold auf das Platzieren der Dateien im aktuellen Verzeichnis statt auf die Erstellung eines verschachtelten Ordners hin. Wenn Abfragen angezeigt werden, wählen Sie:

Framework: React
Variant: JavaScript

Einige Versionen fragen außerdem nach einem Linter. Die Verwendung eines solchen hilft dabei, Syntax- und Stilprobleme frühzeitig zu erkennen; die Regeln können später angepasst werden.

5. Abhängigkeiten installieren

Falls der Scaffold die Pakete nicht automatisch installiert hat, führen Sie aus:

npm install

npm liest package.json ein, erstellt node_modules und installiert alle deklarierten Abhängigkeiten. Diese Verzeichnis ist groß und maschinenabhängig, weshalb es außerhalb des Versionskontrollsystems bleibt.

6. Starten Sie den Entwicklungsserver

Starten Sie den lokalen Server mit:

npm run dev

Vite gibt eine lokale URL aus, in der Regel:

http://localhost:5173/

Öffnen Sie diese Adresse in einem Browser. Das Bearbeiten und Speichern von React-Quellcode sollte während der Entwicklung die Seite über Vites Hot-Update-Funktion aktualisieren, sodass Sie Änderungen an der Benutzeroberfläche ohne jedes Mal ein manuelles Neuladen sehen.

Python gegen React: Der Unterschied, der mir geholfen hat

Die Zuordnung, die die Verwirrung beseitigt, sieht wie folgt aus. Ein typisches Python-Projekt verläuft wie folgt:

Python → venv → pip → requirements.txt

Ein React-Plus-Vite-Projekt verläuft wie folgt:

Node.js → npm → package.json → node_modules

Das React-Portfolio benötigt nicht eine Python venv. Node.js ist die Laufzeitumgebung, npm der Installer, package.json das Manifest und node_modules enthält die installierten Pakete. Durch die klare Trennung dieser Rollen wird verhindert, dass Python-Gewohnheiten in ein JavaScript-Frontend eindringen.

Fazit

Wer aus dem Bereich Python oder Datenwissenschaft kommt, kann die auf Node.js ausgerichtete Einrichtung anfangs unklar finden, solange die Funktion jedes Tools nicht klar ist. Sobald Node.js, npm, React und Vite richtig eingesetzt sind, ist der Weg kurz:

Create repository
        ↓
Open project in VS Code
        ↓
Initialize React + Vite
        ↓
Install dependencies
        ↓
npm run dev
        ↓
Build!

Sobald diese Kette vorhanden ist, ist die React-Frontend-Umgebung bereit für die Erstellung eines Portfolios sowie für weitere Bibliotheken, die über npm hinzugefügt werden können.