Create Responsive Business Card with React

Introduction

In this project, you will learn how to create a personal business card using React. The project involves building a responsive and interactive web application that allows users to input their personal information and generate a customized business card.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up a React project and install necessary dependencies
• How to implement a ProfileCard component using the useForm hook from the react-hook-form library
• How to integrate the ProfileCard component into the main App component
• How to style the application using CSS to create an appealing and visually consistent design

🏆 Achievements

After completing this project, you will be able to:

• Use the useForm hook from the react-hook-form library to manage form state and validation
• Create reusable React components and integrate them into a larger application
• Style a React application using CSS to achieve a desired visual appearance
• Understand the importance of modular and maintainable code structure in React projects

Skills Graph

Set Up the Project

In this step, you will learn how to set up the project and install the necessary dependencies.

Open your code editor and navigate to the project directory.

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

Next, download the dependencies using the npm install command in the terminal, wait for the dependencies to finish downloading and then start the project using the npm start command.

Once the project starts successfully, click on the "Web 8080" to preview it in your browser.

Implement the ProfileCard Component

In this step, you will implement the ProfileCard component using the useForm hook from the react-hook-form library.

1. Open the ProfileCard.js file located in the src/components directory.

2. Import the necessary modules and components:

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

3. Implement the ProfileCard component:

   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 this implementation, we use the useForm hook from the react-hook-form library to manage the form state and validation. When the form is submitted, the onSubmit function is called, which sets the submitted state to true and stores the form data in the data state.

   The component then renders either the form or the business card, depending on the submitted state.

4. Test the application by filling out the form and submitting it. Verify that the business card is displayed correctly with the entered information.

The finished result is as follows:

Congratulations! You have completed the Personal Card Generator project. You have learned how to use the useForm hook from the react-hook-form library to manage form state and validation, and how to integrate the ProfileCard component into the App component. You have also learned how to style the application using CSS.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.