Configurer un labo pour React sur Windows

React est une bibliothèque JavaScript populaire pour la création d’interfaces utilisateur (UI). React est un moyen déclaratif de créer des composants réutilisables pour votre site web. De nombreuses autres bibliothèques sont disponibles pour le développement front-end basé sur JavaScript. Nous utiliserons quelques-unes de ces bibliothèques lors de la création de notre labo. Redux est une bibliothèque qui fournit un conteneur d’état prévisible pour les applications JavaScript et est souvent utilisée en compliment avec React. JSX est une extension de syntaxe de bibliothèque pour JavaScript souvent utilisée avec React pour décrire ce que l’interface utilisateur doit ressembler. NodeJS est un moyen pratique d’exécuter un serveur web pour votre application React.

Cet article explique comment installer Visual Studio 2019 pour votre environnement de développement, ainsi que les outils et les bibliothèques nécessaires pour une classe de développement web React.

Configuration du laboratoire

Pour configurer ce labo, vous avez besoin d’un abonnement Azure et d’un plan labo pour commencer. Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

Paramètres du plan de labo

Une fois que vous disposez d’un abonnement Azure, vous pouvez créer un plan labo dans Azure Lab Services. Pour plus d’informations sur la création d’un plan de laboratoire, consultez le tutoriel sur la configuration d’un plan lab. Vous pouvez aussi utiliser un plan de labo existant.

Activez les paramètres de plan de labo comme décrit dans le tableau suivant. Pour plus d’informations sur l’activation des images de la Place de marché Azure, consultez Spécifier les images de la Place de marché Azure disponibles pour les créateurs de laboratoire.

Paramètres du labo

Pour obtenir des instructions sur la création d’un labo, consultez Tutoriel : Configurer un labo. Utilisez les paramètres suivants pour la création du labo.

Nous vous recommandons de tester vos charges de travail pour savoir si une taille supérieure est nécessaire. Pour plus d’informations sur chaque taille, consultez dimensionnement de machine virtuelle.

Configuration du gabarit de machine

Pour configurer le modèle de machine virtuelle, procédez comme suit :

1. Installez les outils de développement.
2. Installez les extensions de débogueur correspondant à votre navigateur web.
3. Mettez à jour les paramètres du pare-feu.

Installer les outils de développement

L’image « Visual Studio 2019 Community (dernière version) sur Windows Server 2019 (x64) » contient déjà la charge de travail de développementNode.js requise installée pour Visual Studio 2019.

1. Installez votre navigateur web préféré. Internet Explorer est installé par défaut sur l’image.
2. Accédez à Node.js site web et sélectionnez le bouton Télécharger . Vous pouvez utiliser la dernière version du service à long terme (LTS), la version actuelle avec les fonctionnalités les plus récentes ou une version précédente. L’installation de NodeJS installe également Node Package Manager, qui sera utilisé pour installer React, Redux et JSX.
3. Mettez à jour Visual Studio 2019 vers la dernière version, si nécessaire.

Les autres composants nécessaires à un site web basé sur React sont installés à l'aide de NPM dans une application spécifique. Pour ajouter des packages NPM, consultez gérer vos packages NPM dans Visual Studio.

Par exemple, si vous utilisez la fenêtre interactiveNode.js dans un projet, entrez les commandes suivantes pour installer les bibliothèques React, Redux et JSX :

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

Pour créer votre première Node.js avec l’application React dans Visual Studio, consultez Tutoriel : Créer une application Node.js et React dans Visual Studio.

Installer les extensions de débogueur

Installez les extensions Outils de développement React correspondant à votre navigateur pour pouvoir inspecter les composants React et enregistrer les informations de performances.

• Module complémentaire Outils de développement React pour Microsoft Edge
• Extension Chrome des outils de développement React
• Module complémentaire FireFox des outils de développement React

Mettre à jour les paramètres du pare-feu

Par défaut, le trafic entrant vers votre serveur Node.js est bloqué. Si vous souhaitez accéder au site Web d’un étudiant pendant qu’il est en cours d’exécution, ajoutez une règle de pare-feu entrante pour autoriser le trafic. Examinez la propriété du projet Port d’application pour voir quel port sera utilisé pendant le débogage. L’exemple ci-dessous utilise l’applet de commande PowerShell New-NetFirewallRule pour autoriser l’accès au port 1337.

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

Étapes suivantes

L’image du modèle peut à présent être publiée dans le labo. Pour plus d’informations, consultez Publier la machine virtuelle de modèle.

Au fil de la configuration de votre instance Lab, consultez les articles suivants :

• Définir le quota
• Définir une planification
• Ajouter des utilisateurs
• Liens d’inscription par e-mail aux étudiants