Initialiser un projet React + Vite

Série — Vibe coding pour non-dev 1. Cursor et le terminal · 2. React + Vite · 3. Next.js · 4. Bonnes pratiques

Introduction

Tu as choisi de construire une application — un outil, un dashboard, une interface interactive — et non un site vitrine indexé sur Google.

Si tu n'as pas encore lu l'article sur Cursor et le terminal, commence par là : Node, npm, npx, et la configuration du terminal intégré de Cursor sont les prérequis.

Ici, on passe à l'action : une commande, un projet standard, un serveur local qui tourne.

On part du principe que tu as déjà installé Node sur ta machine. Si ce n'est pas le cas, installe la version recommandée sur le site officiel de Node, puis rouvre ton terminal dans Cursor.

L'objectif : créer un dossier, lancer une commande qui génère tout le projet, installer les dépendances, démarrer le serveur local — puis dialoguer avec Cursor pour adapter l'interface.

1. Créer un dossier de travail et l'ouvrir dans Cursor

Tu peux faire ça de deux façons :

• soit à la main dans ton explorateur de fichiers (clic droit → Nouveau dossier) ;
• soit directement depuis le terminal.

Exemple en terminal :

mkdir mon-projet-react
cd mon-projet-react

Ensuite, tu ouvres ce dossier dans Cursor :

• soit en lançant Cursor, puis File → Open Folder et en choisissant mon-projet-react ;
• soit avec une commande du type cursor . si elle est configurée chez toi.

L'idée : Cursor doit regarder le dossier de ton projet, pas ton dossier utilisateur général.

2. Créer le projet avec Vite

Dans le terminal intégré à Cursor (ou n'importe quel terminal ouvert dans mon-projet-react), tu vas utiliser npm/npx pour demander à Vite de générer la structure du projet pour toi.

Commande classique :

npm create vite@latest

Le terminal va te poser quelques questions :

1. Nom du projet Tu peux garder le nom par défaut (par exemple mon-projet-react) ou en choisir un autre. Ça créera un sous-dossier avec ce nom.

2. Quel framework ? Tu choisis React.

3. TypeScript ou JavaScript ? Si tu ne sais pas coder, tu peux commencer en JavaScript simple (React ou React + JavaScript). Si tu es à l'aise avec l'idée d'un peu plus de structure, tu peux choisir React + TypeScript. Dans tous les cas, la commande fait le gros du travail pour toi.

À la fin, tu auras un message du genre "Now run:" avec deux ou trois commandes à exécuter. Même si tu ne comprends pas chaque détail, retiens que Vite vient de te générer un projet standard que des milliers de dev utilisent.

3. Installer les dépendances

Une fois le projet créé, tu te places dans le dossier du projet (celui qui a été généré par Vite) :

cd mon-projet-react

Puis tu installes les dépendances avec :

npm install

C'est cette commande qui télécharge toutes les "briques" (packages) nécessaires à ton projet. Tu n'as pas besoin de comprendre ce qu'il y a dans package.json pour l'instant : tu peux juste considérer que c'est la "liste de courses" que npm va suivre.

4. Démarrer le serveur local

Une fois l'installation terminée, tu peux lancer ton projet en mode développement avec :

npm run dev

Le terminal va t'afficher une URL du type :

http://localhost:5173/

Tu ouvres cette URL dans ton navigateur, et tu devrais voir l'application Vite/React par défaut. À ce stade, sans avoir écrit une ligne de code, tu as :

• un projet React fonctionnel ;
• un serveur local qui tourne ;
• une structure standard que Cursor peut comprendre et modifier.

5. Premier prompt Cursor : guider l'IA sans tout casser

À partir de là, tu peux commencer à vibe-coder avec Cursor. La clé, ce n'est pas de tout réécrire, c'est de partir de ce qui existe déjà.

Quelques idées de prompts à utiliser dans Cursor (en français ou en anglais, comme tu veux) :

• lui demander d'expliquer la structure du projet Vite/React : par exemple, "explique-moi à quoi servent les principaux fichiers et dossiers de ce projet, comme si je ne savais pas coder."
• lui demander de remplacer le contenu de la page d'accueil par quelque chose qui ressemble à ton projet : une simple page avec un titre, un sous-titre et un bouton.
• lui demander de créer un premier composant simple (par exemple, une carte d'info, une liste, un formulaire ultra basique).

L'important au début :

• tu ne touches pas aux scripts npm dans package.json ;
• tu ne changes pas la structure globale des dossiers sans raison ;
• tu interviens surtout dans les fichiers de composants (.jsx / .tsx selon ta config).

Objectif atteint : tu sais init un projet React + Vite, le lancer en local, et commencer à dialoguer avec Cursor pour adapter l'interface à ton cas d'usage.

Suite de la série

Tu as choisi l'autre stack ? → Initialiser un projet Next.js pour un site vitrine ou un blog.

Ton projet tourne en local ? → Les bonnes pratiques de vibe coding avec Cursor pour apprendre à parler à l'IA sans tout casser.