So installieren Sie ReactJS auf Ubuntu 24.04 LTS

In diesem Tutorial zeigen wir Ihnen, wie Sie ReactJS auf Ubuntu 24.04 LTS installieren. React.JS ist eine beliebte Open-Source-JavaScript-Bibliothek zum Erstellen dynamischer Benutzeroberflächen. React wurde von Facebook entwickelt und ermöglicht es Entwicklern, wiederverwendbare UI-Komponenten zu erstellen und diese bei Datenänderungen effizient zu aktualisieren und darzustellen.

Dieser Artikel setzt voraus, dass Sie über Grundkenntnisse in Linux verfügen, wissen, wie man die Shell benutzt, und, was am wichtigsten ist, dass Sie Ihre Site auf Ihrem eigenen VPS hosten. Die Installation ist recht einfach und setzt voraus, dass Sie das Root-Konto verwenden. Wenn nicht, müssen Sie möglicherweise ‚sudo‚ zu den Befehlen hinzu, um Root-Rechte zu erhalten. Ich zeige Ihnen die schrittweise Installation von ReactJS auf Ubuntu 24.04 (Noble Numbat). Sie können die gleichen Anweisungen auch für Ubuntu 22.04 und jede andere Debian-basierte Distribution wie Linux Mint, Elementary OS, Pop!_OS und mehr befolgen.

Voraussetzungen

  • Ein Server, auf dem eines der folgenden Betriebssysteme läuft: Ubuntu und jede andere Debian-basierte Distribution wie Linux Mint.
  • Um potenzielle Probleme zu vermeiden, wird eine Neuinstallation des Betriebssystems empfohlen.
  • SSH-Zugriff auf den Server (oder öffnen Sie einfach Terminal, wenn Sie an einem Desktop sitzen).
  • Eine aktive Internetverbindung. Sie benötigen eine Internetverbindung, um die erforderlichen Pakete und Abhängigkeiten herunterzuladen.
  • Ein Ubuntu 24.04-System mit Root-Zugriff oder ein Benutzer mit Sudo-Berechtigungen.

Installieren Sie ReactJS auf Ubuntu 24.04 LTS

Schritt 1. Aktualisieren des Paket-Repositorys.

Um einen reibungslosen Installationsprozess zu gewährleisten, ist es wichtig, Ihr Ubuntu-System auf die neueste stabile Version zu aktualisieren. Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus:

sudo apt update

Dadurch werden die aktuellsten Paketinformationen abgerufen und alle veralteten Pakete auf die neuste Version aktualisiert.

Schritt 2. Installieren von Node.js und npm.

React.JS erfordert die Installation von Node.js und npm (Node Package Manager) auf Ihrem System. Wir installieren sie mithilfe des offiziellen NodeSource-Repositorys für die aktuellsten Versionen.

Fügen Sie zunächst das NodeSource-Repository zu Ihrem System hinzu:

curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -

Installieren Sie als Nächstes Node.js und npm, indem Sie Folgendes ausführen:

sudo apt install nodejs

Überprüfen Sie die Installation, indem Sie die Versionen von Node.js und npm prüfen:

node -v
npm -v

Schritt 3. Create-React-App installieren.

Um den Prozess der Erstellung einer neuen React-Anwendung zu vereinfachen, verwenden wir das Dienstprogramm create-react-app. Dieses Tool richtet eine Entwicklungsumgebung mit allen erforderlichen Build-Tools und Konfigurationen ein.

Installieren create-react-app global mit npm:

sudo npm install -g create-react-app

Überprüfen Sie die Installation, indem Sie Folgendes ausführen:

create-react-app --version

Schritt 4. Erstellen Sie Ihre erste React-Anwendung

Mit create-react-app installiert, erstellen wir unsere erste React-Anwendung. Navigieren Sie zu dem Verzeichnis, in dem Sie Ihr Projekt erstellen möchten, und führen Sie den folgenden Befehl aus:

create-react-app my-app

Ersetzen my-app mit dem gewünschten Anwendungsnamen. Dieser Befehl erstellt ein neues Verzeichnis mit dem angegebenen Namen und richtet darin eine grundlegende React-Projektstruktur ein.

Sobald der Projekterstellungsprozess abgeschlossen ist, navigieren Sie in das Projektverzeichnis:

cd my-app

Um den Entwicklungsserver zu starten und Ihre React-Anwendung auszuführen, verwenden Sie den folgenden Befehl:

npm start

Dadurch wird Ihre Anwendung kompiliert und ein lokaler Entwicklungsserver gestartet. Öffnen Sie Ihren Webbrowser und besuchen Sie http://localhost:3000 um Ihre React-Anwendung in Aktion zu sehen.

Schritt 5. Richten Sie einen Reverse-Proxy mit Apache ein.

Wenn Sie Ihre React-Anwendung bereitstellen und über einen Domänennamen zugänglich machen möchten, können Sie mithilfe eines Apache-Webservers einen Reverse-Proxy einrichten. Dieser Schritt ist optional, wird jedoch für Produktionsbereitstellungen empfohlen.

Installieren Sie Apache, indem Sie Folgendes ausführen:

sudo apt install apache2

Erstellen Sie eine neue Konfigurationsdatei für den virtuellen Apache-Host:

sudo nano /etc/apache2/sites-available/react-app.conf

Fügen Sie der Datei die folgende Konfiguration hinzu:

<VirtualHost *:80>
ServerName yourdomain.com
ProxyRequests off
ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

Ersetzen Sie yourdomain.com durch Ihren tatsächlichen Domänennamen.

Speichern Sie die Datei und beenden Sie den Editor. Aktivieren Sie dann den neuen virtuellen Host und die erforderlichen Apache-Module:

sudo a2ensite react-app.conf
sudo a2enmod proxy proxy_http
sudo systemctl restart apache2

Ihre React-Anwendung sollte jetzt über Ihren Domänennamen zugänglich sein.

Herzlichen Glückwunsch! Sie haben ReactJS erfolgreich installiert. Vielen Dank, dass Sie dieses Tutorial zur Installation von ReactJS auf dem Ubuntu 24.04 LTS-System verwendet haben. Für weitere Hilfe oder nützliche Informationen empfehlen wir Ihnen, die ReactJS-Website.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert