Share via

Créer une application React

  • Article

Dans cette introduction de 5 à 10 minutes à l’environnement de développement intégré (IDE) Visual Studio, vous créez et exécutez une application web frontale React simple.

Prérequis

Veillez à installer les éléments suivants :

Créer votre application

  1. Dans la fenêtre Démarrage (choisissez Fichier> Fenêtre de démarrage à ouvrir), sélectionnez Créer un nouveau projet.

    Screenshot showing Create a new project

  2. Recherchez React dans la barre de recherche en haut, puis sélectionnez Projet React JavaScript autonome ou Projet React TypeScript autonome, en fonction de vos préférences.

    Screenshot showing choosing a template

  3. Donnez un nom à votre projet et à votre solution.

    Si vous avez précédemment sélectionné le modèle React JavaScript autonome, lorsque vous accédez à la fenêtre Informations supplémentaires, veillez à NE PAS sélectionner l’option Ajouter l’intégration pour le projet vide ASP.NET Web API. Cette option ajoute des fichiers à votre modèle React afin qu’il puisse être relié au projet ASP.NET Core, si un projet ASP.NET Core est ajouté.

    Screenshot showing Additional information

  4. Choisissez Créer, puis attendez que Visual Studio crée le projet.

    Veuillez noter que la création du projet React prend un moment, car la commande create-react-app qui s’exécute à ce moment-là exécute également la commande npm install

Affichez les propriétés du projet

Les paramètres de projet par défaut vous permettent de générer et de déboguer le projet. Toutefois, si vous devez modifier les paramètres, faites un clic droit sur le projet dans l’Explorateur de solutions, sélectionnez Propriétés, puis accédez à la section Build ou Débogage.

Notes

launch.json stocke les paramètres de démarrage associés au bouton Démarrer dans la barre d’outils Débogage. Actuellement, launch.json doit se trouver sous le dossier .vscode .

Générez votre projet

Choisissez Générer>Générer la solution pour générer le projet.

Démarrez votre projet

Appuyez sur F5 ou sélectionnez le bouton Démarrer en haut de la fenêtre, et une invite de commandes s’affiche :

  • VITE v4.4.9 prêt en 780 ms

Note

Vérifiez la sortie de la console pour les messages, tels qu’un message vous demandant de mettre à jour votre version de Node.js.

Ensuite, vous devriez voir l’application React de base s’afficher !

Étapes suivantes

Pour l’intégration ASP.NET Core :

Créer une application ASP.NET Core avec React