Einrichten eines Labs für React unter Linux

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen (UI). React ist eine deklarative Möglichkeit, wiederverwendbare Komponenten für Ihre Website zu erstellen. Es gibt viele weitere beliebte Bibliotheken für die JavaScript-basierte Front-End-Entwicklung. Wir werden einige dieser Bibliotheken verwenden, während wir unser Labor erstellen. Redux ist eine Bibliothek, die vorhersehbaren Zustandscontainer für JavaScript-Apps bereitstellt und häufig in Kompliment mit React verwendet wird. JSX ist eine Bibliothekssyntaxerweiterung für JavaScript, die häufig mit React verwendet wird, um zu beschreiben, wie die Benutzeroberfläche aussehen soll. NodeJS ist eine bequeme Möglichkeit, einen Webserver für Ihre React-Anwendung auszuführen.

In diesem Artikel erfahren Sie, wie Sie Visual Studio Code für Ihre Entwicklungsumgebung, die Tools und Bibliotheken installieren, die für eine React-Webentwicklungsklasse erforderlich sind.

Labkonfiguration

Zum Einrichten dieses Labs benötigen Sie als Einstieg ein Azure-Abonnement. Wenn Sie nicht über ein Azure-Abonnement verfügen, erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Laborplan-Einstellungen

Sobald Sie ein Azure-Abonnement besitzen, können Sie einen neuen Labplan in Azure Lab Services erstellen. Weitere Informationen zum Erstellen eines neuen Laborplans finden Sie im Lernprogramm zum Einrichten eines Laborplans. Sie können auch einen vorhandenen Labplan verwenden.

Aktivieren Sie die Einstellungen Ihres Lab-Plans wie in der folgenden Tabelle beschrieben. Weitere Informationen zum Aktivieren von Azure Marketplace-Images finden Sie unter Angeben der Azure Marketplace-Images, die für Laborersteller verfügbar sind.

Labeinstellungen

Anweisungen zum Erstellen eines Labors finden Sie im Lernprogramm: Einrichten eines Labors. Verwenden Sie beim Erstellen des Labs die folgenden Einstellungen:

Es wird empfohlen, Ihre Workloads zu testen, um festzustellen, ob eine größere Dimensionierung erforderlich ist. Weitere Informationen zu jeder Größe finden Sie unter VM-Größenanpassung.

Konfiguration des Vorlagencomputers

Die Schritte in diesem Abschnitt zeigen, wie Sie Folgendes ausführen, um die Vorlagen-VM einzurichten:

1. Installieren von Entwicklungstools
2. Installieren von Debuggererweiterungen für Ihren Webbrowser
3. Aktualisieren der Firewalleinstellungen

Installieren von Entwicklungstools

1. Installieren Sie Ihren bevorzugten Webbrowser.

2. Installieren Sie Node.js.

   sudo apt install nodejs
   

3. Installieren Sie den Node Package Manager, der für die Installation von React, Redux und JSX verwendet wird.

   sudo apt install npm
   

4. Installieren Sie Visual Studio Code.

5. Installieren Sie die Erweiterung "Reaktive native Tools" für Visual Studio Code.

6. Installieren Sie optional Erweiterungen für die Entwicklung mit Redux und JSX.

Create React App ist eine offiziell unterstützte Möglichkeit zum Erstellen einer React-App und erfordert keine weitere Konfiguration, wenn Sie npm 5.2 und höher verwenden. Weitere Anweisungen zur Verwendung von Create React App finden Sie in der Dokumentation zu den ersten Schritten .

Andere Komponenten, die für eine React-basierte Website benötigt werden, werden mit npm in einer bestimmten Anwendung installiert. Geben Sie beispielsweise die folgenden Befehle ein, um die Redux- und JSX-Bibliotheken zu installieren:

npm install react-redux
npm install react-jsx

Installieren von Debuggererweiterungen

Installieren Sie die Erweiterungen für React-Entwicklertools für Ihren Browser, damit Sie React-Komponenten untersuchen und Leistungsinformationen aufzeichnen können.

• React Developer Tools Edge-Add-On
• Chrome-Erweiterung für React-Entwicklertools
• React Developer Tools FireFox-Add-On

Verwenden Sie den integrierten Befehl npm start, um die App im Entwicklungsmodus auszuführen. Die lokalen und Netzwerk-URLs werden in der Befehlsausgabe aufgeführt. Weitere Informationen zur Verwendung von HTTPS anstelle von HTTP finden Sie unter Create React App: Using HTTPS in Development.

Aktualisieren der Firewalleinstellungen

Offizielle Ubuntu-Builds haben iptables installiert und lassen standardmäßig den gesamten eingehenden Datenverkehr zu. Wenn Sie allerdings einen virtuellen Computer mit einer restriktiveren Firewall verwenden, fügen Sie eine Eingangsregel hinzu, um Datenverkehr an den NodeJS-Server zuzulassen. Im folgenden Beispiel werden IP-Tables verwendet, um Datenverkehr zu Port 3000 zuzulassen.

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

Nächste Schritte

Das Vorlagenimage kann jetzt im Lab veröffentlicht werden. Weitere Informationen finden Sie unter Veröffentlichen der Vorlagen-VM.

Lesen Sie folgende Artikel zum Einrichten des Labs:

• Kontingent festlegen
• Festlegen eines Zeitplans
• Benutzer hinzufügen
• Links zur E-Mail-Registrierung für Schüler/Studenten