Configurer un lab pour React sur Linux

  • 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 vous montre comment installer Visual Studio Code 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 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 lab dans Azure Lab Services. Pour plus d'informations sur la création d'un plan Lab, consultez notre tutoriel consacré à 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écification des images de la Place de marché Azure accessibles aux créateurs d’instances Lab.

Paramètre du plan de labo Instructions
Images de la Place de marché Activez l’image « Ubuntu Server 18.04 LTS ».

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 Petite

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

  1. Installez votre navigateur web préféré.

  2. Installez Node.js.

    sudo apt install nodejs

  3. Installez Node Package Manager. Il sera utilisé pour installer React, Redux et JSX.

    sudo apt install npm

  4. Installez Visual Studio Code.

  5. Installez l'extension Outils React Native pour Visual Studio Code.

  6. Si vous le souhaitez, vous pouvez également installer des extensions destinées au développement à l'aide de Redux et JSX.

Create React App prend officiellement en charge la création d'applications React et ne nécessite aucune configuration supplémentaire si vous utilisez NPM 5.2 ou version ultérieure. Pour plus d'informations sur l'utilisation de Create React App, consultez la documentation de prise en main correspondante.

Les autres composants nécessaires à un site web basé sur React sont installés à l'aide de NPM dans une application spécifique. Par exemple, entrez les commandes suivantes pour installer les bibliothèques Redux et JSX :

npm install react-redux
npm install react-jsx

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.

Pour exécuter l'application en mode de développement, utilisez la commande npm start intégrée. Les URL locales et réseau seront répertoriées dans la sortie de la commande. Pour plus d’informations sur l’utilisation du HTTPS au lieu de HTTP, consultez Créer une application React à l'aide du protocole HTTPS dans le cadre du développement.

Mettre à jour les paramètres du pare-feu

Les builds Ubuntu officielles ont iptables installé et autorisent tout le trafic entrant par défaut. Toutefois, si vous utilisez une machine virtuelle qui a un pare-feu plus restrictif, ajoutez une règle de trafic entrant pour autoriser le trafic vers le serveur NodeJS. L’exemple ci-dessous utilise iptables pour autoriser le trafic sur le port 3000.

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

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. Nous avons choisi la taille de machine virtuelle Petite, soit 20 unités Lab.

Pour une classe de 25 étudiants, avec 20 heures de cours prévues et un quota de 10 heures pour le travail personnel ou les devoirs, l’estimation du prix est la suivante :

25 étudiants × (20 heures planifiées + 10 heures de quota) × 20 unités Lab × 0,01 USD par heure = 150 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 :