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 ProfilePage.js . 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.

 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="[email protected]" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage;

Dans ce composant :

• Nous utilisons le hook useState pour gérer les données utilisateur.

• Le hook useEffect récupère les données utilisateur à partir d’une API fictive lors du montage du composant.

• Nous utilisons le composant Avatar d'Avatarium pour afficher un avatar à thème aléatoire.

• 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 ProfilePage.css et importez-le dans 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 à http://localhost:3000/profile pour afficher la page de profil.

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é.