Premiers pas avec React et Visual Studio Code

Découvrez comment Vite et VS Code, avec son riche écosystème d’extensions comprenant des assistants de code IA, peuvent augmenter votre puissance et votre flexibilité de développement.

React a parcouru un long chemin depuis l’époque où la création d’un nouveau projet signifiait exécuter une seule commande avec Créer une application React (CRA). Depuis février 2025, le L’équipe React a officiellement abandonné CRA pour les nouvelles applications, il est recommandé aux applications existantes de migrer vers un framework ou de passer à un outil de construction moderne comme Vite, Parcel ou RSBuild.

Ce changement marque une évolution plus large de l’écosystème React, une évolution qui donne la priorité aux performances, à la modularité et à une expérience de développement fluide. Dans ce guide, vous apprendrez à créer une application React à l’aide de Vite et Visual Studio Code (VS Code).

Condition préalable

• Node.js 18+ ou 20+ installé sur votre machine
• npm ou fil gestionnaire de paquets installé sur votre machine ; nous utiliserons npm dans ce tutoriel

Configuration d’une application React avec Vite

Vite est un outil de construction moderne pour le développement frontend créé par Evan You. Il s’agit d’un outil de création d’interface ultra-rapide pour alimenter la prochaine génération d’applications Web. Vite est largement considéré comme le successeur naturel de Create React App (CRA) pour créer des applications React modernes d’une seule page.

Souvent considéré comme un remplacement non officiel du CRA, désormais obsolète, Vite offre une configuration similaire et transparente, sans écarts majeurs. Contrairement à CRA, qui s’appuyait sur Webpack, Vite exploite esconstruire sous le capot, ce qui le rend nettement plus rapide. Il est également plus léger et nécessite moins de configuration.

La configuration d’une application React avec l’outil de build Vite vous permet de travailler avec les principes fondamentaux de React sans la complexité supplémentaire d’un framework à part entière comme Next.js.

Dans cette section, nous allons créer un nouveau projet React à l’aide de l’outil Vite depuis la ligne de commande.

Exécutez la commande suivante dans votre terminal pour créer un nouveau projet avec Vite :

npm create vite@latest  my-react-app

Cette commande sera exécutée pour configurer tous les outils nécessaires pour échafauder un environnement de développement local React.

Après cela, Vite vous demandera de sélectionner un framework :

> npx
> "create-vite" my-react-app

│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

Vite peut être utilisé pour amorcer une gamme de frameworks et de bibliothèques frontend, pas seulement React. Utilisez la touche fléchée de votre clavier pour sélectionner React. Une fois que vous avez sélectionné le framework React, Vite vous demandera de choisir un langage, JavaScript ou TypeScript. Vous pouvez choisir celui que vous préférez pour votre projet.

Pour cet exemple, utilisez vos touches fléchées pour sélectionner JavaScript:

◆  Select a variant:  
│  ○ TypeScript  
│  ○ TypeScript + SWC  
│  ● JavaScript  
│  ○ JavaScript + SWC  
│  ○ React Router v7 ↗  
│  ○ TanStack Router ↗  
│  ○ RedwoodSDK ↗

Vous pouvez voir d’autres options avec SWC. SWC (Speedy Web Compiler) est un compilateur JavaScript/TypeScript utilisé dans Vite pour transformer le code JavaScript et TypeScript. Il s’agit d’un compilateur JavaScript et TypeScript rapide de bas niveau construit avec Rust, conçu pour offrir des temps de construction plus rapides et de meilleures performances.

Après avoir configuré le framework, vous verrez une sortie indiquant que le projet a été échafaudé dans votre dossier de projet. Vite vous demandera ensuite d’installer les dépendances en utilisant npm :

◇  Scaffolding project **in** /Users/mac/my-react-app...  
│  
└  Done. Now run:  
  
cd my-create-app  
npm install  
npm run dev  

Accédez au dossier de votre projet comme indiqué :

cd my-react-app

Ensuite, installez les dépendances pour ce projet :

npm install

Ensuite, démarrez le serveur de développement pour vous assurer que tout fonctionne. Utilisez la commande suivante pour exécuter le serveur de développement :

$ npm run dev

Cette commande exécutera ensuite votre projet en mode développement. Les résultats suivants s’afficheront :

VITE v6.3.5 ready **in** 1227 ms  
  
➜  Local:  http://localhost:5173/  
➜  Network: use --host to expose  
➜  press h + enter to show help

Ensuite, cliquez sur le lien (http://localhost:5173/) pour ouvrir le projet dans votre navigateur :

Configuration du code Visual Studio

Visual Studio Code, ou VS Code en abrégé, est devenu l’un des éditeurs de code les plus recherchés pour le développement Web par rapport aux autres IDE en raison de sa simplicité de mise en place et de fonctionnement avec des plugins adaptés à tout type de projet de développement Web.

Pour commencer, allez sur https://code.visualstudio.com/ pour télécharger une copie adaptée au type de système que vous utilisez (Mac, Windows, Linux). Il détectera automatiquement la version du programme d’installation de votre système. J’utilise un Mac pour ce tutoriel :

Une fois votre téléchargement terminé, exécutez le programme d’installation sur votre ordinateur local et suivez les étapes suivantes pour le configurer. Une fois que vous avez terminé retrouvez-le dans votre dossier d’application pour le démarrer ou ouvrez-le directement avec ce code ci-dessous depuis le terminal dans votre précédemment créé my-react-app dossier:

$ code .

Cela ouvrira automatiquement VS Code avec le fichier de projet :

Extensions de code VS pour les projets React

Les extensions VS Code ajoutent des débogueurs et des outils de développement directement à votre éditeur, améliorant ainsi votre flux de travail et votre productivité. Ce modèle d’extensibilité flexible est l’une des principales raisons pour lesquelles de nombreux développeurs React préfèrent VS Code. Une large gamme d’extensions est disponible pour aider à rationaliser et à améliorer l’expérience de développement Web.

Voici mes cinq meilleures extensions pour accélérer votre développement React :

• Eslint: Le Extension VS Code ESLint intègre ESLint dans votre éditeur. Il analyse votre code de manière statique pour identifier et résoudre rapidement les problèmes, vous aidant ainsi à éviter les bogues et à écrire un code plus propre et plus cohérent. Pour l’installer, ouvrez l’onglet Extensions dans VS Code et recherchez « ESLint ».

• Plus jolie: Plus jolie est un formateur de code avisé qui applique un style cohérent dans votre base de code. L’extension Prettier vous permet de configurer facilement votre éditeur pour formater automatiquement le code lors de l’enregistrement. Pour l’installer, recherchez Prettier - Code formatter dans l’onglet Extensions de VS Code.

• npm Intellisense: npm Intellisense est un plugin qui propose des suggestions de saisie semi-automatique pour les modules npm dans les instructions d’importation. Il gère automatiquement les importations des packages npm, vous aidant ainsi à réduire les frappes au clavier et à gagner du temps. Pour l’installer, recherchez npm Intellisense dans l’onglet Extensions de VS Code.

• Extraits de réaction simples: Extraits de réaction simples est une extension pratique qui fournit une collection d’extraits de code et de commandes React prédéfinis conçus pour accélérer votre flux de travail de développement. Avec cette extension, vous pouvez générer rapidement du code passe-partout React couramment utilisé. Pour l’installer, recherchez « Simple React Snippets » dans l’onglet Extensions de VS Code.

• Coût d’importation : Coût d’importation est une autre excellente extension VS Code qui affiche la taille des packages importés directement dans l’éditeur. Il utilise Webpack pour détecter la taille de chaque importation, vous aidant ainsi à rester conscient de l’impact de vos dépendances sur la taille du bundle. Pour installer l’extension, ouvrez l’onglet Extensions dans VS Code et recherchez « Coût d’importation ».

Cliquez sur Code dans le coin supérieur gauche, puis sélectionnez Paramètres et cliquez sur Rallonges. Vous pouvez également appuyer sur ⇧+⌘+X sur Mac, ou Ctrl+Shift+X sous Windows, pour ouvrir le panneau d’installation de VS Code Extensions Marketplace :

VS Code propose un vaste marché d’extensions avec une large gamme d’outils adaptés aux développeurs React.

Extensions VS Code AI pour le développement Web

Alors que l’IA générative continue de transformer le paysage du développement logiciel, Visual Studio Code Marketplace propose désormais plus de 400 extensions basées sur l’IA.

Voici quelques-uns de mes cinq meilleurs pour accélérer votre projet de développement Web :

Copilote Github: Copilote GitHub est l’une de mes préférées parmi toutes ces extensions. Il s’agit d’un outil de programmation IA par les pairs qui vous aide à écrire du code plus rapidement et plus intelligemment. Il s’adapte parfaitement à vos besoins uniques, vous permettant de choisir le meilleur modèle pour votre projet, de personnaliser les réponses de chat avec des instructions spécifiques et d’utiliser des agents pour des sessions de programmation en binôme fluides et pilotées par l’IA. Lorsque vous l’installez dans Visual Studio Code, il inclut deux extensions : Copilote GitHub et Chat copilote GitHub.

Code intelligent: IntelliCode améliore les fonctionnalités standard de complétion de code de IntelliSense en allant au-delà de la simple analyse du contexte de votre projet. Au lieu de cela, il exploite les informations de milliers de référentiels GitHub open source pour faire apparaître les suggestions de code les plus pertinentes et les plus couramment utilisées en haut de la liste. Vous aurez besoin de Visual Studio Code octobre 2018 version 1.29.1 ou ultérieure pour utiliser cette extension.

Plugin Windsurf (anciennement Codeium): Planche à voile est une boîte à outils gratuite d’accélération de code basée sur l’IA. Il s’agit d’une superpuissance de codage moderne construite sur une technologie d’IA de pointe. Il offre des fonctionnalités telles que la saisie semi-automatique, le chat et la recherche dans plus de 70 langues, avec une vitesse fulgurante et une qualité de suggestion de pointe. Rechercher Windsurf Plugin dans l’onglet extension du code VS pour l’installer.

Tabnine: Semblable à la planche à voile, Tabnine offre la meilleure complétion de code d’IA et un chat alimenté par l’IA qui augmentent la productivité et accélèrent l’ensemble du cycle de vie du développement logiciel. Rechercher Tabnine dans l’onglet extension du VS Code pour l’installer.

Génération de fouille: Génération de fouille est une plate-forme d’agent de codage générative de qualité basée sur l’IA qui vous aide à écrire, comprendre, tester et réviser du code avec votre équipe. Avec Qodo Gen, vous pouvez facilement rationaliser votre flux de développement directement depuis l’EDI, générer des suites de tests et de la documentation, améliorer la qualité du code et bien plus encore. Rechercher Qodo Gen dans l’onglet extension du code VS pour l’installer.

Conclusion

Vite offre une alternative plus rapide, plus simple et plus moderne à Create React App, donnant aux développeurs la liberté de créer des projets React sans les contraintes d’un framework opiniâtre. Combinée à Visual Studio Code et à son riche écosystème d’extensions, notamment des assistants de codage basés sur l’IA comme GitHub Copilot, votre configuration de développement peut être à la fois puissante et flexible.

Bon codage !

N’oubliez pas que si vous êtes un utilisateur de Progress KendoReact, il est livré avec un Assistant de codage IA vous utilisez donc l’IA formée sur les documents !