Configurare il lab per React in Linux

Articolo
04/25/2022

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 Code 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 per iniziare. Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

Impostazioni del piano lab

Dopo aver creato 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 le immagini di Azure Marketplace, vedere Specificare le immagini di Azure Marketplace disponibili per gli autori di lab.

Impostazioni del piano lab	Istruzioni
Immagini del Marketplace	Abilitare l'immagine "Ubuntu Server 18.04 LTS".

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	Small

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

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

Installare gli strumenti di sviluppo

Installare il Web browser preferito.
Installare Node.js.
```
sudo apt install nodejs
```
Installare Node Package Manager, che verrà usato per installare React, Redux e JSX.
```
sudo apt install npm
```
Installare Visual Studio Code.
Installare l'estensione Reactive Native Tools per Visual Studio Code.
Facoltativamente, installare le estensioni per lo sviluppo con Redux e JSX.

Create React App è un modo ufficialmente supportato per creare un'app React e non richiede altre configurazioni se si usa NPM 5.2 e versioni successive. Per altre istruzioni su come usare Create React App, vedere la documentazione introduttiva.

Altri componenti necessari per un sito Web basato su React vengono installati usando NPM in un'applicazione specifica. Ad esempio, immettere i comandi seguenti per installare le librerie Redux e JSX:

npm install react-redux
npm install react-jsx

Installare le estensioni del debugger

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

Per eseguire l'app in modalità di sviluppo, usare il comando predefinito npm start. Gli URL di rete e locali verranno elencati nell'output del comando. Per altre informazioni su come usare HTTPS anziché HTTP, vedere Create React App: Using HTTPS in Development.

Aggiornare le impostazioni del firewall

Le build ufficiali di Ubuntu hanno iptables installate e consentiranno tutto il traffico in ingresso per impostazione predefinita. Tuttavia, se si usa una macchina virtuale con un firewall più restrittivo, aggiungere una regola in ingresso per consentire il traffico al server NodeJS. L'esempio seguente usa iptables per consentire il traffico verso la porta 3000.

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

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:

Condividi tramite