Comment exécuter une application React dans Visual Studio Code

Découvrez comment exécuter vos applications React dans Visual Studio Code sans environnement séparé, en suivant des étapes simples pour installer Node.js, configurer votre projet et démarrer le serveur.

Développez et exécutez vos applications React directement dans Visual Studio Code. Pas besoin d’un environnement séparé, mais Node.js est incontournable, tout comme un projet React déjà en place.

Exécution d'une application React dans Visual Studio Code

Voici comment procéder.

1. Installez Node.js
2. Ouvrez votre projet React dans Visual Studio Code
3. Installez les dépendances du projet
4. Démarrez le serveur de développement React
5. Accédez à l'application React dans votre navigateur
6. Arrêtez le serveur de développement React

Installer Node.js

Node.js exécute JavaScript en dehors du navigateur et gère les dépendances de votre projet React. Téléchargez et installez la dernière version LTS si ce n’est pas déjà fait. Pour le vérifier, ouvrez l'invite de commandes ou le terminal de VS Code et lancez :

node -v

Vérifiez aussi npm :

npm -v

Ouvrir le projet React dans Visual Studio Code

Lancez Visual Studio Code et ouvrez le dossier de votre application. Sous Fichier > Ouvrir le dossier, sélectionnez votre projet. Alternativement, depuis le terminal, naviguez vers le dossier et entrez :

code .

Une fois le dossier chargé, des fichiers comme src, public et package.json devraient apparaître dans le panneau Explorer.

Installer les dépendances du projet

Utilisez le terminal intégré pour installer les dépendances. Allez dans Terminal > Nouveau terminal. Si le terminal s'ouvre en bas de l'écran de VS Code, vérifiez que vous êtes bien dans le dossier racine de votre projet React (où se trouve package.json). Pour voir son contenu, exécutez dir sur Windows ou ls sur macOS/Linux.

Si votre projet vient de Git ou d'un téléchargement, les dépendances sont probablement absentes. Exécutez npm install dans le répertoire du projet pour les installer. npm lira package.json et téléchargera tout ce qu'il faut dans node_modules. En général, cette commande est à exécuter seulement au premier téléchargement ou si les dépendances ont changé.

Démarrer le serveur de développement React

Une fois les dépendances installées, démarrez l'application avec la commande indiquée dans les scripts du projet. Pour beaucoup de projets React, utilisez npm run dev. Pour d’autres, surtout ceux faits avec Create React App, c’est npm start qui est requis.

Vérifiez quelle commande utiliser dans la section scripts de package.json. Par exemple :

"scripts": { "dev": "vite", "build": "vite", "preview": "vite preview" }

Dans ce cas, npm run dev est la bonne commande.

Ouvrir l'application React dans votre navigateur

Dès que le serveur de développement est actif, le terminal affichera une adresse locale. Pour Vite, attendez-vous à quelque chose comme http://localhost:5173/. Si vous utilisez Create React App, ça sera souvent http://localhost:3000/. Votre application React devrait maintenant être visible dans le navigateur.

Apportez des modifications aux fichiers source de l’application depuis VS Code. Les serveurs de développement React proposent souvent le rechargement à chaud, ce qui signifie que les modifs s’affichent instantanément dans le navigateur. Par exemple, ouvrez src/App.jsx et changez un texte dans le fichier.

Enregistrez le fichier. Retournez dans le navigateur. Le serveur de développement va reconstruire l'application et afficher le contenu fraîchement mis à jour.

Arrêter le serveur de développement React

Pour mettre fin à votre session, cliquez dans le terminal de VS Code où le serveur tourne et appuyez sur Ctrl + C. Cela arrête le serveur local React. Pour relancer le serveur, utilisez npm run dev ou npm start.

Exécution d'une application React Native dans Visual Studio Code

Pour faire fonctionner une application React Native, installez Node.js, VS Code et les outils nécessaires. Ouvrez le projet dans VS Code et accédez au terminal intégré. Tapez npm install pour récupérer les dépendances, puis démarrez le serveur avec npm start. Selon votre configuration, lancez l’application sur un émulateur Android en utilisant npm run android ou sur un simulateur iOS avec npm run ios. Pensez à avoir Android Studio et un émulateur bien configuré ou un appareil connecté pour Android.

Exécution de ReactJS dans Visual Studio Code

Pour démarrer une application ReactJS, installez Node.js, puis ouvrez votre dossier de projet dans VS Code. Accédez à Terminal > Nouveau terminal, vérifiez que vous êtes dans le bon dossier avec package.json. Lancez npm install pour les dépendances. Si vous utilisez Vite, démarrez le serveur avec npm run dev. Pour les projets Create React App, optez pour npm start. Le terminal affichera une URL locale, comme http://localhost:5173/. Ouvrez cette adresse dans votre navigateur pour voir votre application en action.

Maintenant que tu as fini de lire Comment exécuter une application React dans Visual Studio Code, nous t'invitons à explorer davantage la catégorie Tutoriels. Tu y trouveras d'autres articles intéressants qui élargiront tes connaissances et te tiendront informé. Ne cesse pas de lire et de découvrir plus!