Projet de Gestion des Stagiaires avec ReactJS

Une application complète pour gérer efficacement vos stagiaires

---

Points Clés à Retenir

• Structure Modulaire : Organisez votre projet avec des composants réutilisables pour une maintenance simplifiée.
• Gestion d'État Efficace : Utilisez des hooks comme useState et useEffect pour gérer l'état de votre application de manière fluide.
• Fonctionnalités Avancées : Intégrez des fonctionnalités telles que l'authentification, la validation des formulaires et les statistiques pour une application robuste.

Introduction

La gestion des stagiaires est une tâche cruciale pour de nombreuses organisations. Une application bien conçue peut simplifier ce processus en offrant des fonctionnalités telles que l'ajout, la modification, la suppression et la visualisation des stagiaires. Ce guide détaillé vous fournira les étapes nécessaires pour créer un projet de gestion des stagiaires en ReactJS, en intégrant les meilleures pratiques et des fonctionnalités avancées.

Structure du Projet

Une structure bien organisée est essentielle pour le développement d'une application évolutive. Voici un exemple de structure de projet recommandée :

Nom du Dossier/Fichier	Description
public/	Contient les fichiers publics accessibles directement par le navigateur, comme index.html.
src/	Contient le code source de l'application.
src/components/	Contient les composants réutilisables de l'application.
src/containers/	Contient les composants de conteneur qui gèrent la logique et l'état.
src/utils/	Contient les utilitaires et les fonctions auxiliaires.
src/styles/	Contient les fichiers CSS ou SASS pour le style de l'application.
package.json	Fichier de configuration des dépendances et scripts du projet.

Configuration Initiale

Pour démarrer, assurez-vous d'avoir installé Node.js et npm. Ensuite, créez un nouveau projet React en utilisant Create React App :

npx create-react-app gestion-stagiaires

Une fois le projet créé, naviguez dans le dossier du projet :

cd gestion-stagiaires

Installez les dépendances supplémentaires nécessaires :

npm install react-router-dom axios react-google-login

---

Développement des Composants

1. Composant Principal : App.js

Le composant principal gère la navigation et l'état global de l'application.

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import StagiaireList from './components/StagiaireList';
import StagiaireForm from './components/StagiaireForm';
import StagiaireDetails from './components/StagiaireDetails';
import LoginForm from './components/LoginForm';
import Statistiques from './components/Statistiques';
import './styles/styles.css';

function App() {
  return (
    <Router>
      <div className="app-container">
        <h1>Gestion des Stagiaires</h1>
        <Routes>
          <Route path="/" element={<StagiaireList />} />
          <Route path="/ajouter" element={<StagiaireForm />} />
          <Route path="/stagiaire/:id" element={<StagiaireDetails />} />
          <Route path="/login" element={<LoginForm />} />
          <Route path="/statistiques" element={<Statistiques />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

2. Composant de Connexion : LoginForm.js

Ce composant gère l'authentification des utilisateurs en utilisant Google OAuth2.

import React, { useState } from 'react';
import { GoogleLogin } from 'react-google-login';
import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();

  const responseGoogle = (response) => {
    if (response.profileObj) {
      setIsLoggedIn(true);
      navigate('/');
    } else {
      alert('Échec de l\'authentification');
    }
  };

  return (
    <div className="login-form">
      <h2>Connexion</h2>
      <GoogleLogin
        clientId="VOTRE_CLIENT_ID_GOOGLE"
        buttonText="Se connecter avec Google"
        onSuccess={responseGoogle}
        onFailure={responseGoogle}
        cookiePolicy={'single_host_origin'}
      />
      {isLoggedIn && <p>Connexion réussie!</p>}
    </div>
  );
}

export default LoginForm;

3. Liste des Stagiaires : StagiaireList.js

Affiche la liste des stagiaires avec des options pour visualiser les détails ou supprimer un stagiaire.

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

function StagiaireList() {
  const [stagiaires, setStagiaires] = useState([]);

  useEffect(() => {
    // Remplacez cette URL par votre endpoint API
    axios.get('https://api.example.com/stagiaires')
      .then(response => setStagiaires(response.data))
      .catch(error => console.error(error));
  }, []);

  const supprimerStagiaire = (id) => {
    axios.delete(`https://api.example.com/stagiaires/${id}`)
      .then(() => setStagiaires(stagiaires.filter(stagiaire => stagiaire.id !== id)))
      .catch(error => console.error(error));
  };

  return (
    <div className="stagiaire-list">
      <h2>Liste des Stagiaires</h2>
      <Link to="/ajouter" className="btn-ajouter">Ajouter un Stagiaire</Link>
      {stagiaires.length === 0 ? (
        <p>Aucun stagiaire enregistré.</p>
      ) : (
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Nom</th>
              <th>Prénom</th>
              <th>Email</th>
              <th>Département</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {stagiaires.map(stagiaire => (
              <tr key={stagiaire.id}>
                <td>{stagiaire.id}</td>
                <td>{stagiaire.nom}</td>
                <td>{stagiaire.prenom}</td>
                <td>{stagiaire.email}</td>
                <td>{stagiaire.departement}</td>
                <td>
                  <Link to={`/stagiaire/${stagiaire.id}`} className="btn-details">Détails</Link>
                  <button onClick={() => supprimerStagiaire(stagiaire.id)} className="btn-supprimer">Supprimer</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default StagiaireList;

4. Formulaire de Stagiaire : StagiaireForm.js

Permet d'ajouter ou de modifier un stagiaire.

import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';

function StagiaireForm() {
  const [formData, setFormData] = useState({
    nom: '',
    prenom: '',
    email: '',
    departement: ''
  });
  const navigate = useNavigate();
  const { id } = useParams();

  useEffect(() => {
    if (id) {
      // Remplacez cette URL par votre endpoint API
      axios.get(`https://api.example.com/stagiaires/${id}`)
        .then(response => setFormData(response.data))
        .catch(error => console.error(error));
    }
  }, [id]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (id) {
      // Mise à jour du stagiaire
      axios.put(`https://api.example.com/stagiaires/${id}`, formData)
        .then(() => navigate('/'))
        .catch(error => console.error(error));
    } else {
      // Ajout d'un nouveau stagiaire
      axios.post('https://api.example.com/stagiaires', formData)
        .then(() => navigate('/'))
        .catch(error => console.error(error));
    }
  };

  return (
    <div className="stagiaire-form">
      <h2>{id ? 'Modifier' : 'Ajouter'} un Stagiaire</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Nom :</label>
          <input type="text" name="nom" value={formData.nom} onChange={handleChange} required />
        </div>
        <div>
          <label>Prénom :</label>
          <input type="text" name="prenom" value={formData.prenom} onChange={handleChange} required />
        </div>
        <div>
          <label>Email :</label>
          <input type="email" name="email" value={formData.email} onChange={handleChange} required />
        </div>
        <div>
          <label>Département :</label>
          <input type="text" name="departement" value={formData.departement} onChange={handleChange} required />
        </div>
        <button type="submit">{id ? 'Mettre à jour' : 'Ajouter'}</button>
      </form>
    </div>
  );
}

export default StagiaireForm;

5. Détails du Stagiaire : StagiaireDetails.js

Affiche les détails d'un stagiaire spécifique.

import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import axios from 'axios';

function StagiaireDetails() {
  const [stagiaire, setStagiaire] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    // Remplacez cette URL par votre endpoint API
    axios.get(`https://api.example.com/stagiaires/${id}`)
      .then(response => setStagiaire(response.data))
      .catch(error => console.error(error));
  }, [id]);

  if (!stagiaire) {
    return <p>Chargement des détails...</p>;
  }

  return (
    <div className="stagiaire-details">
      <h2>Détails du Stagiaire</h2>
      <p><strong>ID :</strong> {stagiaire.id}</p>
      <p><strong>Nom :</strong> {stagiaire.nom}</p>
      <p><strong>Prénom :</strong> {stagiaire.prenom}</p>
      <p><strong>Email :</strong> {stagiaire.email}</p>
      <p><strong>Département :</strong> {stagiaire.departement}</p>
      <Link to={`/stagiaire/${stagiaire.id}/modifier`} className="btn-modifier">Modifier</Link>
      <Link to="/" className="btn-retour">Retour à la Liste</Link>
    </div>
  );
}

export default StagiaireDetails;

6. Statistiques : Statistiques.js

Affiche des statistiques sur les stagiaires, comme le nombre de stagiaires par département.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Bar } from 'react-chartjs-2';

function Statistiques() {
  const [data, setData] = useState({});

  useEffect(() => {
    // Remplacez cette URL par votre endpoint API
    axios.get('https://api.example.com/stagiaires')
      .then(response => {
        const departements = {};
        response.data.forEach(stagiaire => {
          departements[stagiaire.departement] = (departements[stagiaire.departement] || 0) + 1;
        });
        setData({
          labels: Object.keys(departements),
          datasets: [
            {
              label: 'Nombre de Stagiaires',
              data: Object.values(departements),
              backgroundColor: 'rgba(75,192,192,0.6)'
            }
          ]
        });
      })
      .catch(error => console.error(error));
  }, []);

  return (
    <div className="statistiques">
      <h2>Statistiques des Stagiaires</h2>
      {data.labels ? (
        <Bar
          data={data}
          options={{
            responsive: true,
            plugins: {
              legend: { display: false },
              title: { display: true, text: 'Stagiaires par Département' }
            }
          }}
        />
      ) : (
        <p>Chargement des statistiques...</p>
      )}
    </div>
  );
}

export default Statistiques;

Styles de l'Application

Pour assurer une présentation cohérente et agréable, utilisez les styles CSS suivants :

body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  margin: 0;
  padding: 20px;
}

.app-container {
  max-width: 1200px;
  margin: auto;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  text-align: center;
  color: #333333;
}

.stagiaire-list, .stagiaire-form, .stagiaire-details, .login-form, .statistiques {
  margin-top: 20px;
}

.btn-ajouter, .btn-modifier, .btn-supprimer, .btn-details, .btn-retour {
  margin: 5px;
  padding: 10px 15px;
  background-color: #388278;
  color: #ffffff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn-ajouter:hover, .btn-modifier:hover, .btn-supprimer:hover, .btn-details:hover, .btn-retour:hover {
  background-color: #2c6b63;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

table, th, td {
  border: 1px solid #dddddd;
}

th, td {
  padding: 12px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 8px;
  margin: 5px 0 15px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #388278;
  color: #ffffff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #2c6b63;
}

.login-form, .stagiaire-form, .stagiaire-details, .statistiques {
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 5px;
}

Intégration avec une API Backend

Pour une gestion efficace des données des stagiaires, il est recommandé d'intégrer votre application avec une API backend. Vous pouvez utiliser Node.js avec Express.js ou tout autre framework de votre choix.

Exemple de Configuration Backend

Voici un exemple simple d'un serveur backend avec Express.js :

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 5000;

app.use(cors());
app.use(express.json());

let stagiaires = [
  { id: 1, nom: 'Dupont', prenom: 'Jean', email: 'jean.dupont@example.com', departement: 'Informatique' },
  { id: 2, nom: 'Martin', prenom: 'Claire', email: 'claire.martin@example.com', departement: 'Marketing' }
];

// Obtenir tous les stagiaires
app.get('/stagiaires', (req, res) => {
  res.json(stagiaires);
});

// Obtenir un stagiaire par ID
app.get('/stagiaires/:id', (req, res) => {
  const stagiaire = stagiaires.find(s => s.id === parseInt(req.params.id));
  if (stagiaire) {
    res.json(stagiaire);
  } else {
    res.status(404).send('Stagiaire non trouvé');
  }
});

// Ajouter un nouveau stagiaire
app.post('/stagiaires', (req, res) => {
  const { nom, prenom, email, departement } = req.body;
  const newStagiaire = {
    id: stagiaires.length + 1,
    nom,
    prenom,
    email,
    departement
  };
  stagiaires.push(newStagiaire);
  res.status(201).json(newStagiaire);
});

// Mettre à jour un stagiaire
app.put('/stagiaires/:id', (req, res) => {
  const stagiaire = stagiaires.find(s => s.id === parseInt(req.params.id));
  if (stagiaire) {
    const { nom, prenom, email, departement } = req.body;
    stagiaire.nom = nom;
    stagiaire.prenom = prenom;
    stagiaire.email = email;
    stagiaire.departement = departement;
    res.json(stagiaire);
  } else {
    res.status(404).send('Stagiaire non trouvé');
  }
});

// Supprimer un stagiaire
app.delete('/stagiaires/:id', (req, res) => {
  stagiaires = stagiaires.filter(s => s.id !== parseInt(req.params.id));
  res.status(204).send();
});

app.listen(PORT, () => {
  console.log(`Serveur démarré sur le port ${PORT}`);
});

Déploiement de l'Application

Une fois le développement terminé, vous pouvez déployer votre application en utilisant des services tels que Vercel, Netlify, ou AWS.

Étapes pour Déployer sur Netlify

1. Créez un compte sur Netlify si ce n'est pas déjà fait.
2. Connectez votre dépôt GitHub contenant le projet React.
3. Configurez les paramètres de build :
• Commande de Build : npm run build
• Dossier de Publication : build
4. Lancez le déploiement et attendez que Netlify construise et publie votre application.

Conclusion

Créer une application de gestion des stagiaires avec ReactJS permet de centraliser et d'automatiser de nombreuses tâches administratives liées à la gestion des stagiaires. En suivant ce guide, vous avez acquis les connaissances nécessaires pour développer une application robuste, évolutive et facile à maintenir. N'oubliez pas d'intégrer des fonctionnalités avancées telles que l'authentification et les statistiques pour enrichir l'expérience utilisateur et améliorer l'efficacité de la gestion.

Références