Frontend : React.js 19 (expérience utilisateur )

1. 1. Installation de l’application React
   2. Choix des dépendances nécessaires (react-router-dom, axios, tailwindcss, ..
   3. Structuration du projet «  » composants et des pages de l’application « Dossiers +Fichiers .JSX » » »
   4. Configurer le Router React Dans src/routes/index.jsx
   5. Créer les composants
   6. Créer les Pages Home Dashboard Login Inscription Contact
   7. Configurer l’authentification Authentification (JWT, Sanctum)
   8. Mise en page styles design
   9. Mise en page styles design
   10. Tests  avec des requêtes // Tester avec Postman – Démarrer Laravel Backend : php artisan serve — Démarrer React Frontend : npm run dev — avec Postman :
       ** POST http://localhost:8000/api/login ** GET http://localhost:8000/api/user (avec Authorization: Bearer token) .. etc (Organiser les requîtes en dossiers et actions dans postman )

Doc :  https://react.dev/

### brew install tree ### tree -a > project_react.txt

Dossier racine du projet React 19 /

├── public
│   ├── assets
│   │   └── img
│   │   ├── banner
│   │   │   ├── nataswim_app_banner_0.jpg
│   │   ├── logo
│   │   │   ├── nataswim_app_logo_0.png
│   │   └── personne
│   │   ├── auteur_1.png
│   │   └── auteur_2.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
└── src
├── App.css
├── App.js
├── assets
│   ├── css
│   ├── data
│   └── fonts
├── axios.jsx
├── components
│   ├── auth
│   │   ├── Login.jsx
│   │   ├── Logout.jsx
│   │   ├── PrivateRoute.jsx
│   │   ├── Profile.jsx
│   │   └── Register.jsx
│   ├── common
│   │   ├── Error.jsx
│   │   ├── Loading.jsx
│   │   ├── NotFound.jsx
│   │   └── Pagination.jsx
│   ├── exercises
│   │   ├── ExerciseDetails.jsx
│   │   ├── ExerciseForm.jsx
│   │   └── ExerciseList.jsx
│   ├── layout
│   │   ├── Footer.jsx
│   │   ├── Header.jsx
│   │   ├── Layout.jsx
│   │   ├── Menu.js
│   │   ├── Navbar.jsx
│   │   └── Sidebar.jsx
│   ├── mylists
│   │   ├── MylistDetails.jsx
│   │   ├── MylistForm.jsx
│   │   ├── MylistItems.jsx
│   │   └── MylistList.jsx
│   ├── pages
│   │   ├── PageDetails.jsx
│   │   ├── PageForm.jsx
│   │   └── PageList.jsx
│   ├── plans
│   │   ├── PlanDetails.jsx
│   │   ├── PlanForm.jsx
│   │   ├── PlanList.jsx
│   │   └── PlanWorkouts.jsx
│   ├── roles
│   │   ├── RoleDetails.jsx
│   │   ├── RoleForm.jsx
│   │   └── RoleList.jsx
│   ├── swimsets
│   │   ├── SwimSetDetails.jsx
│   │   ├── SwimSetForm.jsx
│   │   └── SwimSetList.jsx
│   ├── uploads
│   │   ├── UploadDetails.jsx
│   │   ├── UploadForm.jsx
│   │   └── UploadList.jsx
│   ├── users
│   │   ├── UserDetails.jsx
│   │   ├── UserForm.jsx
│   │   └── UserList.jsx
│   └── workouts
│   ├── WorkoutDetails.jsx
│   ├── WorkoutExercises.jsx
│   ├── WorkoutForm.jsx
│   ├── WorkoutList.jsx
│   └── WorkoutSwimSets.jsx
├── hooks
├── index.css
├── index.js
├── pages
│   ├── Dashboard.jsx
│   ├── HomePage.jsx
│   ├── Profile.jsx
│   ├── ProfilePage.jsx
│   ├── RolesPage.jsx
│   ├── SettingsPage.jsx
│   └── UsersPage.jsx

Wache Zide Oula La **  ajouter ├── components

│   ├── services/ Gestion des requêtes API (via Axios)
│   │   ├── * * api.js
│   │   ├── * * authService.js
│   │   ├── * * userService.js

│   ├── routes/ Gestion du routage avec React Router
│   │   ├── * index.jsx

│   ├── utils/ Fonctions utilitaires (JWT, notifications, etc.)
│   │   ├── * * toastNotifications.js

Source React.dev

Structure du code 

• • Organiser les composants dans des dossiers logiques (ex : components/fonctionnalité  )
  • Utiliser des composants fonctionnels avec des hooks pour la logique et l’état
  • Utiliser un système de gestion d’état comme Redux ou Context API pour gérer les données partagées entre les composants.

Nommage 

• • Utiliser des noms de fichiers et de composants descriptifs et cohérents (ex : Product.js , LoginForm.js ).
  • Suiver les conventions de nommage de React (ex : PascalCase pour les noms de composants).

Style 

• • Utiliser un système de CSS-in-JS comme Styled Components ou Emotion pour styliser vos composants.
  • Utiliser un guide de style pour assurer la cohérence du code.

Gestion d’état 

• • Utiliser des hooks comme useState , useEffect et useContext pour gérer l’état et les effets secondaires de vos composants.
  • Utiliser Redux ou Context API pour gérer l’état global de l application.

Tests 

• • Écrire des tests unitaires pour les composants et les fonctions utilitaires.
  • Utiliser un framework de test comme Jest et React Testing Library.