Comment créer une application React avec Vite : un guide étape par étape

Créer une application React est devenu encore plus simple et plus rapide grâce à Vite, un outil de création de front-end moderne introduit par le créateur de Vue.js Evan You en 2020. Vite est reconnu pour sa rapidité et son efficacité, ce qui en fait une excellente alternative à Create React App (CRA) en réduisant considérablement le temps nécessaire pour démarrer les serveurs de développement et appliquer les mises à jour de code. Dans ce guide, nous passerons en revue chaque étape pour vous aider à configurer une application React à l'aide de 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 améliore considérablement la vitesse de construction et le rechargement en direct, ce qui rend le processus de développement à la fois plus rapide et plus fluide. Contrairement à Create React App (CRA), qui subit souvent des retards dans l'actualisation du serveur après les mises à jour des fichiers, Vite réduit les temps de construction, offrant un flux de travail fluide et efficace. Sa conception modulaire profite également aux développeurs React en offrant un retour d'information plus rapide sur les modifications, idéal pour ceux qui ont besoin d'une réponse immédiate de l'environnement de développement.

Qu'est-ce que Vite ?

Vite, développé par Evan You (le créateur de Vue.js), est un outil de création moderne conçu pour optimiser le développement front-end. Le nom « Vite » est dérivé du mot français pour « rapide », ce qui correspond à son objectif principal qui est d’accélérer le processus de développement et de création. Vite exploite les modules ES natifs du navigateur pendant le développement, ce qui permet des créations plus rapides et des temps de rafraîchissement plus rapides par rapport aux bundlers traditionnels. Cette efficacité fait de Vite un excellent choix pour les développeurs qui cherchent à rationaliser l’expérience de développement dans des frameworks JavaScript comme React.

 

Conditions préalables à la configuration de Vite

Avant de configurer Vite, assurez-vous que votre système répond aux exigences suivantes. Ces prérequis sont essentiels pour un processus d'installation et de développement fluide.

 

Node.js et npm

Vite dépend de Node.js et de npm (Node Package Manager) pour l'installation des packages et l'exécution des scripts de développement. Pour utiliser Vite, vous avez besoin de Node.js version 18.x ou ultérieure et d'une version npm compatible. Voici comment vérifier si vous avez installé les bonnes versions :

Vérifiez la version de Node.js

Ouvrez votre terminal et tapez la commande suivante :
frapper
noeud -v

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

Vérifier la version npm

Ensuite, vérifiez la version de npm en exécutant :
frapper
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 npm depuis 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 référentiel NodeSource (pour Linux) ou en téléchargeant le programme d'installation directement depuis le site officiel.

 

Connaissances de base de la ligne de commande

L'utilisation de Vite nécessite une connaissance des opérations de base de la ligne de commande. Au cours du processus d'installation, 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 :

• Navigation dans les répertoires: Des commandes comme CD pour changer de répertoire et ls pour lister les fichiers.
• Exécution de commandes:Vous devrez exécuter des commandes npm comme installation de npm et npm exécuter dev.

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

 

Éditeur de code

Il est fortement recommandé d'utiliser un éditeur de code, tel que Visual Studio Code (VS Code), pour gérer et modifier les fichiers de votre projet. VS Code propose plusieurs fonctionnalités utiles :

• Mise en évidence de la syntaxe: Aide à rendre votre code plus lisible.
• Terminal intégré: Vous permet d'exécuter des commandes de terminal directement dans l'éditeur.
• Extensions: VS Code dispose d'extensions pour JavaScript, React et Vite qui fournissent des suggestions de code, une vérification des erreurs et des outils supplémentaires.

D'autres éditeurs populaires incluent Sublime Text, Atom et WebStorm, mais VS Code est particulièrement adapté aux projets JavaScript et React. Vous pouvez le télécharger à partir du site Web 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, il est essentiel de vous assurer que votre environnement de développement est correctement configuré. Vite est un outil de création rapide et moderne conçu pour rationaliser le développement front-end, mais il s'appuie sur des versions de logiciels et des outils spécifiques pour fonctionner correctement. Dans ce guide, nous aborderons les prérequis, notamment l'installation des versions nécessaires de Node.js et npm, les connaissances de base en ligne de commande et la configuration d'un éditeur de code adapté. Une fois ces composants en place, vous serez prêt à commencer à créer des applications React efficaces et à chargement rapide avec Vite.

 

Étape 1 : installer Node.js et npm (si non installé)

Pour utiliser Vite, vous avez besoin de Node.js version 18.x ou ultérieure ainsi que de npm. Si vous avez déjà installé Node.js mais qu'il est obsolète, suivez ces étapes pour supprimer l'ancienne version et installer la dernière.

Supprimer les versions Node.js existantes (facultatif)

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

sudo apt autoremove

Cette étape efface toutes les anciennes installations Node.js ou npm, garantissant une configuration propre pour Vite.

Ajouter le référentiel NodeSource

Ce référentiel fournit les dernières versions de Node.js et npm pour l'installation.
frapper
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –

Installer Node.js et npm

frapper
sudo apt install -y nodejs npm

Cela installe la version actuelle de Node.js (18.x) et npm, garantissant la compatibilité avec Vite.

Vérifier l'installation

Après l'installation, vérifiez que Node.js et npm sont correctement installés en exécutant :
frapper
noeud -v

npm -v

Vous devriez voir les numéros de version confirmant que Node.js et npm sont prêts à être utilisés.

 

Étape 2 : installer Vite à l’échelle mondiale

Maintenant que Node.js et npm sont configurés, vous pouvez installer Vite globalement. Cela vous permet de créer facilement de nouveaux projets Vite à partir de n'importe quel répertoire.

Exécutez la commande d’installation globale

frapper
sudo npm install -g create-vite

Cette commande installe Vite globalement, fournissant une commande unique pour initialiser rapidement les projets Vite. L'installation globale de Vite 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 avec lui. Ouvrez votre terminal, accédez à votre répertoire préféré et utilisez la commande suivante pour démarrer la configuration.

Exécutez la commande Vite Create

frapper
npm crée vite@latest mon-application

Remplacer mon-application avec le nom de votre projet souhaité. Cette commande initialise un projet Vite, et Vite vous guidera à travers quelques invites de configuration.

Suivez les instructions de configuration :

• Nom du projet:Choisissez un nom pour votre répertoire de projet (par exemple, « mon-application »).
• Sélection du cadre:Sélectionnez « React » dans la liste des frameworks.
• Variante:Choisissez entre JavaScript et TypeScript en fonction de vos préférences.

Une fois terminé, Vite créera un dossier de projet avec tous les fichiers requis et une structure standard.

 

Étape 4 : Accédez à votre dossier de projet

Après la configuration du projet, accédez au répertoire du projet nouvellement créé pour commencer à travailler avec lui.

Modification du répertoire du projet

frapper
cd mon-application

Cette commande bascule votre répertoire de travail vers mon-application, facilitant la gestion et le travail au sein des fichiers de projet Vite.

 

Étape 5 : Installer les dépendances du projet

Avant d'exécuter le projet, installez toutes les dépendances requises. Celles-ci incluent les bibliothèques et les packages nécessaires à l'exécution du projet.

Exécutez la commande d'installation

frapper
installation de npm

Cette commande télécharge et installe toutes les dépendances spécifiées dans le paquet.json fichier. Ces dépendances alimentent les composants React, les fonctionnalités Vite et tous les outils ou bibliothèques supplémentaires utilisés dans votre projet.

 

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

Maintenant que la configuration est terminée et que les dépendances sont installées, démarrez le serveur de développement Vite. Ce serveur vous permet de voir votre application en direct et d'appliquer instantanément les modifications de code.

Exécuter le serveur de développement

frapper
npm exécuter dev

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

Vous pouvez également voir des options réseau et des informations supplémentaires, en fonction de votre version de Vite.

 

Étape 7 : affichez votre application React dans le navigateur

Avec le serveur de développement en cours d'exécution, vous pouvez désormais visualiser votre application React dans un navigateur Web.

Ouvrez l’URL locale dans votre navigateur :

• Ouvrez votre navigateur Web préféré.
• Accédez à l'URL affichée dans le terminal, généralement http://localhost:5173/.

Votre nouvelle application React devrait se charger dans le navigateur. Toutes les modifications que vous apportez dans votre éditeur de code seront automatiquement actualisées dans le navigateur, grâce à la fonction de remplacement de module à chaud (HMR) de Vite, qui permet des mises à jour rapides sans avoir à recharger la page entière

 

