Créer une carte de visite responsive avec React

Introduction

Dans ce projet, vous apprendrez à créer une carte de visite personnelle en utilisant React. Le projet consiste à construire une application web responsive et interactive qui permet aux utilisateurs de saisir leurs informations personnelles et de générer une carte de visite personnalisée.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous apprendrez :

• Comment configurer un projet React et installer les dépendances nécessaires
• Comment implémenter un composant ProfileCard en utilisant le hook useForm de la bibliothèque react-hook-form
• Comment intégrer le composant ProfileCard dans le composant principal App
• Comment styliser l'application à l'aide de CSS pour créer une conception attrayante et visuellement cohérente

🏆 Réalisations

Après avoir terminé ce projet, vous serez en mesure de :

• Utiliser le hook useForm de la bibliothèque react-hook-form pour gérer l'état et la validation des formulaires
• Créer des composants React réutilisables et les intégrer dans une application plus large
• Styliser une application React à l'aide de CSS pour obtenir l'apparence visuelle souhaitée
• Comprendre l'importance d'une structure de code modulaire et maintenable dans les projets React

Configurer le projet

Dans cette étape, vous apprendrez à configurer le projet et à installer les dépendances nécessaires.

Ouvrez votre éditeur de code et accédez au répertoire du projet.

├── public
├── src
│   ├── components
│   │   └── ProfileCard.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── profile.png
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Ensuite, téléchargez les dépendances en utilisant la commande npm install dans le terminal. Attendez que le téléchargement des dépendances soit terminé, puis lancez le projet en utilisant la commande npm start.

Une fois que le projet a démarré avec succès, cliquez sur "Web 8080" pour l'apercevoir dans votre navigateur.

Implémenter le composant ProfileCard

Dans cette étape, vous allez implémenter le composant ProfileCard en utilisant le hook useForm de la bibliothèque react-hook-form.

1. Ouvrez le fichier ProfileCard.js situé dans le répertoire src/components.

2. Importez les modules et composants nécessaires :

   import React, { useState } from "react";
   import { useForm } from "react-hook-form";
   import profile from "../profile.png";

3. Implémentez le composant ProfileCard :

   export const ProfileCard = () => {
     const [submitted, setSubmitted] = useState(false);
     const [data, setData] = useState({});
     const {
       register,
       formState: { errors },
       handleSubmit
     } = useForm();
   
     const onSubmit = (data) => {
       setSubmitted(true);
       setData(data);
     };
   
     return (
       <div className="wrapper">
         {submitted ? (
           <>
             <img src={profile} alt="profile" className="profile" />
             <h2 className="name-text">{data.name}</h2>
             <p className="position-text">{data.position}</p>
             <p className="info-text">{data.info}</p>
           </>
         ) : (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="form-field">
               <label htmlFor="name">Name: </label>
               <input
                 type="text"
                 id="name"
                 name="name"
                 {...register("name", { required: "Please enter your name" })}
               />
               <p className="name-error">{errors.name?.message}</p>
             </div>
   
             <div className="form-field">
               <label htmlFor="position">Office: </label>
               <input
                 type="text"
                 id="position"
                 name="position"
                 {...register("position", {
                   required: "Please enter your position"
                 })}
               />
               <p className="position-error">{errors.position?.message}</p>
             </div>
   
             <div className="form-field">
               <label htmlFor="info">Brief: </label>
               <input
                 type="text"
                 id="info"
                 name="info"
                 {...register("info", { required: "Please enter your brief" })}
               />
               <p className="info-error">{errors.info?.message}</p>
             </div>
   
             <input type="submit" value="Submit" className="submit" />
           </form>
         )}
       </div>
     );
   };

   Dans cette implémentation, nous utilisons le hook useForm de la bibliothèque react-hook-form pour gérer l'état et la validation du formulaire. Lorsque le formulaire est soumis, la fonction onSubmit est appelée, qui définit l'état submitted sur true et stocke les données du formulaire dans l'état data.

   Le composant affiche ensuite soit le formulaire, soit la carte de visite, en fonction de l'état submitted.

4. Testez l'application en remplissant le formulaire et en le soumettant. Vérifiez que la carte de visite s'affiche correctement avec les informations saisies.

Le résultat final est le suivant :

Félicitations! Vous avez terminé le projet Générateur de cartes personnelles. Vous avez appris à utiliser le hook useForm de la bibliothèque react-hook-form pour gérer l'état et la validation des formulaires, et à intégrer le composant ProfileCard dans le composant App. Vous avez également appris à styliser l'application à l'aide de CSS.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer davantage de laboratoires (labs) sur LabEx pour améliorer vos compétences.