La série de stack MERN !

Post 5 : Créer l'interface utilisateur frontend avec React

Dans l'article 4, nous avons développé une API RESTful utilisant Express et Node.js pour gérer les opérations CRUD pour les données utilisateur. Il est maintenant temps de créer l'interface utilisateur frontend à l'aide de React, permettant aux utilisateurs d'afficher, d'ajouter, de mettre à jour et de supprimer des données via une interface interactive qui communique avec notre backend.

1. Configuration du projet Frontend

Tout d'abord, assurons-nous que la configuration du frontend est prête dans votre projet de pile MERN.

• Accédez au dossier frontend et installez Axios pour gérer les requêtes HTTP :

  cd frontend
  npm install axios

Axios nous permettra d'envoyer facilement des requêtes vers notre API Express.

2. Création de composants React de base

Nous allons créer des composants pour gérer les utilisateurs : un composant principal pour lister les utilisateurs et un composant de formulaire pour ajouter ou modifier des utilisateurs.

Organiser le dossier des composants

Dans src, créez un dossier de composants avec les fichiers suivants :

• UserList.js - pour lister les utilisateurs
• UserForm.js - pour créer et modifier des utilisateurs

Composant UserList

UserList récupérera les données utilisateur du backend et les affichera dans une liste. Ajoutez le code suivant à UserList.js :

// src/components/UserList.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const UserList = ({ onEdit, onDelete }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get("/api/users");
        setUsers(response.data);
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>
            {user.name} - {user.email}
            <button onClick={() => onEdit(user)}>Edit</button>
            <button onClick={() => onDelete(user._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

Composant UserForm

Le composant UserForm gère la création et la mise à jour des utilisateurs.

// src/components/UserForm.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const UserForm = ({ selectedUser, onSave }) => {
  const [formData, setFormData] = useState({ name: "", email: "", password: "" });

  useEffect(() => {
    if (selectedUser) {
      setFormData(selectedUser);
    }
  }, [selectedUser]);

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

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      if (selectedUser) {
        await axios.put(`/api/users/${selectedUser._id}`, formData);
      } else {
        await axios.post("/api/users", formData);
      }
      onSave();
      setFormData({ name: "", email: "", password: "" });
    } catch (error) {
      console.error("Error saving user:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="Name" required />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="Email" required />
      <input name="password" value={formData.password} onChange={handleChange} placeholder="Password" required />
      <button type="submit">{selectedUser ? "Update User" : "Add User"}</button>
    </form>
  );
};

export default UserForm;

3. Rassembler tout cela dans le composant d'application

Dans App.js, nous combinerons UserList et UserForm pour afficher la liste des utilisateurs et gérer l'ajout/la mise à jour des utilisateurs.

// src/App.js
import React, { useState } from "react";
import UserList from "./components/UserList";
import UserForm from "./components/UserForm";
import axios from "axios";

const App = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleEdit = user => setSelectedUser(user);

  const handleDelete = async userId => {
    try {
      await axios.delete(`/api/users/${userId}`);
      window.location.reload();
    } catch (error) {
      console.error("Error deleting user:", error);
    }
  };

  const handleSave = () => {
    setSelectedUser(null);
    window.location.reload();
  };

  return (
    <div>
      <h1>Manage Users</h1>
      <UserForm selectedUser={selectedUser} onSave={handleSave} />
      <UserList onEdit={handleEdit} onDelete={handleDelete} />
    </div>
  );
};

export default App;

4. Tester l'application

Pour tester l'interface utilisateur front-end avec l'API back-end, assurez-vous que les serveurs back-end et front-end sont en cours d'exécution :

• Dans le dossier backend, démarrez le serveur :

  npm start

• Dans le dossier frontend, démarrez l'application React :

  npm start

Visitez http://localhost:3000 pour interagir avec l'application. Vous devriez être capable de :

• Ajouter un nouvel utilisateur : saisissez les détails dans le formulaire et cliquez sur "Ajouter un utilisateur".
• Modifier un utilisateur : cliquez sur "Modifier" à côté du nom d'un utilisateur pour charger ses données dans le formulaire.
• Supprimer un utilisateur : Cliquez sur "Supprimer" pour supprimer l'utilisateur de la liste.

Prochaines étapes

Dans le Post 6, nous nous concentrerons sur le raffinement de l'interface utilisateur et l'amélioration de l'expérience utilisateur en ajoutant du style et en gérant les validations de formulaire. Restez à l'écoute pour en savoir plus !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!