Freigeben über

Einrichten eines Labs für React unter Linux

Wichtig

Azure Lab Services wird am 28. Juni 2027 eingestellt. Weitere Informationen finden Sie im Rentenleitfaden.

Hinweis

In diesem Artikel werden die in Lab-Plänen verfügbaren Features referenziert, die Lab-Konten ersetzt haben.

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 wird gezeigt, wie Sie Visual Studio 2019 für Ihre Entwicklungsumgebung sowie die Tools und Bibliotheken installieren, die für eine React-Webentwicklungsklasse erforderlich sind.

Laborkonfiguration

Zum Einrichten dieses Labs benötigen Sie zunächst ein Azure-Abonnement und einen Labplan. Wenn Sie nicht über ein Azure-Abonnement verfügen, erstellen Sie ein kostenloses Konto , 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 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.

Lab-Kontoeinstellungen Anweisungen
Marktplatzbild Aktivieren Sie das Image „Visual Studio 2019 Community (aktuelles Release) auf Windows Server 2019 (x64)“.

Labeinstellungen

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

Laborumgebung 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 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

Das Image "Visual Studio 2019 Community (neueste Version) unter Windows Server 2019 (x64)" verfügt bereits über die erforderliche Node.js Entwicklungsworkload für Visual Studio 2019.

  1. Installieren Sie Ihren bevorzugten Webbrowser. Der Internet Explorer ist für das Image standardmäßig installiert.
  2. Navigieren Sie zu Node.js Website, und wählen Sie die Schaltfläche " Herunterladen " aus. Sie können die neueste LTS-Version (Long-Term Service), die aktuelle Version mit den neuesten Features oder ein früheres Release verwenden. Bei der Installation von NodeJS wird auch der Node Package Manager installiert, der für die Installation von React, Redux und JSX verwendet wird.
  3. Aktualisieren Sie Visual Studio 2019 bei Bedarf auf die neueste Version.

Andere Komponenten, die für eine React-basierte Website benötigt werden, werden mit npm in einer bestimmten Anwendung installiert. Informationen zum Hinzufügen von NPM-Paketen finden Sie unter "Verwalten ihrer NPM-Pakete" in Visual Studio.

Wenn Sie beispielsweise das Node.js interaktives Fenster in einem Projekt verwenden, geben Sie die folgenden Befehle ein, um die Bibliotheken React, Redux und JSX zu installieren:

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

Informationen zum Erstellen Ihrer ersten Node.js mit der React-App in Visual Studio finden Sie im Lernprogramm: 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.

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 Studenten zugreifen möchten, fügen Sie eine Firewallregel für eingehenden Datenverkehr hinzu, um den Zugriff zu ermöglichen. Sehen Sie sich die Anwendungsport-Projekteigenschaft an, um zu sehen, welcher Port beim Debuggen verwendet wird. Im folgenden Beispiel wird das PowerShell-Cmdlet "New-NetFirewallRule " verwendet, um den Zugriff auf Port 1337 zu ermöglichen.

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:

  • Last updated on