Criar Cartão de Visita Responsivo com React

Introdução

Neste projeto, você aprenderá como criar um cartão de visita pessoal usando React. O projeto envolve a construção de uma aplicação web responsiva e interativa que permite aos usuários inserir suas informações pessoais e gerar um cartão de visita personalizado.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar um projeto React e instalar as dependências necessárias
• Como implementar um componente ProfileCard usando o hook useForm da biblioteca react-hook-form
• Como integrar o componente ProfileCard no componente principal App
• Como estilizar a aplicação usando CSS para criar um design atraente e visualmente consistente

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar o hook useForm da biblioteca react-hook-form para gerenciar o estado do formulário e a validação
• Criar componentes React reutilizáveis e integrá-los em uma aplicação maior
• Estilizar uma aplicação React usando CSS para obter uma aparência visual desejada
• Compreender a importância da estrutura de código modular e de fácil manutenção em projetos React

Configurar o Projeto

Nesta etapa, você aprenderá como configurar o projeto e instalar as dependências necessárias.

Abra seu editor de código e navegue até o diretório do projeto.

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

Em seguida, baixe as dependências usando o comando npm install no terminal, aguarde a conclusão do download das dependências e, em seguida, inicie o projeto usando o comando npm start.

Após o projeto iniciar com sucesso, clique em "Web 8080" para visualizá-lo em seu navegador.

Implementar o Componente ProfileCard

Nesta etapa, você implementará o componente ProfileCard usando o hook useForm da biblioteca react-hook-form.

1. Abra o arquivo ProfileCard.js localizado no diretório src/components.

2. Importe os módulos e componentes necessários:

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

3. Implemente o 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>
     );
   };
   

   Nesta implementação, usamos o hook useForm da biblioteca react-hook-form para gerenciar o estado do formulário e a validação. Quando o formulário é enviado, a função onSubmit é chamada, que define o estado submitted como true e armazena os dados do formulário no estado data.

   O componente então renderiza o formulário ou o cartão de visita, dependendo do estado submitted.

4. Teste a aplicação preenchendo o formulário e enviando-o. Verifique se o cartão de visita é exibido corretamente com as informações inseridas.

O resultado final é o seguinte:

Parabéns! Você concluiu o projeto Personal Card Generator. Você aprendeu como usar o hook useForm da biblioteca react-hook-form para gerenciar o estado do formulário e a validação, e como integrar o componente ProfileCard no componente App. Você também aprendeu como estilizar a aplicação usando CSS.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.