📘 Chapitre – Structure d’un projet React (Vite ou CRA)

1. 🎯 Objectif pédagogique

Découvrir la structure de base d’un projet React, comprendre les rôles des fichiers principaux et apprendre à lancer un projet avec Vite ou Create React App (CRA).

2. 📚 Concepts abordés

  • Installation d’un projet React (Vite ou CRA)
  • Rôle des dossiers src/, public/ et du fichier package.json
  • Fichiers principaux : index.html, index.js, App.jsx
  • Notion de bundler et rôle de node_modules
  • Commandes de base : npm install, npm run dev, npm start

3. 🧠 Explication théorique

Un projet React moderne utilise un bundler (Vite ou Webpack via CRA) pour transformer et servir le code. La structure typique d’un projet React avec Vite :

mon-projet/
├── public/
│   └── favicon.ico
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
├── index.html
├── package.json
└── vite.config.js
  • src/ : contient les composants React.
  • index.html : page HTML principale.
  • package.json : liste des dépendances et scripts.
  • node_modules/ : dépendances installées.

Installation avec Vite :

npm create vite@latest mon-projet
cd mon-projet
npm install
npm run dev

Installation avec CRA (ancienne méthode) :

npx create-react-app mon-projet
cd mon-projet
npm start

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un projet React et explorer sa structure.

Étape 1 : Créer le projet avec Vite 

npm create vite@latest react-demo
  • Sélectionner React puis JavaScript.

Étape 2 : Lancer le serveur 

cd react-demo
npm install
npm run dev

Le serveur se lance sur http://localhost:5173.

Étape 3 : Explorer les fichiers

  • Ouvrir src/App.jsx et modifier le texte d’accueil.
  • Ouvrir index.html et repérer la balise <div id="root"></div>.

Étape 4 : Modifier App.jsx 

function App() {
  return <h1>Bonjour React !</h1>;
}

export default App;

Étape 5 : Rafraîchir la page

Les changements s’affichent automatiquement grâce au Hot Module Replacement (HMR).

5. 🧾 Résumé et points-clés

  • React utilise un bundler (Vite ou Webpack) pour servir l’application.
  • Les fichiers essentiels : index.html, App.jsx, main.jsx.
  • npm run dev (Vite) ou npm start (CRA) lance le projet en mode développement.
  • La structure src/ contient les composants React de l’application.