![\"\"](\"https:\/\/mobian.studio\/wp-content\/uploads\/2024\/11\/pexels-sora-shimazaki-5926397.png\"){kind=spacer}
<\/p>\n<\/p>\n
Cr\u00e9er une application React est devenu encore plus simple et plus rapide gr\u00e2ce \u00e0 Vite, un outil de cr\u00e9ation de front-end moderne introduit par le cr\u00e9ateur de Vue.js Evan You en 2020. Vite est reconnu pour sa rapidit\u00e9 et son efficacit\u00e9, ce qui en fait une excellente alternative \u00e0 Create React App (CRA) en r\u00e9duisant consid\u00e9rablement le temps n\u00e9cessaire pour d\u00e9marrer les serveurs de d\u00e9veloppement et appliquer les mises \u00e0 jour de code. Dans ce guide, nous passerons en revue chaque \u00e9tape pour vous aider \u00e0 configurer une application React \u00e0 l'aide de Vite, de la pr\u00e9paration de votre environnement au lancement de votre premier projet.<\/span><\/p>\n <\/p>\n Vite est devenu un choix populaire pour les projets React car il am\u00e9liore consid\u00e9rablement la vitesse de construction et le rechargement en direct, ce qui rend le processus de d\u00e9veloppement \u00e0 la fois plus rapide et plus fluide. Contrairement \u00e0 Create React App (CRA), qui subit souvent des retards dans l'actualisation du serveur apr\u00e8s les mises \u00e0 jour des fichiers, Vite r\u00e9duit les temps de construction, offrant un flux de travail fluide et efficace. Sa conception modulaire profite \u00e9galement aux d\u00e9veloppeurs React en offrant un retour d'information plus rapide sur les modifications, id\u00e9al pour ceux qui ont besoin d'une r\u00e9ponse imm\u00e9diate de l'environnement de d\u00e9veloppement.<\/span><\/p>\n Vite, d\u00e9velopp\u00e9 par Evan You (le cr\u00e9ateur de Vue.js), est un outil de cr\u00e9ation moderne con\u00e7u pour optimiser le d\u00e9veloppement front-end. Le nom \u00ab Vite \u00bb est d\u00e9riv\u00e9 du mot fran\u00e7ais pour \u00ab rapide \u00bb, ce qui correspond \u00e0 son objectif principal qui est d\u2019acc\u00e9l\u00e9rer le processus de d\u00e9veloppement et de cr\u00e9ation. Vite exploite les modules ES natifs du navigateur pendant le d\u00e9veloppement, ce qui permet des cr\u00e9ations plus rapides et des temps de rafra\u00eechissement plus rapides par rapport aux bundlers traditionnels. Cette efficacit\u00e9 fait de Vite un excellent choix pour les d\u00e9veloppeurs qui cherchent \u00e0 rationaliser l\u2019exp\u00e9rience de d\u00e9veloppement dans des frameworks JavaScript comme React.<\/span><\/p>\n <\/p>\n Avant de configurer Vite, assurez-vous que votre syst\u00e8me r\u00e9pond aux exigences suivantes. Ces pr\u00e9requis sont essentiels pour un processus d'installation et de d\u00e9veloppement fluide.<\/span><\/p>\n <\/p>\n Vite d\u00e9pend de Node.js et de npm (Node Package Manager) pour l'installation des packages et l'ex\u00e9cution des scripts de d\u00e9veloppement. Pour utiliser Vite, vous avez besoin de Node.js version 18.x ou ult\u00e9rieure et d'une version npm compatible. Voici comment v\u00e9rifier si vous avez install\u00e9 les bonnes versions\u00a0:<\/span><\/p>\n Ouvrez votre terminal et tapez la commande suivante\u00a0:<\/span> Cette commande renvoie la version install\u00e9e de Node.js, qui doit \u00eatre 18.x ou sup\u00e9rieure.<\/span><\/p>\n Ensuite, v\u00e9rifiez la version de npm en ex\u00e9cutant\u00a0:<\/span> Cette commande affiche la version de npm install\u00e9e. Si vos versions sont obsol\u00e8tes, vous pouvez t\u00e9l\u00e9charger les derni\u00e8res versions de Node.js et npm depuis le site officiel de Node.js.<\/span><\/p>\n Si Node.js et npm ne sont pas install\u00e9s, ou si vous devez les mettre \u00e0 jour, vous pouvez les installer ou les mettre \u00e0 niveau via le r\u00e9f\u00e9rentiel NodeSource (pour Linux) ou en t\u00e9l\u00e9chargeant le programme d'installation directement depuis le site officiel.<\/span><\/p>\n <\/p>\n L'utilisation de Vite n\u00e9cessite une connaissance des op\u00e9rations de base de la ligne de commande. Au cours du processus d'installation, vous ex\u00e9cuterez une s\u00e9rie de commandes dans le terminal pour cr\u00e9er, installer et lancer votre projet Vite. Voici ce que vous devez savoir faire\u00a0:<\/span><\/p>\n Si vous d\u00e9butez avec la ligne de commande, il peut \u00eatre utile de revoir certaines commandes de terminal de base avant de continuer.<\/span><\/p>\n <\/p>\n Il est fortement recommand\u00e9 d'utiliser un \u00e9diteur de code, tel que Visual Studio Code (VS Code), pour g\u00e9rer et modifier les fichiers de votre projet. VS Code propose plusieurs fonctionnalit\u00e9s utiles\u00a0:<\/span><\/p>\n D'autres \u00e9diteurs populaires incluent Sublime Text, Atom et WebStorm, mais VS Code est particuli\u00e8rement adapt\u00e9 aux projets JavaScript et React. Vous pouvez le t\u00e9l\u00e9charger \u00e0 partir du site Web de VS Code.<\/span><\/p>\n <\/p>\n Avant de vous lancer dans la cr\u00e9ation de votre premi\u00e8re application React avec Vite, il est essentiel de vous assurer que votre environnement de d\u00e9veloppement est correctement configur\u00e9. Vite est un outil de cr\u00e9ation rapide et moderne con\u00e7u pour rationaliser le d\u00e9veloppement front-end, mais il s'appuie sur des versions de logiciels et des outils sp\u00e9cifiques pour fonctionner correctement. Dans ce guide, nous aborderons les pr\u00e9requis, notamment l'installation des versions n\u00e9cessaires de Node.js et npm, les connaissances de base en ligne de commande et la configuration d'un \u00e9diteur de code adapt\u00e9. Une fois ces composants en place, vous serez pr\u00eat \u00e0 commencer \u00e0 cr\u00e9er des applications React efficaces et \u00e0 chargement rapide avec Vite.<\/span><\/p>\n <\/p>\n Pour utiliser Vite, vous avez besoin de Node.js version 18.x ou ult\u00e9rieure ainsi que de npm. Si vous avez d\u00e9j\u00e0 install\u00e9 Node.js mais qu'il est obsol\u00e8te, suivez ces \u00e9tapes pour supprimer l'ancienne version et installer la derni\u00e8re.<\/span><\/p>\n Si une version obsol\u00e8te de Node.js ou npm est d\u00e9j\u00e0 install\u00e9e, supprimez-la pour \u00e9viter les probl\u00e8mes de compatibilit\u00e9.<\/span> sudo apt autoremove<\/span><\/p>\n Cette \u00e9tape efface toutes les anciennes installations Node.js ou npm, garantissant une configuration propre pour Vite.<\/span><\/p>\n Ce r\u00e9f\u00e9rentiel fournit les derni\u00e8res versions de Node.js et npm pour l'installation.<\/span> frapper<\/span> Cela installe la version actuelle de Node.js (18.x) et npm, garantissant la compatibilit\u00e9 avec Vite.<\/span><\/p>\n Apr\u00e8s l'installation, v\u00e9rifiez que Node.js et npm sont correctement install\u00e9s en ex\u00e9cutant\u00a0:<\/span> npm -v<\/span><\/p>\n Vous devriez voir les num\u00e9ros de version confirmant que Node.js et npm sont pr\u00eats \u00e0 \u00eatre utilis\u00e9s.<\/span><\/p>\n <\/p>\n Maintenant que Node.js et npm sont configur\u00e9s, vous pouvez installer Vite globalement. Cela vous permet de cr\u00e9er facilement de nouveaux projets Vite \u00e0 partir de n'importe quel r\u00e9pertoire.<\/span><\/p>\n frapper<\/span> Cette commande installe Vite globalement, fournissant une commande unique pour initialiser rapidement les projets Vite. L'installation globale de Vite simplifie la cr\u00e9ation et la configuration des projets.<\/span><\/p>\n <\/p>\n Une fois Vite install\u00e9, vous pouvez cr\u00e9er un nouveau projet React avec lui. Ouvrez votre terminal, acc\u00e9dez \u00e0 votre r\u00e9pertoire pr\u00e9f\u00e9r\u00e9 et utilisez la commande suivante pour d\u00e9marrer la configuration.<\/span><\/p>\n frapper<\/span> Remplacer <\/span>mon-application<\/span> avec le nom de votre projet souhait\u00e9. Cette commande initialise un projet Vite, et Vite vous guidera \u00e0 travers quelques invites de configuration.<\/span><\/p>\n Une fois termin\u00e9, Vite cr\u00e9era un dossier de projet avec tous les fichiers requis et une structure standard.<\/span><\/p>\n <\/p>\n Apr\u00e8s la configuration du projet, acc\u00e9dez au r\u00e9pertoire du projet nouvellement cr\u00e9\u00e9 pour commencer \u00e0 travailler avec lui.<\/span><\/p>\n frapper<\/span> Cette commande bascule votre r\u00e9pertoire de travail vers <\/span>mon-application<\/span>, facilitant la gestion et le travail au sein des fichiers de projet Vite.<\/span><\/p>\n <\/p>\n Avant d'ex\u00e9cuter le projet, installez toutes les d\u00e9pendances requises. Celles-ci incluent les biblioth\u00e8ques et les packages n\u00e9cessaires \u00e0 l'ex\u00e9cution du projet.<\/span><\/p>\n frapper<\/span> Cette commande t\u00e9l\u00e9charge et installe toutes les d\u00e9pendances sp\u00e9cifi\u00e9es dans le <\/span>paquet.json<\/span> fichier. Ces d\u00e9pendances alimentent les composants React, les fonctionnalit\u00e9s Vite et tous les outils ou biblioth\u00e8ques suppl\u00e9mentaires utilis\u00e9s dans votre projet.<\/span><\/p>\n <\/p>\n Maintenant que la configuration est termin\u00e9e et que les d\u00e9pendances sont install\u00e9es, d\u00e9marrez le serveur de d\u00e9veloppement Vite. Ce serveur vous permet de voir votre application en direct et d'appliquer instantan\u00e9ment les modifications de code.<\/span><\/p>\n frapper<\/span> Cette commande lance le serveur de d\u00e9veloppement et Vite affiche une URL locale o\u00f9 votre application est accessible. Par d\u00e9faut, cette URL est\u00a0:<\/span> Vous pouvez \u00e9galement voir des options r\u00e9seau et des informations suppl\u00e9mentaires, en fonction de votre version de Vite.<\/span><\/p>\n <\/p>\n Avec le serveur de d\u00e9veloppement en cours d'ex\u00e9cution, vous pouvez d\u00e9sormais visualiser votre application React dans un navigateur Web.<\/span><\/p>\n Votre nouvelle application React devrait se charger dans le navigateur. Toutes les modifications que vous apportez dans votre \u00e9diteur de code seront automatiquement actualis\u00e9es dans le navigateur, gr\u00e2ce \u00e0 la fonction de remplacement de module \u00e0 chaud (HMR) de Vite, qui permet des mises \u00e0 jour rapides sans avoir \u00e0 recharger la page enti\u00e8re<\/span><\/p>\n <\/p>\n Apr\u00e8s avoir configur\u00e9 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\u00e9veloppement sans vous enliser dans les d\u00e9tails de configuration. Vous trouverez ci-dessous une liste des principaux fichiers et r\u00e9pertoires d'une application React typique bas\u00e9e sur Vite\u00a0:<\/span><\/p>\n <\/p>\n <\/p>\nPourquoi utiliser Vite pour le d\u00e9veloppement React\u00a0?<\/span><\/h2>\n
Qu'est-ce que Vite ?<\/span><\/h3>\n
Conditions pr\u00e9alables \u00e0 la configuration de Vite<\/span><\/h2>\n
Node.js et npm<\/span><\/h3>\n
V\u00e9rifiez la version de Node.js<\/span><\/h4>\n
\n<\/span>frapper<\/span>
\n<\/span>noeud -v<\/span><\/p>\nV\u00e9rifier la version npm<\/span><\/h4>\n
\n<\/span>frapper<\/span>
\n<\/span>npm -v<\/span><\/p>\nConnaissances de base de la ligne de commande<\/span><\/h3>\n
\n
\u00c9diteur de code<\/span><\/h3>\n
\n
![\"\"](\"https:\/\/mobian.studio\/wp-content\/uploads\/2024\/11\/pexels-asphotograpy-887751.png\")
<\/p>\nConfigurer Vite pour votre projet React : pr\u00e9requis et pr\u00e9paration<\/span><\/h2>\n
\u00c9tape 1\u00a0: installer Node.js et npm (si non install\u00e9)<\/span><\/h3>\n
Supprimer les versions Node.js existantes (facultatif)<\/span><\/h4>\n
\n<\/span>frapper<\/span>
\n<\/span>sudo apt supprimer nodejs npm<\/span><\/p>\nAjouter le r\u00e9f\u00e9rentiel NodeSource<\/span><\/h4>\n
\n<\/span>frapper<\/span>
\n<\/span>curl -fsSL https:\/\/deb.nodesource.com\/setup_18.x | sudo -E bash \u2013<\/span><\/p>\nInstaller Node.js et npm<\/span><\/h4>\n
\n<\/span>sudo apt install -y nodejs npm<\/span><\/p>\nV\u00e9rifier l'installation<\/span><\/h4>\n
\n<\/span>frapper<\/span>
\n<\/span>noeud -v<\/span><\/p>\n\u00c9tape 2\u00a0: installer Vite \u00e0 l\u2019\u00e9chelle mondiale<\/span><\/h3>\n
Ex\u00e9cutez la commande d\u2019installation globale<\/span><\/h4>\n
\n<\/span>sudo npm install -g create-vite<\/span><\/p>\n\u00c9tape 3\u00a0: cr\u00e9er un nouveau projet React avec Vite<\/span><\/h3>\n
Ex\u00e9cutez la commande Vite Create<\/span><\/h4>\n
\n<\/span>npm cr\u00e9e vite@latest mon-application<\/span><\/p>\nSuivez les instructions de configuration\u00a0:<\/span><\/h4>\n
\n
\u00c9tape 4\u00a0: Acc\u00e9dez \u00e0 votre dossier de projet<\/span><\/h3>\n
Modification du r\u00e9pertoire du projet<\/span><\/h4>\n
\n<\/span>cd mon-application<\/span><\/p>\n\u00c9tape 5\u00a0: Installer les d\u00e9pendances du projet<\/span><\/h3>\n
Ex\u00e9cutez la commande d'installation<\/span><\/h4>\n
\n<\/span>installation de npm<\/span><\/p>\n\u00c9tape 6\u00a0: d\u00e9marrer le serveur de d\u00e9veloppement<\/span><\/h3>\n
Ex\u00e9cuter le serveur de d\u00e9veloppement<\/span><\/h4>\n
\n<\/span>npm ex\u00e9cuter dev<\/span><\/p>\n
\n<\/span>Arduino<\/span>
\n<\/span>http:\/\/localhost:5173\/<\/span><\/p>\n\u00c9tape 7\u00a0: affichez votre application React dans le navigateur<\/span><\/h3>\n
Ouvrez l\u2019URL locale dans votre navigateur\u00a0:<\/span><\/h4>\n
\n
![\"\"](\"https:\/\/mobian.studio\/wp-content\/uploads\/2024\/11\/pexels-pixabay-267392.png\")
<\/p>\nPr\u00e9sentation de la structure du projet Vite<\/span><\/h2>\n
index.html<\/span><\/h3>\n
\n
src\/main.jsx<\/span><\/h3>\n
\n