Créer votre première application React avec Vite : guide rapide

Créer une application React est devenu encore plus simple et plus rapide grâce à Vite, un outil de build front-end moderne lancé en 2020 par Evan You, le créateur de Vue.js. Réputé pour sa rapidité et son efficacité, Vite est une excellente alternative à Create React App (CRA) : il réduit considérablement le temps nécessaire pour démarrer les serveurs de développement et appliquer les modifications du code. Dans ce guide, nous passons en revue chaque étape pour configurer une application React avec Vite, de la préparation de votre environnement au lancement de votre premier projet.

Pourquoi utiliser Vite pour le développement React ?

Vite est devenu un choix populaire pour les projets React, car il accélère nettement le build et le rechargement à chaud, ce qui rend le développement à la fois plus rapide et plus fluide. Contrairement à Create React App (CRA), dont le serveur met souvent du temps à se rafraîchir après une modification de fichier, Vite réduit les temps de build et offre un flux de travail fluide et efficace. Sa conception modulaire profite aussi aux développeurs React, qui obtiennent un retour plus rapide sur leurs modifications : idéal quand on a besoin d’une réaction immédiate de l’environnement de développement.

Qu’est-ce que Vite ?

Développé par Evan You (le créateur de Vue.js), Vite est un outil de build moderne conçu pour optimiser le développement front-end. Son nom vient du mot français « vite », ce qui correspond à son objectif premier : accélérer le développement et le build. Pendant le développement, Vite s’appuie sur les modules ES natifs du navigateur, ce qui accélère les builds et les rafraîchissements par rapport aux bundlers traditionnels. Cette efficacité fait de Vite un excellent choix pour les développeurs qui veulent simplifier leur expérience de développement avec des frameworks JavaScript comme React.

Prérequis pour configurer Vite

Avant de configurer Vite, assurez-vous que votre système remplit les conditions suivantes. Ces prérequis sont indispensables pour une installation et un développement sans accroc.

Node.js et npm

Vite s’appuie sur Node.js et npm (Node Package Manager) pour installer les paquets et exécuter les scripts de développement. Pour utiliser Vite, il vous faut Node.js 18.x ou une version ultérieure, ainsi qu’une version compatible de npm. Voici comment vérifier que vous disposez des bonnes versions :

Vérifier la version de Node.js

Ouvrez votre terminal et saisissez la commande suivante : bash node -v

Cette commande renvoie la version de Node.js installée, qui doit être 18.x ou supérieure.

Vérifier la version de npm

Vérifiez ensuite la version de npm en exécutant : bash npm -v

Cette commande affiche la version de npm installée. Si vos versions sont obsolètes, vous pouvez télécharger les dernières versions de Node.js et de npm sur le site officiel de Node.js.

Si Node.js et npm ne sont pas installés, ou si vous devez les mettre à jour, vous pouvez les installer ou les mettre à niveau via le dépôt NodeSource (sous Linux) ou en téléchargeant directement l’installateur sur le site officiel.

Connaissances de base de la ligne de commande

Pour utiliser Vite, il faut maîtriser les opérations de base en ligne de commande. Pendant la configuration, vous exécuterez une série de commandes dans le terminal pour créer, installer et lancer votre projet Vite. Voici ce que vous devez savoir faire :

Naviguer dans les répertoires : des commandes comme cd pour changer de répertoire et ls pour lister les fichiers.
Exécuter des commandes : vous devrez lancer des commandes npm comme npm install et npm run dev.

Si vous débutez avec la ligne de commande, il peut être utile de revoir quelques commandes de base du terminal avant de continuer.

Éditeur de code

Un éditeur de code, comme Visual Studio Code (VS Code), est vivement recommandé pour gérer et modifier les fichiers de votre projet. VS Code offre plusieurs fonctionnalités utiles :

Coloration syntaxique : rend votre code plus lisible.
Terminal intégré : permet d’exécuter des commandes directement dans l’éditeur.
Extensions : VS Code propose des extensions pour JavaScript, React et Vite qui offrent des suggestions de code, la détection d’erreurs et d’autres outils.

