Share via

Configurer un labo pour React sur Windows

  • Article

Remarque

Cet article fait référence aux fonctionnalités disponibles dans les plans de labo, qui ont remplacé les comptes de labo.

React est une bibliothèque JavaScript couramment utilisée pour créer des interfaces utilisateur (IU). 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. Elle est souvent utilisée en complément de React. JSX est une extension syntaxique de la bibliothèque JavaScript souvent utilisée avec React pour décrire ce à quoi 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, et présente les outils et bibliothèques nécessaires pour un cours de développement web avec 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 labo, consultez notre tutoriel consacré à la configuration d’un plan labo. 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écification des images de la Place de marché Azure accessibles aux créateurs d’instances Lab.

Paramètres du compte lab Instructions
Image de la Place de marché Activez l’image « Visual Studio 2019 Community (dernière version) sur Windows Server 2019 (x64) ».

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.

Paramètre de labo Valeur
Taille de la machine virtuelle Moyenne

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 des machines virtuelles.

Configuration du modèle 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

La charge de travail de développement Node.js requise est déjà installée pour Visual Studio 2019 sur l’image Visual Studio 2019 Community (version la plus récente) sur Windows Server 2019 (x64).

  1. Installez votre navigateur web préféré. Internet Explorer est installé par défaut sur l’image.
  2. Accédez au site web Node.js 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. Installer Node JS installera également Node Package Manager. Il 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 Node.js interactive 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 Didacticiel : 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.

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é port d’application du projet pour déterminer le port qui sera utilisé pendant le débogage. L’exemple ci-dessous utilise le cmdlet 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

Important

Les enseignants doivent utiliser le modèle de machine virtuelle ou une autre machine virtuelle de labo pour accéder au site web d’un étudiant.

Coût

Penchons-nous sur un exemple d’estimation du coût pour ce cours. Supposons que vous ayez une classe de 25 élèves. Chaque élève dispose de 20 heures de cours programmées. Chaque élève dispose également d'un quota de 10 heures pour les devoirs et activités à la maison en dehors des heures de cours programmées. La taille de machine virtuelle que nous avons choisie était Moyenne, soit 55 unités Lab.

  • 25 étudiants × (20 heures planifiées + 10 heures de quota) × 55 unités Lab × 0,01 USD par heure = 412,50 USD

Important

L’estimation du coût est fournie à titre d’exemple uniquement. Pour connaître les tarifs actuels, consultez Tarifs Azure Lab Services.

Étapes suivantes

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

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