Erstellen Sie eine responsive Visitenkarte mit React

Einführung

In diesem Projekt lernen Sie, wie Sie mit React eine persönliche Visitenkarte erstellen können. Das Projekt beinhaltet das Erstellen einer responsiven und interaktiven Webanwendung, die es Benutzern ermöglicht, ihre persönlichen Informationen einzugeben und eine maßgeschneiderte Visitenkarte zu generieren.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie ein React-Projekt einrichten und die erforderlichen Abhängigkeiten installieren
• Wie Sie eine ProfileCard-Komponente mit dem useForm-Hook aus der react-hook-form-Bibliothek implementieren
• Wie Sie die ProfileCard-Komponente in die Hauptkomponente App integrieren
• Wie Sie die Anwendung mit CSS gestalten, um ein ansprechendes und visuell konsistentes Design zu erstellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

• Den useForm-Hook aus der react-hook-form-Bibliothek nutzen, um den Formularzustand und die Validierung zu verwalten
• Wiederverwendbare React-Komponenten erstellen und in eine größere Anwendung integrieren
• Eine React-Anwendung mit CSS gestalten, um das gewünschte visuelle Erscheinungsbild zu erreichen
• Die Wichtigkeit einer modularen und wartbaren Code-Struktur in React-Projekten verstehen

Projekt einrichten

In diesem Schritt lernen Sie, wie Sie das Projekt einrichten und die erforderlichen Abhängigkeiten installieren.

Öffnen Sie Ihren Code-Editor und navigieren Sie zum Projektverzeichnis.

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

Als Nächstes laden Sie die Abhängigkeiten herunter, indem Sie den Befehl npm install im Terminal ausführen. Warten Sie, bis das Herunterladen der Abhängigkeiten abgeschlossen ist, und starten Sie dann das Projekt mit dem Befehl npm start.

Sobald das Projekt erfolgreich gestartet wurde, klicken Sie auf "Web 8080", um es in Ihrem Browser zu previewen.

Implementieren Sie die ProfileCard-Komponente

In diesem Schritt implementieren Sie die ProfileCard-Komponente unter Verwendung des useForm-Hooks aus der react-hook-form-Bibliothek.

1. Öffnen Sie die Datei ProfileCard.js, die sich im Verzeichnis src/components befindet.

2. Importieren Sie die erforderlichen Module und Komponenten:

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

3. Implementieren Sie die ProfileCard-Komponente:

   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>
     );
   };
   

   In dieser Implementierung verwenden wir den useForm-Hook aus der react-hook-form-Bibliothek, um den Formularzustand und die Validierung zu verwalten. Wenn das Formular abgesendet wird, wird die onSubmit-Funktion aufgerufen, die den submitted-Zustand auf true setzt und die Formulardaten im data-Zustand speichert.

   Die Komponente rendert dann entweder das Formular oder die Visitenkarte, je nachdem, welchen Zustand submitted hat.

4. Testen Sie die Anwendung, indem Sie das Formular ausfüllen und absenden. Stellen Sie sicher, dass die Visitenkarte mit den eingegebenen Informationen korrekt angezeigt wird.

Das fertige Ergebnis sieht wie folgt aus:

Herzlichen Glückwunsch! Sie haben das Projekt Personal Card Generator abgeschlossen. Sie haben gelernt, wie Sie den useForm-Hook aus der react-hook-form-Bibliothek verwenden, um den Formularzustand und die Validierung zu verwalten, und wie Sie die ProfileCard-Komponente in die App-Komponente integrieren. Sie haben auch gelernt, wie Sie die Anwendung mit CSS gestalten.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.