Créer une page de profil dans React est non seulement essentiel mais aussi super amusant ! Il permet à vos utilisateurs de visualiser et de gérer leurs informations personnelles avec style. Dans ce didacticiel, nous allons créer une page de profil élégante à l'aide de packages npm intéressants, notamment Avatarium pour de superbes photos de profil, React Router pour une navigation fluide, Axios pour récupérer des données et Formik pour gérer les entrées de formulaire. Plongeons-nous et créons quelque chose d'incroyable ! Conditions préalables Avant de commencer, assurez-vous d'avoir les éléments suivants : Node.js et npm installés Une compréhension de base de React Un nouveau projet React a été créé à l'aide create-react-app Étape 1 : Configurez votre projet React Tout d'abord, créez un nouveau projet React si vous ne l'avez pas déjà fait : npx create-react-app profile-page cd profile-page Étape 2 : Installer les packages npm requis Nous aurons besoin de plusieurs packages npm pour ce tutoriel : Avatarium : pour générer des avatars thématiques aléatoires React Router : pour gérer la navigation Axios : pour récupérer des données depuis une API Formik : pour gérer l'état et la validation du formulaire Installez ces packages en exécutant : npm install @sabfry/avatarium react-router-dom axios formik Étape 3 : configurer le routeur React Nous utiliserons React Router pour naviguer entre les différentes pages de notre application. Tout d'abord, configurez le routeur dans : App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage'; function App() { return ( <Router> <Switch> <Route path="/profile" component={ProfilePage} /> </Switch> </Router> ); }export default App; Étape 4 : Créer le composant de page de profil Ensuite, créez un composant . Ce composant affichera les informations de profil de l'utilisateur, y compris son avatar, son nom et son adresse e-mail, et permettra à l'utilisateur de mettre à jour ses informations à l'aide d'un form.jsx. ProfilePage.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Avatar from '@sabfry/avatarium'; import { Formik, Form, Field } from 'formik'; const ProfilePage = () => { const [user, setUser] = useState(null); useEffect(() => { axios.get('https://api.example.com/user') .then(response => setUser(response.data)) .catch(error => console.error('Error fetching user data:', error)); }, []); if (!user) return <div>Loading...</div>; return ( <div className="profile-page"> <h1>Profile Page</h1> <div className="profile-info"> <Avatar theme="blobs" /> <h2>{user.name}</h2> <p>{user.email}</p> <Formik initialValues={{ name: user.name, email: user.email }} onSubmit={(values, { setSubmitting }) => { axios.post('https://api.example.com/user/update', values) .then(response => { setUser(response.data); setSubmitting(false); }) .catch(error => { console.error('Error updating user data:', error); setSubmitting(false); }); }} > {({ isSubmitting }) => ( <Form> <div> <label htmlFor="name">Name</label> <Field id="name" name="name" placeholder="John Doe" /> </div> <div> <label htmlFor="email">Email</label> <Field id="email" name="email" placeholder="john.doe@example.com" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage; Dans ce composant : Nous utilisons le hook pour gérer les données utilisateur. useState Le hook récupère les données utilisateur à partir d’une API fictive lors du montage du composant. useEffect Nous utilisons le composant d'Avatarium pour afficher un avatar à thème aléatoire. Avatar Formik est utilisé pour gérer l'état et la validation du formulaire, ce qui facilite la gestion des entrées de formulaire et des soumissions. Étape 5 : Styliser la page de profil Ajoutez du CSS de base pour styliser la page de profil. Créez un fichier et importez-le dans . ProfilePage.css ProfilePage.js /* ProfilePage.css */ .profile-page { display: flex; flex-direction: column; align-items: center; padding: 20px; } .profile-info { display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #f9f9f9; }.profile-info div { margin-bottom: 10px; }button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }button:disabled { background-color: #c0c0c0; cursor: not-allowed; } Importez ce fichier CSS dans votre : ProfilePage.js import './ProfilePage.css'; Étape 6 : Exécuter votre application Enfin, lancez votre application pour voir la page de profil en action : npm start Accédez à pour afficher la page de profil. http://localhost:3000/profile Conclusion Dans ce didacticiel, nous avons créé une page de profil simple à l'aide de React, Avatarium, React Router, Axios et Formik. Cette page récupère les données utilisateur à partir d'une API et les affiche avec un avatar généré aléatoirement, et permet à l'utilisateur de mettre à jour ses informations à l'aide d'un formulaire. Vous pouvez développer cet exemple en ajoutant davantage de fonctionnalités, telles que des champs supplémentaires pour les informations utilisateur, des règles de validation pour le formulaire et un style amélioré.
