Installer un frontend React avec Node, npm et Vite

Passer des outils Python à un portefeuille React commence souvent par une question simple : quels éléments remplacent venv, pip et requirements.txt ?

Python isole les paquets dans un environnement virtuel et les définit dans un fichier de spécifications. Un front-end React utilise une stack différente : Node.js fournit l’environnement de exécution, npm installe les paquets, et Vite crée rapidement une application locale. Les étapes suivantes permettent de créer un environnement React + Vite à partir d’un dossier vide.

1. Installer Node.js

Les outils React nécessitent Node.js, qui inclut npm (Node Package Manager). Après avoir installé Node depuis la distribution officielle adaptée à votre système d’exploitation, vérifiez l’installation des deux binaires dans un terminal :

node --version
npm --version

npm remplit une fonction similaire à pip : il télécharge des bibliothèques et enregistre leurs versions pour le projet. Vous n’avez pas besoin de créer un environnement virtuel de type Python ; Node ainsi que l’arborescence node_modules locale gèrent l’isolation.

2. Créer un répertoire GitHub

Créez un nouveau répertoire GitHub pour le site. Initialisez-le avec un README.md et un .gitignore adaptés au développement front-end. Le fichier d’ignorance doit au minimum lister :

node_modules/
dist/
.env
.env.*

N’importe jamais node_modules dans les commits. Ces paquets sont des artefacts locaux. Quiconque clone le répertoire peut les recréer à l’aide de npm install à partir de package.json. Éloignez également les informations sensibles de Git : .env et .env.* doivent figurer sur la liste d’ignorance afin que les clés API ne soient jamais enregistrées dans l’historique.

3. Cloner ou ouvrir le projet localement

Clonez le répertoire ou créez le dossier sur le disque, puis ouvrez-le dans VS Code (ou un autre éditeur). Travailler à l’intérieur de ce répertoire permet au squelette fourni par Vite ainsi qu’aux commandes npm ultérieures de rester en place.

4. Initialiser React avec Vite

Vite offre aux applications front-end modernes un démarrage rapide ainsi qu’un serveur de développement réactif. Depuis la racine du projet, exécutez :

npm create vite@latest .

Le point final . indique au générateur de placer les fichiers dans le répertoire actuel plutôt que de créer un dossier imbriqué. Lorsque des questions apparaissent, choisissez :

Framework: React
Variant: JavaScript

Certaines versions demandent également l’installation d’un outil de linting. En l’acceptant, vous pouvez détecter tôt les problèmes de syntaxe et de style ; vous pourrez affiner les règles par la suite.

5. Installer les dépendances

Si le générateur n’a pas installé automatiquement les paquets, exécutez :

npm install

npm lit le fichier package.json, crée le répertoire node_modules et installe toutes les dépendances déclarées. Ce répertoire est volumineux et spécifique à la machine, c’est pourquoi il n’est pas inclus dans le contrôle de version.

6. Démarrer le serveur de développement

Démarrez le serveur local en utilisant :

npm run dev

Vite affiche une URL locale, généralement :

http://localhost:5173/

Ouvrez cette adresse dans un navigateur. Lors du développement, en modifiant et en enregistrant le code source React, la page se met à jour automatiquement grâce au mécanisme de mise à jour en temps réel de Vite, vous permettant ainsi de voir les changements de l’interface sans avoir à recharger manuellement la page à chaque fois.

Python vs React : La différence qui m’a aidé

Le schéma qui éclaircit cette confusion est le suivant. Un projet Python typique se déroule comme suit :

Python → venv → pip → requirements.txt

Un projet React combiné à Vite se déroule comme suit :

Node.js → npm → package.json → node_modules

Le portfolio React n’a pas besoin d’un environnement Python venv. Node.js est l’environnement de exécution, npm est l’outil d’installation, package.json est le manifeste, et node_modules contient les packages installés. Préserver cette séparation évite d’introduire des habitudes propres à Python dans un front-end JavaScript.

Conclusions finales

Venant du domaine Python ou de la science des données, l’architecture centrée sur Node peut sembler peu claire tant que la fonction de chaque outil n’est pas bien comprise. Une fois que Node.js, npm, React et Vite sont en place, le chemin à suivre est simple :

Create repository
        ↓
Open project in VS Code
        ↓
Initialize React + Vite
        ↓
Install dependencies
        ↓
npm run dev
        ↓
Build!

Avec cette chaîne en place, l’environnement front-end React est prêt pour la création de portfolios ainsi que pour l’ajout de nouvelles bibliothèques via npm.