Wie man React.js auf einem Windows VPS installiert

React.js ist eine leistungsstarke JavaScript-Bibliothek, die von Facebook für die Erstellung von Benutzeroberflächen, insbesondere für einseitige Anwendungen, entwickelt wurde. Sie ermöglicht es Entwicklern, große Webanwendungen zu erstellen, die Daten ändern können, ohne die Seite neu zu laden. Wenn Sie mit React.js auf Ihrem Windows-Rechner arbeiten möchten, hilft Ihnen dieser Leitfaden, sich im Handumdrehen zurechtzufinden.

Voraussetzungen

Bevor Sie React.js installieren, sollten Sie sicherstellen, dass Sie die folgenden Komponenten auf Ihrem Windows-System installiert haben:

• Node.js: React stützt sich auf Node.js, das die Laufzeitumgebung für die Ausführung von JavaScript auf dem Server bereitstellt und npm (Node Package Manager) zur Verwaltung von Abhängigkeiten enthält.
• Texteditor: Sie benötigen einen Texteditor wie Visual Studio Code (VS Code), Sublime Text oder eine andere IDE Ihrer Wahl.

Los geht’s!

Schritt 1: Node.js installieren

1.1 Node.js herunterladen

Um Node.js zu installieren, folgen Sie diesen Schritten:

1. Besuchen Sie die offizielle Node.js-Website: https://nodejs.org.
2. Laden Sie die neueste LTS-Version (Long Term Support) von Node.js für Windows herunter.
3. Nachdem der Download abgeschlossen ist, führen Sie das Installationsprogramm aus.

1.2 Node.js installieren

Folgen Sie den Anweisungen des Node.js-Installationsprogramms:

1. Wählen Sie auf dem Begrüßungsbildschirm Weiter.
2. Akzeptieren Sie die Lizenzvereinbarung und klicken Sie auf Weiter.
3. Wählen Sie den Zielordner und klicken Sie auf Weiter.
4. Vergewissern Sie sich, dass “Node.js runtime”, “npm package manager” und andere Tools markiert sind, und klicken Sie auf Weiter.
5. Beenden Sie die Installation.

1.3 Überprüfen Sie die Installation von Node.js und npm

Sobald Node.js installiert ist, können Sie es überprüfen, indem Sie ein Terminal (Eingabeaufforderung oder PowerShell) öffnen und die folgenden Befehle ausführen:

Dieser Befehl gibt die installierte Version von Node.js aus.

Dieser Befehl gibt die Version von npm (Node Package Manager) aus, die zusammen mit Node.js installiert ist.

Wenn beide Befehle Versionsnummern zurückgeben, sind Node.js und npm erfolgreich installiert.

Schritt 2: Installieren Sie das Tool Create React App

React-Anwendungen werden mit dem Create React App Tool erstellt. Dies ist ein offiziell unterstützter Weg, um einseitige React-Anwendungen mit einer Standardstruktur und einer Build-Konfiguration zu erstellen.

Um es zu installieren, folgen Sie diesen Schritten:

2.1 Öffnen Sie eine Eingabeaufforderung oder PowerShell

Öffnen Sie ein neues Terminalfenster (Eingabeaufforderung oder PowerShell).

2.2 Installieren Sie Create React App global

Um Create React App global auf Ihrem System zu installieren, führen Sie den folgenden npm-Befehl aus:

Dies installiert das create-react-app-Paket global, so dass Sie neue React-Projekte von überall in Ihrem Dateisystem erstellen können.

Schritt 3: Erstellen Sie eine neue React-Anwendung

Sobald Create React App installiert ist, können Sie ein neues React.js-Projekt erstellen, indem Sie diese Schritte ausführen:

3.1 Navigieren Sie zu Ihrem Projektverzeichnis

Verwenden Sie den Befehl cd, um zu dem Ordner zu navigieren, in dem Sie Ihre neue React-App erstellen möchten. Zum Beispiel:

3.2 Erstellen Sie ein neues React-Projekt

Führen Sie im Terminal den folgenden Befehl aus, um ein neues React-Projekt zu erstellen:

Ersetzen Sie my-react-app durch den Namen Ihres Projekts. Dieser Befehl erstellt ein neues Verzeichnis mit dem Namen Ihres Projekts und installiert alle notwendigen Dateien und Abhängigkeiten für eine React-Anwendung.