Parmi les autres éditeurs populaires figurent Sublime Text, Atom et WebStorm, mais VS Code est particulièrement adapté aux projets JavaScript et React. Vous pouvez le télécharger sur le site de VS Code.

Configurer Vite pour votre projet React : prérequis et préparation

Avant de vous lancer dans la création de votre première application React avec Vite, vous devez vous assurer que votre environnement de développement est correctement configuré. Vite est un outil de build moderne et rapide, conçu pour simplifier le développement front-end, mais il dépend de versions logicielles et d’outils précis pour fonctionner correctement. Dans ce guide, nous abordons les prérequis : l’installation des versions requises de Node.js et de npm, les connaissances de base en ligne de commande et la configuration d’un éditeur de code adapté. Une fois ces éléments en place, vous serez prêt à créer avec Vite des applications React efficaces qui se chargent rapidement.

Étape 1 : installer Node.js et npm (s’ils ne sont pas installés)

Pour utiliser Vite, il vous faut Node.js 18.x ou une version ultérieure, ainsi que npm. Si Node.js est déjà installé mais dans une version obsolète, suivez ces étapes pour supprimer l’ancienne version et installer la plus récente.

Supprimer les versions existantes de Node.js (facultatif)

Si une version obsolète de Node.js ou de npm est déjà installée, supprimez-la pour éviter les problèmes de compatibilité. bash sudo apt remove nodejs npm

sudo apt autoremove

Cette étape supprime les anciennes installations de Node.js ou de npm et garantit une configuration propre pour Vite.

Ajouter le dépôt NodeSource

Ce dépôt fournit les dernières versions de Node.js et de npm à installer. bash curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

Installer Node.js et npm

bash sudo apt install -y nodejs npm

Cette commande installe la version actuelle de Node.js (18.x) et npm, compatibles avec Vite.

Vérifier l’installation

Une fois l’installation terminée, vérifiez que Node.js et npm sont bien installés en exécutant : bash node -v

npm -v

Des numéros de version doivent s’afficher, confirmant que Node.js et npm sont prêts à l’emploi.

Étape 2 : installer Vite globalement

Maintenant que Node.js et npm sont configurés, vous pouvez installer Vite globalement. Vous pourrez ainsi créer facilement de nouveaux projets Vite depuis n’importe quel répertoire.

Exécuter la commande d’installation globale

bash sudo npm install -g create-vite

Cette commande installe Vite globalement et vous donne une commande unique pour initialiser rapidement des projets Vite. Une installation globale simplifie la création et la configuration des projets.

Étape 3 : créer un nouveau projet React avec Vite

Une fois Vite installé, vous pouvez créer un nouveau projet React. Ouvrez votre terminal, placez-vous dans le répertoire de votre choix et lancez la configuration avec la commande suivante.

Exécuter la commande de création Vite

bash npm create vite@latest my-app

Remplacez my-app par le nom de projet de votre choix. Cette commande initialise un projet Vite, puis Vite vous guide à travers quelques questions de configuration.

Répondre aux questions de configuration :

Nom du projet : choisissez un nom pour le répertoire de votre projet (par exemple « my-app »).
Choix du framework : sélectionnez « React » dans la liste des frameworks.
Variante : choisissez entre JavaScript et TypeScript selon vos préférences.

Une fois la configuration terminée, Vite crée un dossier de projet contenant tous les fichiers nécessaires, avec une structure standard.

Étape 4 : accéder au dossier de votre projet

Une fois le projet configuré, placez-vous dans le répertoire nouvellement créé pour commencer à travailler.

Se placer dans le répertoire du projet

bash cd my-app

Cette commande fait de my-app votre répertoire de travail, ce qui facilite la gestion des fichiers du projet Vite.

Étape 5 : installer les dépendances du projet

Avant de lancer le projet, installez toutes les dépendances nécessaires, c’est-à-dire les bibliothèques et les paquets dont le projet a besoin pour fonctionner.

Exécuter la commande d’installation

bash npm install

Cette commande télécharge et installe toutes les dépendances déclarées dans le fichier package.json. Ces dépendances font fonctionner les composants React, les fonctionnalités de Vite et les autres outils ou bibliothèques utilisés dans votre projet.

Étape 6 : démarrer le serveur de développement

La configuration est terminée et les dépendances sont installées : vous pouvez démarrer le serveur de développement de Vite. Il vous permet de voir votre application en direct et d’appliquer instantanément vos modifications de code.

Lancer le serveur de développement

bash npm run dev

Cette commande lance le serveur de développement, et Vite affiche une URL locale à laquelle votre application est accessible. Par défaut, cette URL est : arduino http://localhost:5173/

Selon votre version de Vite, des options réseau et d’autres informations peuvent également s’afficher.

Étape 7 : afficher votre application React dans le navigateur

Le serveur de développement étant lancé, vous pouvez maintenant afficher votre application React dans un navigateur web.

Ouvrir l’URL locale dans votre navigateur :

Ouvrez le navigateur de votre choix.
Rendez-vous à l’URL indiquée dans le terminal, généralement http://localhost:5173/.

Votre nouvelle application React doit se charger dans le navigateur. Toutes les modifications effectuées dans votre éditeur de code s’affichent automatiquement dans le navigateur grâce au remplacement de modules à chaud (HMR) de Vite, qui permet des mises à jour rapides sans recharger toute la page.

Présentation de la structure d’un projet Vite

Une fois votre projet Vite configuré, vous découvrez une structure standard de dossiers et de fichiers qui organise les composants essentiels de votre application React. Cette structure garde le projet clair et modulaire : vous vous concentrez sur le développement sans vous perdre dans les détails de configuration. Voici les principaux fichiers et répertoires d’une application React classique propulsée par Vite :

index.html

C’est le fichier HTML principal de votre application. Il sert de point d’entrée au navigateur pour charger l’application React.
Vite y injecte les modules JavaScript, afin que votre application ait accès aux scripts et ressources nécessaires.
Contrairement aux configurations traditionnelles, le fichier index.html de Vite se trouve à la racine du projet, ce qui simplifie le chargement des modules et garde votre configuration propre.

src/main.jsx

C’est le point d’entrée de votre application React, là où elle s’initialise.
Ce fichier contient le code qui rend l’arborescence de composants React dans le DOM, généralement en reliant votre application à une div racine de index.html.
C’est le premier fichier JavaScript que Vite traite et bundle : il est donc essentiel à la structure de votre application et à son ordre de chargement.

src/App.jsx

Ce fichier contient le composant principal de votre application React, qui définit généralement sa structure ou sa mise en page globale.
Depuis App.jsx, vous pouvez importer et gérer d’autres composants, définir des routes ou créer toute autre configuration à l’échelle de l’application.
C’est souvent en modifiant App.jsx que vous verrez les principaux changements dans votre application, car il constitue en général le cœur de son interface.

vite.config.js

Le fichier de configuration de Vite, situé à la racine du projet.
Il permet de personnaliser le comportement et les paramètres de Vite : définir des options de build, ajouter des plugins ou configurer un proxy, par exemple.
Vite est conçu pour fonctionner sans configuration lourde, mais vite.config.js vous laisse la liberté d’ajuster les paramètres à mesure que votre projet grandit.

Autres fichiers et répertoires

Ces fichiers de base sont essentiels, mais d’autres répertoires et fichiers apparaîtront à mesure que votre projet s’étoffe, notamment :

public/ : un dossier pour les ressources statiques comme les images, les polices ou les icônes. Ces fichiers sont servis directement, sans import particulier.
src/ : le dossier principal de tout le code source de l’application. En plus de main.jsx et App.jsx, il accueille les autres composants React, les fonctions utilitaires ou les context providers à mesure que votre application grandit.

Cette structure organisée garde les fichiers du projet accessibles et faciles à gérer : vous vous concentrez sur les composants et les fonctionnalités de votre application sans vous soucier d’une configuration complexe.

Les avantages de Vite par rapport à Create React App

Passer de Create React App (CRA) à Vite peut apporter de nombreux gains de performance et de productivité. Conçu pour la rapidité et l’efficacité, Vite offre aux développeurs une expérience de développement plus réactive. Voici en détail les avantages de Vite par rapport à CRA :

Des builds plus rapides

Vite réduit considérablement les temps de build en gérant les modules autrement que CRA :

Pré-bundling des modules : Vite pré-bundle les dépendances avec esbuild, un bundler rapide optimisé pour JavaScript. Ce pré-bundling accélère le chargement initial en organisant et en regroupant plus efficacement les dépendances.
Syntaxe des modules ES : pendant le développement, Vite utilise les imports de modules ES dans le navigateur, si bien que seuls les fichiers nécessaires à la vue en cours sont chargés. Inutile de bundler toute l’application à chaque modification : le démarrage est plus rapide.
Chargement à la demande en développement : Vite ne charge les modules que lorsqu’ils sont nécessaires, ce qui allège la charge du serveur de développement et accélère les rechargements. Contrairement à CRA, Vite ne recompile pas toute la base de code après chaque modification, ce qui réduit le temps d’attente.

Ces optimisations font de Vite un excellent choix pour les projets où la rapidité des cycles de retour et des builds est essentielle.

Un remplacement de modules à chaud (HMR) efficace

Le remplacement de modules à chaud (Hot Module Replacement, HMR) met à jour les modules en temps réel pendant que vous les modifiez, sans recharger complètement la page. Le système HMR de Vite est plus efficace que celui de CRA, ce qui présente plusieurs avantages :

Rechargement sélectif : le HMR de Vite ne met à jour que les modules modifiés, au lieu de recharger toute l’application. Par exemple, si vous modifiez un fichier CSS ou un composant, Vite ne recharge que ce fichier ou ce module.
Un retour plus rapide sur les modifications : grâce à ce rechargement sélectif, les développeurs voient leurs changements presque instantanément, ce qui améliore la productivité et fait gagner du temps.
Conservation de l’état de l’application : comme seuls les modules nécessaires sont remplacés, le HMR de Vite conserve l’état de votre application pendant le développement. Vous pouvez continuer vos tests sans réinitialiser vos données ni vos réglages.

Avec le HMR de Vite, le développement gagne en efficacité, car les modifications s’affichent immédiatement, ce qui rend le travail sur le code plus agréable.

Une expérience de développement légère

Vite est conçu pour offrir une configuration minimale et optimisée, sans complexité inutile, ce qui permet de démarrer un projet plus facilement et plus vite. Voici pourquoi Vite offre une expérience plus légère que CRA :

Configuration minimale : Vite ne demande que peu ou pas de configuration pour démarrer, et la plupart des réglages courants sont gérés automatiquement. CRA nécessite souvent des configurations personnalisées ou des dépendances supplémentaires pour des fonctionnalités comme le code splitting ou le bundling avancé, alors que Vite simplifie tout cela.
Des bundles plus légers : le bundling optimisé de Vite produit des bundles plus petits en production, ce qui améliore les performances de l’application déployée.
Une mise en place rapide : configurer un projet Vite est simple et rapide. Quelques commandes suffisent pour commencer à coder, sans les fichiers et scripts superflus que CRA ajoute parfois.
Un système de plugins flexible : le système de plugins de Vite est puissant et simple à utiliser ; il permet d’ajouter des fonctionnalités sans alourdir la configuration. Les plugins de Vite sont aussi compatibles avec Rollup, un bundler populaire, ce qui élargit les possibilités de personnalisation du build sans sacrifier la rapidité.

Cette approche légère permet aux développeurs de se concentrer sur le code plutôt que sur la configuration, pour un environnement de développement plus rapide et plus propre.

Confiez à Mobian le développement de votre application mobile sur mesure

Si vous envisagez de créer une application mobile, Mobian peut vous apporter un accompagnement expert tout au long du développement. Que vous cherchiez à fluidifier la relation client, à renforcer la fidélité ou à offrir une expérience sans accroc à vos utilisateurs, une application mobile bien conçue peut vous y aider. Mobian est spécialisée dans le développement d’applications sur mesure et clés en main, adaptées aux besoins spécifiques de votre entreprise.

Grâce à nos applications, vos clients accèdent directement aux actualités et aux promotions et commandent vos services, tandis que vous profitez de fonctionnalités comme la collecte simplifiée de retours et d’avis et un système de commande fluide. Notre expertise couvre de nombreux secteurs, de la MedTech à la FinTech : quelle que soit la complexité ou l’ambition de votre projet d’application, nous sommes prêts à le concrétiser.

Contactez Mobian pour discuter de votre projet et voir comment nous pouvons concrétiser votre idée d’application. Ensemble, créons une application qui prépare votre entreprise à l’avenir.

Construisons l’avenir ensemble avec Mobian, votre développeur d’applications mobiles de confiance.

Conclusion

En suivant ce guide, vous avez configuré un environnement Vite pour votre projet React. Avec son processus de build léger et rapide et son remplacement de modules à chaud (HMR), Vite est un excellent choix pour le développement React moderne et offre une expérience plus efficace que des outils traditionnels comme Create React App. Grâce à l’architecture optimisée de Vite, vous êtes désormais prêt à créer des applications dynamiques et réactives, et à vous concentrer sur les fonctionnalités plutôt que sur l’attente des builds. Continuez à explorer les options de configuration et les plugins de Vite pour personnaliser davantage votre environnement de développement. Bon code !

Questions fréquentes

Qu’est-ce que Vite et pourquoi l’utiliser pour des projets React ?

Vite est un outil de build moderne créé par Evan You (le développeur à l’origine de Vue.js), axé sur la rapidité et l’efficacité. Contrairement aux outils de build traditionnels, Vite s’appuie sur les modules ES natifs pour accélérer le chargement, ce qui le rend particulièrement utile aux développeurs React qui ont besoin d’un retour rapide sur leurs modifications de code. C’est une excellente alternative à Create React App, surtout pour les projets de grande taille.

Quelles versions de Node.js et de npm faut-il pour utiliser Vite ?

Vite nécessite Node.js 18.x ou une version ultérieure, ainsi qu’une version à jour de npm compatible. Vous pouvez vérifier vos versions en exécutant node -v et npm -v dans le terminal. Pour les mettre à jour, rendez-vous sur le site officiel de Node.js afin de télécharger les derniers installateurs.

Peut-on utiliser Vite avec TypeScript plutôt qu’avec JavaScript ?

Oui ! Vite prend en charge TypeScript nativement. Lors de la configuration initiale, vous pouvez choisir TypeScript comme langage. Le projet est alors configuré pour gérer les fichiers .ts et .tsx, ce qui apporte la sécurité du typage et d’autres avantages pendant le développement.

En quoi Vite accélère-t-il le développement par rapport à Create React App ?

Vite gagne surtout en rapidité grâce à son bundling de modules efficace et au remplacement de modules à chaud (HMR). Il ne recharge que les modules modifiés, et non toute l’application, ce qui accélère les mises à jour et rend l’environnement de développement plus réactif.

Vite est-il uniquement compatible avec React, ou peut-on l’utiliser avec d’autres frameworks ?

Si Vite est souvent utilisé avec React, c’est un outil polyvalent, compatible avec plusieurs frameworks JavaScript, dont Vue, Svelte et Preact. Son architecture indépendante de tout framework en fait un outil de build rapide pour de nombreuses technologies front-end.

Faut-il un éditeur de code particulier pour travailler avec Vite ?

Vous pouvez utiliser n’importe quel éditeur de code, mais Visual Studio Code (VS Code) est vivement recommandé. Il offre une prise en charge complète de JavaScript et de React, s’intègre facilement à npm et propose des extensions utiles pour les projets Vite. D’autres éditeurs populaires, comme Sublime Text et WebStorm, conviennent aussi très bien.