Создание отзывчивой визитной карточки с использованием React

Введение

В этом проекте вы научитесь создавать личную визитную карточку с использованием React. Проект включает в себя создание отзывчивого и интерактивного веб-приложения, которое позволяет пользователям вводить свою личную информацию и генерировать персонализированную визитную карточку.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Настраивать проект на React и устанавливать необходимые зависимости
• Реализовывать компонент ProfileCard с использованием хука useForm из библиотеки react-hook-form
• Интегрировать компонент ProfileCard в основной компонент App
• Стилизовать приложение с помощью CSS для создания привлекательного и визуально согласованного дизайна

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать хук useForm из библиотеки react-hook-form для управления состоянием формы и валидации
• Создавать повторно используемые компоненты React и интегрировать их в более крупное приложение
• Стилизовать приложение на React с помощью CSS для достижения желаемого визуального вида
• Понять важность модульной и поддерживаемой структуры кода в проектах на React

Настройка проекта

На этом этапе вы научитесь настраивать проект и устанавливать необходимые зависимости.

Откройте свой редактор кода и перейдите в директорию проекта.

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

Затем загрузите зависимости с помощью команды npm install в терминале. Подождите, пока загрузка зависимостей завершится, а затем запустите проект с помощью команды npm start.

После успешного запуска проекта нажмите на "Web 8080", чтобы предварительно просмотреть его в браузере.

Реализация компонента ProfileCard

На этом этапе вы реализуете компонент ProfileCard с использованием хука useForm из библиотеки react-hook-form.

1. Откройте файл ProfileCard.js, расположенный в директории src/components.

2. Импортируйте необходимые модули и компоненты:

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

3. Реализуйте компонент 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>
     );
   };
   

   В этой реализации мы используем хук useForm из библиотеки react-hook-form для управления состоянием формы и валидации. Когда форма отправляется, вызывается функция onSubmit, которая устанавливает состояние submitted в true и сохраняет данные формы в состоянии data.

   Затем компонент отображает либо форму, либо визитную карточку, в зависимости от состояния submitted.

4. Протестируйте приложение, заполнив форму и отправив ее. Убедитесь, что визитная карточка отображается корректно с введенной информацией.

Готовый результат выглядит следующим образом:

Поздравляем! Вы завершили проект "Генератор личных визиток". Вы научились использовать хук useForm из библиотеки react-hook-form для управления состоянием формы и валидации, а также как интегрировать компонент ProfileCard в компонент App. Вы также научились стилизовать приложение с помощью CSS.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете попрактиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.