Dela via

Konfigurera labb för React i Windows

  • Artikel

Viktigt!

Azure Lab Services dras tillbaka den 28 juni 2027. Mer information finns i pensionsguiden.

Kommentar

Den här artikeln refererar till funktioner som är tillgängliga i labbplaner, som ersatte labbkonton.

React är ett populärt JavaScript-bibliotek för att skapa användargränssnitt (UI). React är ett deklarativt sätt att skapa återanvändbara komponenter för din webbplats. Det finns många andra populära bibliotek för JavaScript-baserad frontend-utveckling. Vi använder några av de här biblioteken när vi skapar vårt labb. Redux är ett bibliotek som tillhandahåller förutsägbar tillståndscontainer för JavaScript-appar och som ofta används som komplement till React. JSX är ett bibliotekssyntaxtillägg till JavaScript som ofta används med React för att beskriva hur användargränssnittet ska se ut. NodeJS är ett bekvämt sätt att köra en webbserver för ditt React-program.

Den här artikeln visar hur du installerar Visual Studio 2019 för din utvecklingsmiljö och de verktyg och bibliotek som behövs för en React-webbutvecklingsklass.

Labbkonfiguration

För att konfigurera den här labbuppgiften behöver du en Azure-prenumeration och en labbplan för att komma igång. Om du inte har någon Azure-prenumeration skapar du ett kostnadsfritt konto innan du börjar.

Inställningar för labbplan

När du har en Azure-prenumeration kan du skapa en ny labbplan i Azure Lab Services. Mer information om hur du skapar en ny labbplan finns i självstudien om hur du konfigurerar en labbplan. Du kan också använda en befintlig labbplan.

Aktivera inställningarna för labbplanen enligt beskrivningen i följande tabell. Mer information om hur du aktiverar Azure Marketplace-avbildningar finns i Ange de Azure Marketplace-avbildningar som är tillgängliga för labbskapare.

Kontoinställning för labb Instruktioner
Marketplace-avbildning Aktivera "Visual Studio 2019 Community (senaste versionen) på Windows Server 2019 (x64)"-avbildning.

Labbinställningar

Anvisningar om hur du skapar ett labb finns i Självstudie: Konfigurera ett labb. Använd följande inställningar när du skapar labbet.

Labbinställning Värde
Storlek för virtuell dator Medel

Vi rekommenderar att du testar dina arbetsbelastningar för att se om en större storlek behövs. Mer information om varje storlek finns i Storlek på virtuella datorer.

Konfiguration av malldator

Stegen i det här avsnittet visar hur du slutför följande för att konfigurera den virtuella malldatorn:

  1. Installera utvecklingsverktyg.
  2. Installera felsökningstillägg för webbläsaren.
  3. Uppdatera brandväggsinställningarna.

Installera utvecklingsverktyg

Avbildningen "Visual Studio 2019 Community (senaste versionen) på Windows Server 2019 (x64)" har redan den nödvändiga Node.js utvecklingsarbetsbelastningen installerad för Visual Studio 2019.

  1. Installera önskad webbläsare. Avbildningen har Internet Explorer installerat som standard.
  2. Gå till Node.js webbplats och välj knappen Ladda ned . Du kan använda den senaste versionen av den långsiktiga tjänsten (LTS), den aktuella versionen med de senaste funktionerna eller en tidigare version. Om du installerar NodeJS installeras även Node Upravljač za pakete, som används för att installera React, Redux och JSX.
  3. Uppdatera Visual Studio 2019 till den senaste versionen om det behövs.

Andra komponenter som behövs för en React-baserad webbplats installeras med hjälp av NPM i ett specifikt program. Information om hur du lägger till NPM-paket finns i Hantera dina NPM-paket i Visual Studio.

Om du till exempel använder det interaktiva Node.js-fönstret i ett projekt anger du följande kommandon för att installera biblioteken React, Redux och JSX:

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

Information om hur du skapar din första Node.js med React-appen i Visual Studio finns i Självstudie: Skapa en Node.js- och React-app i Visual Studio.

Installera felsökningstillägg

Installera React Developer Tools-tilläggen för webbläsaren så att du kan granska React-komponenter och registrera prestandainformation.

Uppdatera brandväggsinställningar

Som standard blockeras inkommande trafik till Node.js-servern. Om du vill komma åt en elevs webbplats när den körs lägger du till en intern brandväggsregel för att tillåta trafiken. Titta på projektegenskapen Programport för att se vilken port som ska användas under felsökningen. I exemplet nedan används PowerShell-cmdleten New-NetFirewallRule för att tillåta åtkomst till port 1337.

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

Viktigt!

Lärare måste använda den virtuella malldatorn eller en annan virtuell labbdator för att få åtkomst till en elevs webbplats.

Kostnad

Nu ska vi gå igenom en exempelkostnadsuppskattning för den här klassen. Anta att du har en klass på 25 elever. Varje elev har 20 timmars schemalagd klasstid. Ytterligare 10 kvottimmar för läxor eller tilldelningar utanför schemalagd klasstid ges till varje elev. Den virtuella datorstorleken vi valde var Medel, vilket är 55 labbenheter.

  • 25 studenter × (20 schemalagda timmar + 10 kvottimmar) × 55 labbenheter × 0,01 USD per timme = 412,50 USD

Viktigt!

Kostnadsuppskattningen är endast i exempelsyfte. Aktuell prisinformation finns i Prissättning för Azure Lab Services.

Nästa steg

Mallbilden kan nu publiceras i labbet. Mer information finns i Publicera den virtuella malldatorn.

När du konfigurerar labbuppgiften kan du läsa följande artiklar: