React Template

Template - React & Tailwind

Ce projet est un template moderne et léger conçu pour démarrer rapidement le développement d’applications web performantes. Il est propulsé par les dernières versions de l’écosystème React : Vite 7, React 19, et Tailwind CSS 4.

Fonctionnalités Clés

** Stack Ultra-Rapide** : Utilise Vite 7 pour un démarrage instantané et un HMR (Hot Module Replacement).
** Styling Moderne** : Intègre Tailwind CSS v4 pour un design entièrement typé.
** Dark Mode Natif** : Gestion du thème (Clair/Sombre) incluse via un Context React, avec détection automatique des préférences système et persistance locale.
Routage : Configuration prête à l’emploi avec React Router v7.
** Testing** : Environnement de test préconfiguré avec Vitest et React Testing Library.
TypeScript : Configuration stricte pour une meilleure sécurité de type et une meilleure expérience développeur.

Structure du Frontend

Le code source de l’application se trouve dans le dossier src/.

src/
   ├── Components/ # Composants réutilisables (Header, ThemeToggle...)
   ├── Context/    # Gestion d'état global (ThemeContext)
   ├── Pages/      # Vues de l'application (Home, RTL, Tailwind demo)
   ├── App.tsx     # Point d'entrée principal avec le Routing
   └── main.tsx    # Montage de l'application React
 public/         # Fichiers statiques
...config files # (vite.config.ts, tailwind.config.js, etc.)

Installation et Démarrage

Prérequis

Node.js (version 18 ou supérieure recommandée)
npm ou yarn

1. Installation des dépendances

Rendez-vous dans le dossier de l’application :

cd webapp
npm install

2. Lancer le serveur de développement

Pour démarrer l’application en mode local :

npm run dev

L’application sera accessible à l’adresse indiquée dans le terminal http://localhost:5173.

Scripts Disponibles

Dans le dossier webapp, vous pouvez exécuter :

Commande	Description
`npm run dev`	Lance le serveur de développement Vite.
`npm run build`	Compile l’application pour la production dans le dossier `dist`.
`npm run preview`	Prévisualise la version de production localement.
`npm test`	Lance la suite de tests unitaires avec Vitest.

Personnalisation

Thèmes et Couleurs

La gestion du thème se trouve dans src/Context/ThemeContext.tsx. Le design utilise les classes utilitaires de Tailwind. Vous pouvez modifier la configuration globale dans src/App.css ou via les variables CSS natives.

Ajouter une nouvelle page

Créez un composant dans src/Pages/.
Importez-le dans src/App.tsx.

Ajoutez une nouvelle <Route> dans la section <Routes> :

<Route path="/ma-nouvelle-page" element={<MaNouvellePage />} />

Déploiement

Le projet est configuré pour être build statiquement.

Exécutez npm run build.
Le contenu du dossier dist généré peut être hébergé sur n’importe quel serveur statique (Nginx, Vercel, Netlify, S3, etc.).