Dela via

Konfigurera labb för React på Linux

  • Artikel

Viktigt!

Azure Lab Services tas ur bruk 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 Code för din utvecklingsmiljö, 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 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.

Inställning för labbplan Instruktioner
Marketplace-avbildningar Aktivera avbildningen "Ubuntu Server 18.04 LTS".

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 Liten

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

  1. Installera önskad webbläsare.

  2. Installera Node.js.

    sudo apt install nodejs

  3. Installera Node Package Manager, som ska användas för att installera React, Redux och JSX.

    sudo apt install npm

  4. Installera Visual Studio Code.

  5. Installera tillägget Reactive Native Tools för Visual Studio Code.

  6. Du kan också installera tillägg för utveckling med Redux och JSX.

Skapa React-appen är ett officiellt sätt att skapa en React-app och kräver ingen ytterligare konfiguration om du använder npm 5.2 och senare. Mer information om hur du använder Skapa React-app finns i dokumentationen om hur du kommer igång .

Andra komponenter som behövs för en React-baserad webbplats installeras med hjälp av NPM i ett specifikt program. Ange till exempel följande kommandon för att installera Redux- och JSX-biblioteken:

npm install react-redux
npm install react-jsx

Installera felsökningstillägg

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

Om du vill köra appen i utvecklingsläge använder du det npm start inbyggda kommandot. Url:er för lokala nätverk och nätverk visas i kommandoutdata. Mer information om hur du använder HTTPS i stället för HTTP finns i Skapa React-app: Använda HTTPS under utveckling.

Uppdatera brandväggsinställningar

Officiella Ubuntu-versioner har iptables installerade och tillåter all inkommande trafik som standard. Men om du använder en virtuell dator som har en mer restriktiv brandvägg lägger du till en regel för inkommande trafik för att tillåta trafik till NodeJS-servern. Exemplet nedan använder iptables för att tillåta trafik till port 3000.

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

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. Den virtuella datorstorleken vi valde var Liten, vilket är 20 labbenheter.

För en klass på 25 elever med 20 timmars schemalagd klasstid och 10 timmars kvot för läxor eller tilldelningar skulle kostnadsuppskattningen vara:

25 studenter × (20 schemalagda timmar + 10 kvottimmar) × 20 labbenheter × USD 0,01 per timme = 150,00 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: