Solution Contact Form with React

Community feedback

• 

  Bernardo Poggioni•6,770

  @R3ygoski

  Posted 19 days ago

  Olá Evellyn, parabéns pela conclusão de mais um projeto aqui do FEM, ele está bem-feito.

  Sobre sua dúvida, tem diversas formas de fazer centralização, a melhor geralmente é utilizando flex ou grid, mostrarei dois exemplos aqui:

  A fim de Contexto, esse será o HTML:

  <main class="pai">
    <section class="filho"></section>
  </main>
  

  Exemplo com Flexbox:

  .pai {
    display: flex; /* Determina o elemento como Flex */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    
    width: 320px;
    height: 320px;
    background-color: #333;
  }
  
  .filho {
    width: 120px;
    height: 120px;
    background-color: #a9a9a9;
  }
  

  Exemplo com Grid:

  .pai {
    display: grid; /* Determina o elemento como Grid */
    place-items: center; /* Posiciona o filho ao centro */
    
    width: 320px;
    height: 320px;
    background-color: #333;
  }
  
  .filho {
    width: 120px;
    height: 120px;
    background-color: #a9a9a9;
  }
  

  Para verificar isso você pode utilizar o site CodePen.

  Eu particularmente utilizo o #root como o fundo da página, assim os elementos ficam centralizados no #root. Algo assim:

  #root {
    min-height: 100dvh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  E uma dica quanto ao seu projeto na parte de JS, ele não está fazendo validação de forma correta, isso está ocorrendo porque você não está utilizando o hook useState para armazenar o valor de texto e fazer a validação. E fica uma diga, você consegue validar todos os campos utilizando RegExp (Expressões Regulares).

  E sobre o HTML, ele está com muitas redundâncias e muito pouco semântico, como o React é um CSR (Client Side Render) a parte de SEO acaba sendo afetada, mas manter um HTML semântico ainda sim é importante para manutenibilidade, escalabilidade e acessibilidade do projeto.

  E é isso, caso tenha ficado qualquer dúvida por favor comente abaixo que tentarei ajudar da melhor forma possível.

  00