Présentation de la structure du projet Vite

Après avoir configuré votre projet Vite, vous verrez une structure de dossiers et de fichiers standard qui organise les composants essentiels de votre application React. Cette structure maintient le projet propre et modulaire, vous permettant de vous concentrer sur le développement sans vous enliser dans les détails de configuration. Vous trouverez ci-dessous une liste des principaux fichiers et répertoires d'une application React typique basée sur Vite :

 

index.html

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

 

src/main.jsx

• Il s'agit du point d'entrée de votre application React, où l'application s'initialise.
• Dans ce fichier, vous trouverez du code qui restitue l'arborescence des composants React dans le DOM, reliant généralement votre application à une racine div dans index.html.
• Il s'agit du premier fichier JavaScript que Vite traite et regroupe, ce qui le rend essentiel pour la structure et la séquence de chargement de votre application.

 

src/App.jsx

• Ce fichier représente le composant principal de votre application React, contenant généralement la structure principale ou la mise en page de votre application.
• Depuis Application.jsx, vous pouvez importer et gérer d'autres composants, définir des itinéraires ou créer toute autre configuration au niveau de l'application.
• Modification Application.jsx fournit souvent les principaux changements que vous voyez dans votre application, car il s'agit généralement du cœur de l'interface utilisateur de votre projet.

 

vite.config.js

• Le fichier de configuration de Vite, situé à la racine du projet.
• Ce fichier vous permet de personnaliser le comportement et les paramètres de Vite, tels que la définition des options de construction, l'ajout de plugins ou la configuration de configurations de proxy.
• Bien que Vite soit conçu pour fonctionner sans configuration lourde, vite.config.js vous offre la flexibilité d'ajuster les paramètres à mesure que votre projet se développe.

 

Fichiers et répertoires supplémentaires

Bien que ces fichiers de base soient essentiels, vous pouvez rencontrer des répertoires et des fichiers supplémentaires à mesure que vous développez votre projet, notamment :

• publique/: Un dossier pour stocker des ressources statiques telles que des images, des polices ou des icônes. Ces fichiers sont servis directement sans nécessiter d'importations spéciales.
• src/: Le dossier principal pour tout le code source de l'application. Avec fichier principal.jsx et Application.jsx, ce dossier contient d'autres composants React, des fonctions d'assistance ou des fournisseurs de contexte à mesure que votre application évolue.

Cette structure organisée maintient vos fichiers de projet accessibles et gérables, afin que vous puissiez vous concentrer sur la création des composants et des fonctionnalités de votre application sans vous soucier d'une configuration ou d'une installation approfondie.

 

Avantages de l'utilisation de Vite par rapport à la création d'une application React

Passer de Create React App (CRA) à Vite peut apporter plusieurs avantages en termes de performances et de productivité. Vite est conçu pour la vitesse et l'efficacité, offrant aux développeurs une expérience de développement plus réactive. Voici un aperçu plus approfondi des avantages de l'utilisation de Vite par rapport à CRA :

 

Des constructions plus rapides

Vite réduit considérablement les temps de construction en gérant les modules différemment de CRA. Voici comment :

• Pré-regroupement de modules: Vite pré-regroupe les dépendances à l'aide de esbuild, un outil de regroupement rapide optimisé pour JavaScript. Ce pré-regroupement accélère le temps de chargement initial en organisant et en regroupant les dépendances plus efficacement.
• Syntaxe du module ES: Vite utilise les importations de modules ES dans le navigateur pendant le développement, de sorte que seuls les fichiers requis pour la vue actuelle sont chargés. Cette configuration évite la nécessité de regrouper l'intégralité de l'application à chaque modification, ce qui permet des temps de démarrage plus rapides.
• Chargement paresseux pour le développement: Vite charge les modules uniquement lorsqu'ils sont nécessaires, ce qui minimise la charge de travail sur votre serveur de développement et conduit à des rechargements plus rapides. Contrairement à CRA, Vite ne recompile pas l'intégralité de 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ù des boucles de rétroaction rapides et des vitesses de construction sont essentielles.

 

Remplacement efficace des modules à chaud (HMR)

Le remplacement de module à chaud (HMR) est une fonctionnalité qui met à jour les modules en temps réel au fur et à mesure que vous les modifiez, sans avoir besoin de recharger une page entière. Le système HMR de Vite est plus efficace que celui de CRA, ce qui apporte plusieurs avantages :

• Rechargement sélectif: Le système HMR de Vite met à jour uniquement les modules qui changent, plutôt que de recharger l'application entière. Par exemple, si vous modifiez un fichier CSS ou un composant, Vite recharge uniquement ce fichier ou ce module spécifique.
• Retour d'information plus rapide sur les modifications:Ce rechargement sélectif permet aux développeurs de voir les modifications presque instantanément, ce qui améliore la productivité et fait gagner du temps.
• Préserver l'état de l'application:Étant donné que seuls les modules nécessaires sont remplacés, le HMR de Vite préserve l'état de votre application pendant le développement. Cela signifie que vous pouvez continuer à tester sans avoir à réinitialiser les données ou les configurations.

Avec HMR de Vite, le développement est plus efficace car les modifications sont reflétées immédiatement, améliorant ainsi l'expérience de codage.

 

Expérience de développement léger

Vite est conçu pour fournir une configuration minimale et optimisée qui élimine toute complexité inutile, facilitant et accélérant le démarrage d'un projet. Voici pourquoi Vite offre une expérience plus légère que CRA :

• Configuration minimale:Vite ne nécessite que peu ou pas de configuration pour démarrer, et la plupart des paramètres courants sont gérés automatiquement. CRA nécessite souvent des configurations personnalisées ou des dépendances supplémentaires pour des fonctionnalités telles que le fractionnement de code ou le regroupement avancé, mais Vite simplifie ce processus.
• Paquets de plus petite taille:Le regroupement optimisé de Vite conduit à des tailles de bundle plus petites en production, ce qui améliore les performances lors du déploiement de votre application.
• Installation rapide:La configuration d'un projet Vite est simple et rapide. Avec seulement quelques commandes, vous êtes prêt à commencer à coder sans les fichiers et scripts supplémentaires que CRA inclut parfois.
• Système de plug-ins flexible:Le système de plugins de Vite est puissant mais facile à utiliser, vous permettant d'ajouter des fonctionnalités sans surcharger la configuration. Les plugins de Vite sont également compatibles avec Rollup, un bundler populaire, qui étend les options de personnalisation de votre build sans compromettre la vitesse.

Cette approche légère permet aux développeurs de se concentrer davantage sur le codage et moins sur la gestion de la configuration, ce qui se traduit par un environnement de développement plus rapide et plus propre.

 

Associez-vous à Mobian pour créer votre solution d'application mobile personnalisée

Si vous envisagez de créer une application mobile, Mobien Mobian peut fournir une assistance experte tout au long du processus de développement. Que vous souhaitiez rationaliser l'engagement client, renforcer la fidélité ou créer une expérience fluide pour les utilisateurs, une application mobile bien conçue peut atteindre ces objectifs. Mobian est spécialisé dans la création d'applications personnalisées et clés en main adaptées aux besoins spécifiques de votre entreprise.

Grâce à nos applications, les clients peuvent accéder directement aux actualités, aux promotions et aux services de commande, tandis que vous pouvez profiter de fonctionnalités telles que des commentaires et des avis faciles et un système de commande fluide. Notre expertise couvre un large éventail de secteurs, de la MedTech à la FinTech. Quelle que soit la complexité ou la vision de votre application, nous sommes prêts à lui donner vie.

Entrer en contact avec Mobian pour discuter de votre projet et découvrir comment nous pouvons concrétiser votre idée d'application. Ensemble, nous pouvons créer une application qui prépare votre entreprise pour l'avenir.

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

 

Conclusion

En suivant ce guide, vous avez maintenant configuré un environnement Vite pour votre projet React. Le processus de construction léger et rapide de Vite et le remplacement de module à chaud (HMR) en font un excellent choix pour le développement React moderne, offrant une expérience plus efficace par rapport aux outils traditionnels comme Create React App. Avec l'architecture optimisée de Vite, vous êtes désormais prêt à créer des applications dynamiques et réactives et à vous concentrer sur la création de fonctionnalités plutôt que d'attendre les temps de construction. Continuez à explorer les options de configuration de Vite et les plugins supplémentaires pour personnaliser davantage votre environnement de développement. Bon codage !