Teilen über

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

  1. Installieren von Entwicklungstools
  2. Installieren von Debuggererweiterungen für Ihren Webbrowser
  3. 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.

  1. Installieren Sie Ihren bevorzugten Webbrowser. Der Internet Explorer ist für das Image standardmäßig installiert.
  2. 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.
  3. 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.

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.

Kosten

Sehen wir uns eine Beispielkostenschätzung für diesen Kurs an. Angenommen, Sie haben einen Kurs mit 25 Kursteilnehmern. Für jeden Kursteilnehmer ist eine Kurszeit von 20 Stunden geplant. Zudem erhält jeder Kursteilnehmer ein Kontingent von zehn zusätzlichen Stunden für Hausaufgaben und Arbeitsaufträge außerhalb der geplanten Kurszeit. Als Größe des virtuellen Computers wurde Mittel ausgewählt, was 55 Lab-Einheiten entspricht.

  • 25 Kursteilnehmer × (20 geplante Stunden + 10 Kontingentstunden) × 55 Lab-Einheiten × 0,01 USD pro Stunde = 412,50 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: