# 🎨 WINDOWS - Configuration React + Frontend Complète
**Cet guide s'occupe UNIQUEMENT du frontend React**
Le backend viendra plus tard - concentrez-vous sur le frontend d'abord!
---
## ⚠️ AVANT DE COMMENCER
### 1. Vérifier que [Link] est Installé
Ouvrez **PowerShell** (clic droit sur le Bureau → "Ouvrir Terminal"):
```powershell
node --version
npm --version
```
**Vous devez voir quelque chose comme:**
```
v18.16.0
9.6.7
```
❌ **Si vous voyez "commande non reconnue":**
1. Téléchargez [Link]: [Link] (cliquez LTS)
2. Installez (cliquez "Next" partout)
3. **Redémarrez votre ordinateur**
4. Réessayez les commandes
---
## 📍 ÉTAPE 1: Naviguer vers Votre Dossier
Votre dossier est sur le Bureau: `C:\Users\VotreProfil\Desktop\projet_soutenance`
**La plus facile:**
1. Allez sur le Bureau
2. Clic droit sur `projet_soutenance`
3. Cliquez sur "Ouvrir dans Terminal"
**OU manuellement dans PowerShell:**
```powershell
cd Desktop\projet_soutenance
dir
```
Vous devez voir quelque chose comme:
```
Mode Name
---- ----
-a--- 00_LIRE_MOI_DABORD.md
-a--- [Link]
...
```
---
## 🚀 ÉTAPE 2: Créer le Projet React avec Vite
```powershell
npm create vite@latest frontend -- --template react
```
**Répondez:**
- ✅ Cliquez "y" ou appuyez sur Entrée si demandé
**Cela crée un dossier `frontend` avec React à l'intérieur**
---
## 📁 ÉTAPE 3: Entrer dans le Dossier Frontend
```powershell
cd frontend
dir
```
Vous devez voir:
```
node_modules/
public/
src/
[Link]
[Link]
[Link]
...
```
---
## 📦 ÉTAPE 4: Installer les Dépendances Essentielles
### Installer les dépendances par défaut
```powershell
npm install
```
**Attendez (2-5 minutes) - c'est normal!**
Vous verrez:
```
added 200+ packages
```
### Installer les packages essentiels pour le frontend
```powershell
npm install react-router-dom axios react-hook-form react-hot-toast
```
**Cela installe:**
- **react-router-dom** → Navigation entre pages
- **axios** → Appels API au backend
- **react-hook-form** → Formulaires simples
- **react-hot-toast** → Messages de notification
---
## 🎨 ÉTAPE 5: Installer et Configurer Tailwind CSS
### Installer Tailwind
```powershell
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
Vous devez voir:
```
✔ Created Tailwind CSS config file: [Link]
✔ Created PostCSS config file: [Link]
```
### Configurer Tailwind pour React
Ouvrez le fichier `[Link]` (dans VS Code):
**Cherchez cette partie:**
```javascript
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
```
**Remplacez par:**
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./[Link]",
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
danger: '#ef4444',
}
},
},
plugins: [],
}
```
### Configurer le CSS
Ouvrez le fichier `src/[Link]` et remplacez **TOUT** par:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Vos styles personnalisés ici */
```
---
## 🔗 ÉTAPE 6: Créer le Fichier .[Link]
Créez un fichier `.[Link]` à la racine du dossier `frontend`:
```
VITE_API_URL=[Link]
```
⚠️ **Important:**
- Ce fichier doit être à côté de `[Link]` et `[Link]`
- Ne pas le versioner (ajoutez le à `.gitignore`)
- Vous changerez le port 5000 quand le backend sera prêt
---
## 📂 ÉTAPE 7: Créer la Structure des Dossiers
Dans le dossier `frontend/src`, créez ces sous-dossiers:
```powershell
# Assurez-vous d'être dans frontend/src
cd src
mkdir components
mkdir pages
mkdir services
mkdir context
mkdir hooks
mkdir utils
mkdir assets
# Afficher la structure
dir
cd ..
```
**Votre structure doit ressembler à:**
```
frontend/
├── src/
│ ├── components/ ← Composants React réutilisables
│ ├── pages/ ← Pages (Login, Register, Home, etc)
│ ├── services/ ← API calls
│ ├── context/ ← État global (Context API)
│ ├── hooks/ ← Hooks personnalisés
│ ├── utils/ ← Fonctions utilitaires
│ ├── assets/ ← Images, icons
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── public/
├── .[Link]
├── [Link]
└── [Link]
```
---
## ⚙️ ÉTAPE 8: Configurer Vite pour Hot Reload
Ouvrez `[Link]` et remplacez par:
```javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 5173,
host: 'localhost',
strictPort: false,
}
})
```
---
## 📄 ÉTAPE 9: Vérifier [Link]
Ouvrez `[Link]` et vérifiez:
**Cherchez "scripts":**
```json
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
```
Si ce n'est pas là, remplacez la section "scripts" par cela.
**Cherchez "dependencies" - vous devez avoir:**
```json
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.x.x",
"axios": "^1.x.x",
"react-hook-form": "^7.x.x",
"react-hot-toast": "^2.x.x"
}
```
---
## 🧪 ÉTAPE 10: Tester que Tout Fonctionne
```powershell
npm run dev
```
**Vous devez voir:**
```
➜ Local: [Link]
➜ Press h to show help
```
Ouvrez votre navigateur et allez à: `[Link]
✅ Vous voyez la page React par défaut? C'est bon!
**Pour arrêter le serveur:** Appuyez sur `Ctrl + C` dans PowerShell