3.3 Navigieren Sie zu Ihrem React-Projekt

Sobald das Projekt erstellt wurde, navigieren Sie zu Ihrem Projektverzeichnis:

3.4 Starten Sie den Entwicklungsserver

Jetzt, wo Ihr React-Projekt eingerichtet ist, können Sie den Entwicklungsserver starten. Dadurch wird Ihre Anwendung im Browser geöffnet und Hot-Reloading aktiviert, so dass Ihre Anwendung automatisch aktualisiert wird, sobald Sie Änderungen an Ihrem Code vornehmen.

Um den Entwicklungsserver zu starten, führen Sie aus:

Nach einigen Augenblicken sollten Sie eine Ausgabe im Terminal sehen, die anzeigt, dass der Entwicklungsserver läuft, und Ihr Browser öffnet sich automatisch auf http://localhost:3000 und zeigt die Standardseite der React-App an.

Wenn sie sich nicht automatisch öffnet, können Sie Ihren Browser manuell öffnen und zu http://localhost:3000 gehen.

Schritt 4: Öffnen Sie Ihr Projekt in einem Texteditor

Jetzt läuft Ihr React-Projekt, und Sie können mit dem Programmieren beginnen!

4.1 Installieren Sie einen Texteditor (falls nicht bereits installiert)

Sie brauchen einen Texteditor, um Ihren Code zu schreiben. Einige beliebte Programme sind:

• Visual Studio Code (VS Code): Leichtgewichtig, leistungsstark und weit verbreitet für die React-Entwicklung. Es bietet hervorragende Unterstützung für JavaScript und React.js.
• Sublime Text: Schnell und einfach, mit Unterstützung für viele Programmiersprachen.
• Atom: Ein anpassbarer und hackbarer Texteditor.

4.2 Öffnen Sie Ihr Projekt im Editor

Sobald Sie einen Texteditor installiert haben, öffnen Sie Ihren React-Projektordner (my-react-app) im Editor.

In Visual Studio Code können Sie den Ordner zum Beispiel öffnen, indem Sie Datei > Ordner öffnen wählen und zu Ihrem React-Projektverzeichnis navigieren.

Sie können nun die Dateien im src-Ordner ändern, um mit der Erstellung Ihrer React-Anwendung zu beginnen.

Schritt 5: Erstellen Sie Ihre React-Anwendung für die Produktion

Wenn Sie bereit sind, Ihre React-Anwendung einzusetzen, müssen Sie einen Produktions-Build erstellen. Dadurch wird die Dateigröße minimiert und die Leistung der Anwendung optimiert.

Um einen Produktions-Build zu erstellen, führen Sie den folgenden Befehl aus:

Dadurch wird eine optimierte Version Ihrer Anwendung im

erstellt, die Sie auf einem Webserver bereitstellen können.

Schritt 6: Fehlersuche und häufige Probleme

6.1 Befehl wird nicht erkannt

Wenn die Fehlermeldung “command not recognized” für npm auftritt, kann es daran liegen, dass Node.js während der Installation nicht zum PATH des Systems hinzugefügt wurde. Um dies zu beheben, führen Sie die folgenden Schritte aus:

1. Öffnen Sie die Systemeigenschaften, indem Sie die Windows-Taste R drücken, sysdm.cpl eintippen und die Eingabetaste drücken.
2. Klicken Sie unter der Registerkarte Erweitert auf Umgebungsvariablen.
3. Suchen Sie die Variable Path unter Systemvariablen und klicken Sie auf Bearbeiten.
4. Fügen Sie den Pfad zur Node.js-Installation hinzu (normalerweise C:\Programmdateien\nodejs\) und klicken Sie auf OK.

6.2 Probleme mit React App erstellen

Wenn Sie Probleme mit create-react-app haben, versuchen Sie, Ihren npm-Cache zu leeren und neu zu installieren:

Fazit

Herzlichen Glückwunsch! Sie haben React.js erfolgreich auf Ihrem Windows-Rechner installiert. Sie sind nun bereit, Ihre React-Anwendungen mit JavaScript und dem reichhaltigen Ökosystem an Bibliotheken und Tools zu erstellen, das React bietet. Egal, ob Sie Webanwendungen oder mobile Anwendungen erstellen, React bietet die Flexibilität und Leistungsfähigkeit, um dynamische Benutzeroberflächen zu erstellen.