Einrichten eines Labs für React unter Linux
Wichtig
Azure Lab Services wird am 28. Juni 2027 eingestellt. Weitere Informationen finden Sie im Einstellungsleitfaden.
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 wird erläutert, wie Sie Visual Studio 2019 für Ihre Entwicklungsumgebung installieren und welche Tools und Bibliotheken für einen React-Webentwicklungskurs erforderlich sind.
Labkonfiguration
Zum Einrichten dieses Labs benötigen Sie zunächst ein Azure-Abonnement und einen Labplan. 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 erhalten, können Sie ein neues Lab-Konto 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.
| Lab-Kontoeinstellungen | Anweisungen |
|---|---|
| Marketplace-Image | Aktivieren Sie das Image ‚Visual Studio 2019 Community (aktuelles Release) unter Windows Server 2019 (x64)‘ zur Verwendung in Ihrem Lab-Konto. |
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 | Mittel |
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:
- Installieren von Entwicklungstools
- Installieren von Debuggererweiterungen für Ihren Webbrowser
- Aktualisieren der Firewalleinstellungen
Installieren von Entwicklungstools
Im Zusammenhang mit dem Image „Visual Studio 2019 Community (neuestes Release) unter Windows Server 2019 (x64)“ ist die erforderliche Workload Node.js-Entwicklung für Visual Studio 2019 bereits installiert.
- Installieren Sie Ihren bevorzugten Webbrowser. Der Internet Explorer ist für das Image standardmäßig installiert.
- Navigieren Sie zur Website Node.js, und klicken Sie auf die Schaltfläche Herunterladen. Sie können die neueste LTS-Version (Long-Term Service), die aktuelle Version mit den neuesten Features oder ein früheres Release verwenden. Wenn Sie NodeJS installieren, wird auch der Node-Paket-Manager installiert, der zum Installieren von React, Redux und JSX verwendet wird.
- Aktualisieren Sie Visual Studio 2019 bei Bedarf auf das neueste Release.
Andere Komponenten, die für eine React-basierte Website benötigt werden, werden mit npm in einer bestimmten Anwendung installiert. Weitere Informationen zum Hinzufügen von npm-Paketen finden Sie unter Verwalten von NPM-Paketen in Visual Studio.
Wenn Sie in einem Projekt beispielsweise das interaktive Node.js-Fenster verwenden, geben Sie die folgenden Befehle ein, um die React-, Redux- und JSX-Bibliotheken zu installieren:
.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx
Informationen zum Erstellen Ihrer ersten Node.js- und React-App in Visual Studio finden Sie unter Tutorial: Erstellen einer Node.js- und React-App in Visual Studio.
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.
- Reaktivieren Sie das Entwicklertools-Add-On für Microsoft Edge
- Chrome-Erweiterung „React Developer Tools“ (React-Entwicklertools)
- Firefox-Add-On „React Developer Tools“ (React-Entwicklertools)
Aktualisieren der Firewalleinstellungen
Eingehender Datenverkehr an Ihren Node.js-Server wird standardmäßig blockiert. Wenn Sie während der Ausführung auf die Website eines Kursteilnehmers zugreifen möchten, fügen Sie eine Firewallregel für eingehenden Datenverkehr hinzu, um den Datenverkehr zuzulassen. Sehen Sie sich die Projekteigenschaft „Anwendungsport“ an, um herauszufinden, welcher Port während des Debuggens verwendet wird. Im folgenden Beispiel wird das PowerShell-Cmdlet New-NetFirewallRule verwendet, um den Zugriff auf Port 1337 zuzulassen.
New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow
Wichtig
Lehrkräfte müssen die Vorlagen-VM oder eine andere Lab-VM verwenden, um auf die Website eines Kursteilnehmers zuzugreifen.
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: