Lab instellen voor React on Linux

Artikel
04/25/2022

Belangrijk

Azure Lab Services wordt op 28 juni 2027 buiten gebruik gesteld. Zie de handleiding voor buitengebruikstelling voor meer informatie.

Notitie

Dit artikel verwijst naar functies die beschikbaar zijn in labplannen, waardoor labaccounts zijn vervangen.

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 Code installeert voor uw ontwikkelomgeving, de hulpprogramma's en bibliotheken die nodig zijn voor een React-webontwikkelingsklasse.

Labconfiguratie

Als u dit lab wilt instellen, hebt u een Azure-abonnement 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. Zie De Azure Marketplace-installatiekopieën opgeven die beschikbaar zijn voor labmakers voor meer informatie over het inschakelen van Azure Marketplace-installatiekopieën.

Instelling labplan	Instructies
Marketplace-installatiekopieën	Schakel de installatiekopie 'Ubuntu Server 18.04 LTS' in.

Labinstellingen

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

Labinstelling	Weergegeven als
Grootte van de virtuele machine	Small

U wordt aangeraden 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:

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

Ontwikkelhulpprogramma's installeren

Installeer de webbrowser van uw voorkeur.
Installeer Node.js.
```
sudo apt install nodejs
```
Installeer Node Pakketbeheer, dat wordt gebruikt voor het installeren van React, Redux en JSX.
```
sudo apt install npm
```
Installeer Visual Studio Code.
Installeer de extensie Reactive Native Tools voor Visual Studio Code.
Installeer desgewenst extensies voor ontwikkeling met Redux en JSX.

React App maken is een officieel ondersteunde manier om een React-app te maken en vereist geen verdere configuratie als u npm 5.2 en hoger gebruikt. Zie de documentatie om aan de slag te gaan voor meer instructies over het gebruik van Een React-app maken.

Andere onderdelen die nodig zijn voor een React-website, worden geïnstalleerd met NPM in een specifieke toepassing. Voer bijvoorbeeld de volgende opdrachten in om de Redux- en JSX-bibliotheken te installeren:

npm install react-redux
npm install react-jsx

Extensies voor foutopsporingsprogramma installeren

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

Gebruik de ingebouwde opdracht om de app uit te voeren in de npm start ontwikkelmodus. De lokale url's en netwerk-URL's worden vermeld in de opdrachtuitvoer. Zie React-app maken: HTTPS gebruiken in ontwikkeling voor meer informatie over het gebruik van HTTPS in plaats van HTTP.

Firewallinstellingen bijwerken

Officiële Ubuntu-builds hebben iptables geïnstalleerd en staan al het binnenkomende verkeer standaard toe. Als u echter een virtuele machine met een meer beperkende firewall gebruikt, voegt u een regel voor inkomend verkeer toe aan de NodeJS-server. In het onderstaande voorbeeld worden iptables gebruikt om verkeer naar poort 3000 toe te staan.

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

Belangrijk

Docenten moeten de sjabloon-VM of een andere lab-VM gebruiken om toegang te krijgen tot de website van een leerling/student.

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:

Delen via