Condividi tramite

Configurare il lab per React in Windows

  • Articolo

Importante

Azure Lab Services verrà ritirato il 28 giugno 2027. Per altre informazioni, vedere la guida al ritiro.

Nota

Questo articolo fa riferimento alle funzionalità disponibili nei piani lab, che hanno sostituito gli account lab.

React è una libreria JavaScript comune per la creazione di interfacce utente. React è un modo dichiarativo per creare componenti riutilizzabili per il sito Web. Sono disponibili molte altre librerie comuni per lo sviluppo front-end basato su JavaScript. Alcune di queste librerie verranno usate durante la creazione del lab. Redux è una libreria che fornisce un contenitore di stato prevedibile per le app JavaScript e viene spesso usata con React. JSX è un'estensione della sintassi della libreria in JavaScript usata spesso con React per descrivere l'aspetto dell'interfaccia utente. NodeJS è un modo pratico per eseguire un server Web per l'applicazione React.

Questo articolo illustra come installare Visual Studio 2019 per l'ambiente di sviluppo, gli strumenti e le librerie necessari per un corso sullo sviluppo Web con React.

Configurazione del lab

Per configurare questo lab, è necessaria una sottoscrizione di Azure e un piano lab. Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

Impostazioni del piano lab

Dopo aver ottenuto una sottoscrizione di Azure, è possibile creare un nuovo piano lab in Azure Lab Services. Per altre informazioni sulla creazione di un nuovo piano lab, vedere l'esercitazione su come configurare un piano lab. È anche possibile usare un piano lab esistente.

Abilitare le impostazioni del piano lab come descritto nella tabella seguente. Per altre informazioni su come abilitare immagini di Azure Marketplace, vedere Specificare le immagini di Azure Marketplace disponibili per i creatori di lab.

Impostazione dell'account lab Istruzioni
Immagine del Marketplace Abilitare l'immagine "Visual Studio 2019 Community (versione più recente) in Windows Server 2019 (x64)".

Impostazioni del lab

Per istruzioni su come creare un lab, vedere Esercitazione: Configurare un lab. Usare le impostazioni seguenti durante la creazione del lab:

Impostazione del lab Valore
Dimensioni macchina virtuale Medium

È consigliabile testare i carichi di lavoro per verificare se sono necessarie dimensioni maggiori. Per altre informazioni su ogni dimensione, vedere Ridimensionamento delle macchine virtuali.

Configurazione macchina del modello

I passaggi descritti in questa sezione illustrano come completare le operazioni seguenti per configurare la macchina virtuale modello:

  1. Installare gli strumenti di sviluppo.
  2. Installare le estensioni del debugger per il Web browser.
  3. Aggiornare le impostazioni del firewall.

Installare gli strumenti di sviluppo

L'immagine "Visual Studio 2019 Community (versione più recente) in Windows Server 2019 (x64)" include già il carico di lavoro di sviluppo Node.js necessario installato per Visual Studio 2019.

  1. Installare il Web browser preferito. L'immagine include Internet Explorer installato per impostazione predefinita.
  2. Passare a Node.js sito Web e selezionare il pulsante Scarica. È possibile usare la versione più recente del servizio a lungo termine (LTS), la versione corrente con le funzionalità più recenti o una versione precedente. L'installazione di NodeJS installerà anche Gestione pacchetti Node, che verrà usata per installare React, Redux e JSX.
  3. Aggiornare Visual Studio 2019 alla versione più recente, se necessario.

Altri componenti necessari per un sito Web basato su React vengono installati usando NPM in un'applicazione specifica. Per aggiungere pacchetti NPM, vedere Gestire i pacchetti NPM in Visual Studio.

Ad esempio, se si usa la finestra interattiva Node.js in un progetto, immettere i comandi seguenti per installare le librerie React, Redux e JSX:

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

Per creare la prima Node.js con l'app React in Visual Studio, vedere Esercitazione: Creare un'app Node.js e React in Visual Studio.

Installare le estensioni del debugger

Installare le estensioni Strumenti di sviluppo React per il browser in modo da poter esaminare i componenti di React e registrare le informazioni sulle prestazioni.

Aggiornare le impostazioni del firewall

Per impostazione predefinita, il traffico in ingresso verso il server Node.js verrà bloccato. Se si vuole accedere al sito Web di uno studente mentre è in esecuzione, aggiungere una regola del firewall associata per consentire il traffico. Esaminare la proprietà del progetto Porta applicazione per vedere quale porta verrà usata durante il debug. L'esempio seguente usa il cmdlet PowerShell New-NetFirewallRule per consentire l'accesso alla porta 1337.

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

Importante

I docenti devono usare la macchina virtuale modello o un'altra macchina virtuale del lab per accedere al sito Web di uno studente.

Passaggi successivi

È ora possibile pubblicare l'immagine modello nel lab. Per altre informazioni, vedere Pubblicare il modello di macchina virtuale.

Durante la configurazione del lab, vedere gli articoli seguenti: