Crea una tarjeta de visita receptiva con React

Introducción

En este proyecto, aprenderás cómo crear una tarjeta de visita personal utilizando React. El proyecto implica construir una aplicación web receptiva e interactiva que permite a los usuarios ingresar su información personal y generar una tarjeta de visita personalizada.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar un proyecto de React e instalar las dependencias necesarias
• Cómo implementar un componente ProfileCard utilizando el hook useForm de la librería react-hook-form
• Cómo integrar el componente ProfileCard en el componente principal App
• Cómo dar estilo a la aplicación utilizando CSS para crear un diseño atractivo y visualmente coherente

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar el hook useForm de la librería react-hook-form para gestionar el estado y la validación de formularios
• Crear componentes reutilizables de React e integrarlos en una aplicación más grande
• Dar estilo a una aplicación de React utilizando CSS para lograr una apariencia visual deseada
• Comprender la importancia de una estructura de código modular y mantenible en proyectos de React

Configurar el proyecto

En este paso, aprenderás cómo configurar el proyecto e instalar las dependencias necesarias.

Abre tu editor de código y navega hasta el directorio del proyecto.

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

A continuación, descarga las dependencias utilizando el comando npm install en la terminal, espera a que finalice la descarga de las dependencias y luego inicia el proyecto utilizando el comando npm start.

Una vez que el proyecto se inicie correctamente, haz clic en "Web 8080" para verlo en tu navegador.

Implementar el componente ProfileCard

En este paso, implementarás el componente ProfileCard utilizando el hook useForm de la librería react-hook-form.

1. Abre el archivo ProfileCard.js ubicado en el directorio src/components.

2. Importa los módulos y componentes necesarios:

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

3. Implementa el componente 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>
     );
   };
   

   En esta implementación, utilizamos el hook useForm de la librería react-hook-form para gestionar el estado y la validación del formulario. Cuando se envía el formulario, se llama a la función onSubmit, que establece el estado submitted en true y almacena los datos del formulario en el estado data.

   El componente luego renderiza ya sea el formulario o la tarjeta de visita, dependiendo del estado submitted.

4. Prueba la aplicación rellenando el formulario y enviándolo. Verifica que la tarjeta de visita se muestre correctamente con la información ingresada.

El resultado final es el siguiente:

¡Felicidades! Has completado el proyecto Generador de Tarjetas Personales. Has aprendido cómo utilizar el hook useForm de la librería react-hook-form para gestionar el estado y la validación de formularios, y cómo integrar el componente ProfileCard en el componente App. También has aprendido cómo dar estilo a la aplicación utilizando CSS.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.