Accueil / Articles / Guide de configuration React + Vite (2026) : Création de votre première application fonctionnelle, expliquée pas à pas

ReactViteNode.jsnpmJavaScriptFrontend Development

Guide de configuration React + Vite (2026) : Création de votre première application fonctionnelle, expliquée pas à pas

Découvrez comment installer Node.js, npm, VS Code et Vite pour créer une application React, tout en comprenant ce que fait réellement chaque outil en arrière-plan.

1601 mots

« Le bon moment pour créer votre premier composant React n’est pas immédiatement après avoir regardé des tutoriels en boucle — c’est une fois que vous avez mis en place un environnement adéquat et que vous comprenez réellement pourquoi chaque élément existe. »

Dans l’article précédent, nous avons examiné ce qu’est React, pourquoi il a été créé chez Facebook, et comment il a transformé la manière dont les développeurs conçoivent des applications web.

À présent, nous passons des concepts à la pratique concrète.

Au préalable de coder un quelconque composant, vous avez besoin d’un espace de travail capable d’exécuter React, de recharger vos modifications instantanément et de vous soutenir à mesure que votre application se développe.

Au terme de cet article, vous disposerez d’une application React fonctionnelle sur votre propre ordinateur, et vous comprendrez ce que fait réellement chaque outil de l’environnement de développement.

Pourquoi ne pouvons-nous pas simplement écrire du React dans un fichier HTML ?

Les débutants posent presque toujours cette question en premier.

React est « juste du JavaScript », alors un simple fichier HTML ne suffirait-il pas ?

Techniquement, c’est vrai dans un sens très limité.

Mais les projets React en situation réelle dépendent de choses comme :

  • JSX
  • ES Modules
  • Hot Module Replacement
  • Gestion des paquets
  • Optimisation de la compilation

Aucun de ces éléments n’est compris nativement par les navigateurs.

C’est pourquoi les développeurs s’appuient sur des outils qui transforment et préparent le code avant qu’il n’atteigne le navigateur.

C’est similaire à la préparation d’un repas.

Les ingrédients crus ne sont pas consommés directement du réfrigérateur — ils doivent d’abord être préparés.

La mise en place d’un projet React suit la même logique.

Les outils que nous installerons

Il existe un petit ensemble d’outils sur lesquels presque tous les développeurs React s’appuient, et nous allons les installer tous dans ce guide.

Chaque outil résout un problème spécifique au sein du flux de travail.

Lorsque tout est en place, vous ne remarquerez presque pas qu’ils s’exécutent en arrière-plan.

Comprendre Node.js

Une idée reçue courante est que React s’exécute lui-même sur Node.js.

C’est faux.

React s’exécute dans le navigateur, et non dans Node.

Node.js a pour but de vous aider pendant la création de l’application, et non lorsque celle-ci est en cours d’exécution pour les utilisateurs finaux.

Il vous permet de :

  • Installer des bibliothèques
  • Démarrer des serveurs de développement
  • Créer des bundles optimisés pour la production
  • Gérer les dépendances du projet

Sans Node.js, installer et faire fonctionner React serait bien plus difficile.

Qu’est-ce que npm, exactement ?

L’installation de Node.js inclut automatiquement npm, l’abréviation de Node Package Manager.

Imaginez devoir créer un nouveau site à partir de zéro et d’avoir besoin simultanément de plusieurs bibliothèques, telles que :

  • React
  • React Router
  • Axios
  • Tailwind CSS
  • Redux Toolkit

Au lieu de télécharger manuellement chacune d’elles, npm gère l’installation via une seule commande.

Par exemple :

npm install axios

C’est suffisant — npm télécharge le paquet, l’intègre à votre projet et enregistre la version que vous utilisez.

Pourquoi React moderne utilise Vite

Les tutoriels plus anciens montrent souvent une commande de ce type pour créer un projet :

npx create-react-app my-app

Pendant longtemps, c’était la méthode privilégiée.

Cependant, aujourd’hui, la communauté React a largement opté pour Vite.

Qu’est-ce qui a provoqué ce changement ?

Principalement le désir d’une expérience de développement quotidienne plus rapide.

Vite offre :

  • Démarrage instantané du projet
  • Remplacement rapide des modules en temps réel (HMR)
  • Tailles plus petites des fichiers de build pour la production
  • Configuration globale simplifiée
  • Performances générales améliorées

Pour quiconque apprend React actuellement, commencer avec Vite est le choix judicieux.

Étape 1 : Installer Node.js

Téléchargez la dernière version LTS (Long-Term Support) de Node.js depuis son site officiel.

Lorsqu’elle est installée, ouvrez un terminal pour vérifier que l’installation a réussi.

node -v

Le résultat doit ressembler à ceci :

v24.x.x

Vérifiez ensuite npm également :

npm -v

Si les deux commandes affichent des numéros de version, votre machine est correctement configurée.

Étape 2 : Installer Visual Studio Code

Techniquement, vous pouvez écrire en React dans n’importe quel éditeur, mais VS Code est devenu le choix par défaut grâce à sa vitesse, son écosystème d’extensions et ses puissants outils JavaScript.

Extensions VS Code que tout développeur React devrait installer

L’installation d’un petit ensemble d’extensions dès le début a un impact réel sur la facilité d’utilisation au quotidien. Voici celles qui méritent d’être ajoutées à votre configuration :

  • ESLint, pour détecter les problèmes dans votre code
  • Prettier, pour un formatage cohérent
  • Error Lens, pour afficher les erreurs directement dans le code
  • Auto Rename Tag, pour maintenir la synchronisation des balises correspondantes
  • Path Intellisense, pour compléter automatiquement les chemins de fichiers
  • GitLens, pour des informations Git plus détaillées directement dans l’éditeur
  • ES7+ React Snippets, pour des modèles React rapides

Toutes ces extensions couvrent le formatage, la détection précoce des erreurs, la complétion automatique et l’amélioration de la productivité générale.

Étape 3 : Créer votre premier projet React

Ouvrez une fenêtre de terminal et exécutez :

npm create vite@latest

Vous serez invité à répondre à quelques questions de configuration :

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

Lorsque la création du squelette sera terminée, naviguez dans le nouveau dossier du projet :

cd react-beginners

Ensuite, installez les dépendances du projet :

npm install

Et enfin, lancez le serveur de développement :

npm run dev

La sortie du terminal ressemblera à ceci :

Local: http://localhost:5173

Ouvrez cette adresse dans votre navigateur.

Votre première application React est maintenant en ligne et fonctionnelle.

Comprendre la structure du projet

Un projet React fraîchement généré peut sembler intimidant au premier abord, mais en pratique il n’y a que quelques fichiers avec lesquels vous interagirez régulièrement.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Presque tout le code que vous écrivez au quotidien se trouve à l’intérieur de ce dossier.

App.jsx

Considérez ceci comme le composant racine de votre application.

Toute fonctionnalité que vous développerez par la suite partira de là.

main.jsx

C’est le fichier qui relie votre application React à la page web réelle.

C’est lui qui indique précisément à React où votre application doit s’afficher dans le DOM.

package.json

Ici se trouvent les métadonnées de votre projet, ainsi que ses dépendances et les scripts utilisés pour le lancer ou le compiler.

node_modules

Cet dossier contient tous les paquets dont dépend votre projet.

Laissez-le tel quel — il n’y a aucune raison de modifier manuellement quoi que ce soit à l’intérieur.

Faire votre première modification

Ouvrez App.jsx et remplacez le contenu de base par :

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Enregistrez le fichier et observez ce qui se passe dans le navigateur.

Avez-vous vu ? La page s’est mise à jour toute seule, sans besoin de rafraîchissement manuel.

Ce comportement s’appelle le Hot Module Replacement, ou HMR.

De telles petites commodités s’additionnent et permettent d’économiser beaucoup de temps tout au long du cycle de vie d’un projet.

Développeurs Angular : voici ce qui diffère

Venant d’Angular, vous trouverez le flux de travail global reconnaissable, mais avec moins de formalités.

React privilégie la flexibilité, vous permettant de monter les choses à votre manière, tandis qu’Angular intègre dès le départ une structure plus stricte.

Aucune des deux approches n’est objectivement supérieure — elles résolvent simplement le problème différemment.

Erreurs courantes des débutants

Pendant que vous vous familiarisez avec React, vous rencontrerez probablement quelques problèmes récurrents.

  • Oublier d’exécuter npm install
  • Exécution de commandes depuis le mauvais répertoire, en dehors du dossier du projet
  • Modification des fichiers à l’intérieur de node_modules
  • Utilisation d’une version obsolète de Node.js
  • Fermeture de la fenêtre du terminal alors que le serveur de développement est encore en cours d’exécution

    • Lorsque vous reconnaîtrez ces schémas, il sera facile de les éviter.

    Ce que vous avez appris

    En suivant cet article, vous avez abordé :

    • Les raisons pour lesquelles un environnement de développement dédié est nécessaire pour React
    • Les fonctions réelles de Node.js et npm
    • La raison pour laquelle Vite est devenu l’outil standard pour créer des projets React
    • Les étapes pour créer une structure de projet et exécuter votre première application React
    • La fonction de chaque fichier essentiel du projet
    • La manière dont le Hot Module Replacement modifie la façon d’iterer sur le code

    À ce stade, vous disposez de tout ce dont vous avez besoin pour commencer à développer des applications React réelles.

    Défi de pratique

    • Créez un projet React entièrement nouveau à l’aide de Vite.
    • Modifiez le texte du titre dans App.jsx.
    • Ajoutez une brève introduction mentionnant votre propre nom.
    • Adaptez la couleur du texte à l’aide de CSS.
    • Arrêtez le serveur de développement et redémarrez-le manuellement.

    Travailler concrètement sur ces étapes est le moyen le plus rapide pour gagner en confiance avec cette suite d’outils.

    Que vient-il après ?

    Avec votre environnement prêt, l’étape suivante consiste à explorer l’une des idées fondamentales derrière React.

    La partie 3 aborde JSX — la syntaxe qui intègre directement des balises similaires à HTML dans votre code JavaScript.

    • Ce qu’est réellement JSX
  • Les raisons de l’utilisation de JSX par React
  • Les règles imposées par JSX
  • Le fonctionnement des expressions à l’intérieur de JSX
  • Les différences entre HTML et JSX
  • Les erreurs fréquentes commises par les débutants
  • Des pratiques pour garder votre JSX propre et lisible

    • Lorsque vous aurez terminé cet article, vous serez prêt à écrire vos propres composants React en toute confiance.

    Lectures complémentaires

    Tous les articlesEnvoyer le brief