Einrichten eines Labs für React unter Linux

  • Artikel

Hinweis

Dieser Artikel bezieht sich auf Features, die in Labkonten verfügbar sind, welche durch Labpläne ersetzt wurden.

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. Beim Erstellen des Labs werden einige dieser Bibliotheken verwendet. Redux ist eine Bibliothek, die einen vorhersagbaren Zustandscontainer für JavaScript-Apps bereitstellt und häufig als Ergänzung zu 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 sollte. 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 die Bibliotheken installieren, die für einen React-Webentwicklungskurs erforderlich sind.

Labkonfiguration

Zum Einrichten dieses Labs benötigen Sie als Einstieg ein Azure-Abonnement. Wenn Sie kein Azure-Abonnement besitzen, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.

Einstellungen für Labpläne

Sobald Sie ein Azure-Abonnement besitzen, können Sie einen neuen Labplan in Azure Lab Services erstellen. Weitere Informationen zum Erstellen eines neuen Labplans finden Sie im Tutorial zum Einrichten eines Labplans. 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 für Lab-Ersteller verfügbaren Azure Marketplace-Images.

Einstellung für Labplan Anweisungen
Marketplace-Images Aktivieren Sie das Image ‚Ubuntu Server 18.04 LTS‘.

Labeinstellungen

Anweisungen zum Erstellen eines Labs finden Sie unter Tutorial: Einrichten eines Labs. Verwenden Sie beim Erstellen des Labs die folgenden Einstellungen:

Lab-Einrichtung Wert
Größe des virtuellen Computers Klein

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

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-Paket-Manager, der zum Installieren von React, Redux und JSX verwendet wird.

    sudo apt install npm

  4. Installieren Sie Visual Studio Code.

  5. Installieren Sie die Erweiterung „Reactive Native Tools“ für Visual Studio Code.

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

Das Erstellen einer React-App ist eine offiziell unterstützte Methode zum Erstellen einer React-App und erfordert keine weitere Konfiguration, wenn Sie npm 5.2 oder höher verwenden. Weitere Anweisungen zum Verwenden von „Erstellen einer 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.

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 Erstellen einer React-App: Verwenden von HTTPS in der Entwicklung.

Aktualisieren der Firewalleinstellungen

Bei offiziellen Ubuntu-Builds ist Iptables installiert, und es wird standardmäßig sämtlicher eingehender Datenverkehr zugelassen. 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 wird Iptables verwendet, um Datenverkehr am Port 3000 zuzulassen:

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

Wichtig

Lehrkräfte müssen die Vorlagen-VM oder eine andere Lab-VM verwenden, um auf die Website eines Kursteilnehmers zuzugreifen.

Kosten

Sehen wir uns eine Beispielkostenschätzung für diesen Kurs an. Als Größe des virtuellen Computers wurde Klein ausgewählt, was 20 Lab-Einheiten entspricht.

Für einen Kurs mit 25 Teilnehmern, 20 planmäßigen Kursstunden und 10 Stunden Hausaufgaben bzw. Arbeitsaufträgen entstehen geschätzt folgende Kosten:

25 Kursteilnehmer × (20 geplante Stunden + 10 Kontingentstunden) × 20 Lab-Einheiten × 0,01 USD pro Stunde = 150,00 USD

Wichtig

Diese Kostenschätzung dient ausschließlich zu Beispielzwecken. Aktuelle Informationen zu Preisen finden Sie unter Azure Lab Services – Preise.

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: