Lab instellen voor React on Windows

React is een populaire JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces (UI). React is een declaratieve manier om herbruikbare onderdelen voor uw website te maken. Er zijn veel andere populaire bibliotheken voor front-endontwikkeling op basis van JavaScript. We gebruiken een aantal van deze bibliotheken tijdens het maken van ons lab. Redux is een bibliotheek die voorspelbare statuscontainer biedt voor JavaScript-apps en vaak wordt gebruikt in aanvulling op React. JSX is een bibliotheeksyntaxisextensie voor JavaScript die vaak wordt gebruikt met React om te beschrijven hoe de gebruikersinterface eruit moet zien. NodeJS is een handige manier om een webserver uit te voeren voor uw React-toepassing.

In dit artikel wordt beschreven hoe u Visual Studio 2019 installeert voor uw ontwikkelomgeving, evenals de hulpprogramma's en bibliotheken die nodig zijn voor een React-webontwikkelingsklasse.

Labconfiguratie

Als u dit lab wilt instellen, hebt u een Azure-abonnement en labplan nodig om aan de slag te gaan. Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u begint.

Instellingen voor labplannen

Zodra u een Azure-abonnement hebt, kunt u een nieuw labplan maken in Azure Lab Services. Zie de zelfstudie over het instellen van een labplan voor meer informatie over het maken van een nieuw labplan. U kunt ook een bestaand labplan gebruiken.

Schakel de instellingen voor het labplan in zoals beschreven in de volgende tabel. Voor meer informatie over hoe u Azure Marketplace-afbeeldingen kunt inschakelen, zie De Azure Marketplace-installatiekopieën opgeven die beschikbaar zijn voor labmakers.

Labinstellingen

Zie Zelfstudie: Een lab instellen voor instructies voor het maken van een lab. Gebruik de volgende instellingen bij het maken van het lab.

Het is raadzaam om uw workloads te testen om te zien of er een grotere grootte nodig is. Zie VM-grootte voor meer informatie over elke grootte.

Configuratie van sjablooncomputer

In de stappen in deze sectie ziet u hoe u het volgende kunt voltooien om de sjabloon-VM in te stellen:

1. Ontwikkelhulpprogramma's installeren.
2. Installeer extensies voor foutopsporingsprogramma's voor uw webbrowser.
3. Firewallinstellingen bijwerken.

Ontwikkelhulpprogramma's installeren

In de 'Visual Studio 2019 Community (nieuwste versie) op Windows Server 2019 (x64)' image is de vereiste Node.js ontwikkelworkload geïnstalleerd voor Visual Studio 2019.

1. Installeer de webbrowser van uw voorkeur. De afbeelding heeft Internet Explorer standaard geïnstalleerd.
2. Ga naar Node.js website en selecteer de knop Downloaden . U kunt de nieuwste LTS-versie (Long-Term Service), de huidige versie met die nieuwste functies of een vorige release gebruiken. Als u NodeJS installeert, wordt ook Node Pakketbeheer geïnstalleerd, dat wordt gebruikt voor het installeren van React, Redux en JSX.
3. Werk Visual Studio 2019 indien nodig bij naar de nieuwste versie.

Andere onderdelen die nodig zijn voor een React-website, worden geïnstalleerd met NPM in een specifieke toepassing. Als u NPM-pakketten wilt toevoegen, zie uw NPM-pakketten beheren in Visual Studio.

Als u bijvoorbeeld het Node.js Interactive Window in een project gebruikt, voert u de volgende opdrachten in om de React-, Redux- en JSX-bibliotheken te installeren:

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

Zie Zelfstudie: Een Node.js en React-app maken in Visual Studio om uw eerste Node.js met React-app te maken in Visual Studio.

Extensies voor foutopsporingsprogramma installeren

Installeer de React Developer Tools-extensies voor uw browser, zodat u React-onderdelen kunt inspecteren en prestatiegegevens kunt vastleggen.

• React Developer Tools-invoegtoepassing voor Microsoft Edge
• Chrome-extensie voor React Developer Tools
• React Developer Tools FireFox-invoegtoepassing

Firewallinstellingen bijwerken

Standaard wordt binnenkomend verkeer naar uw Node.js-server geblokkeerd. Als u toegang wilt krijgen tot de website van een student terwijl deze actief is, voegt u een inkomende firewallregel toe om het verkeer toe te staan. Bekijk de projecteigenschap Toepassingspoort om te zien welke poort wordt gebruikt tijdens foutopsporing. In het onderstaande voorbeeld wordt de Cmdlet New-NetFirewallRule PowerShell gebruikt om toegang tot poort 1337 toe te staan.

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

Volgende stappen

De sjabloonafbeelding kan nu worden gepubliceerd naar het lab. Zie De sjabloon-VM publiceren voor meer informatie.

Zie de volgende artikelen tijdens het instellen van uw lab:

• Quotum instellen
• Een planning instellen
• Gebruikers toevoegen
• Registratielinks naar studenten via e-mail