Aula 19 - Golang - Fiber - React - Frontend

Tutorial - Parte 2: Frontend

Nesta parte do tutorial, vamos criar a parte frontend da nossa aplicação de registro e login de usuário desenvolvido com fiber e MySQL. Usaremos o React para criar a interface do usuário e estabeleceremos a comunicação com o backend que configuramos usando o Fiber nas aulas anteriores do tutorial.

Pré-requisitos

Certifique-se de que você já tenha configurado o servidor backend com o Fiber, como explicado na Parte 1 deste tutorial. Veja se o MySQL tá rodando e disponível.

Configuração do Ambiente

Certifique-se de que você tenha o Node.js e o npm (gerenciador de pacotes do Node.js) instalados em seu sistema. Você pode verificar isso executando os seguintes comandos no terminal:

node -v

npm -v

Se você não tiver o Node.js instalado, você pode baixá-lo em nodejs.org.

Depois de Atender esses Requisitos

Vamos criar um app chamado react-auth que será nosso frontend, e vamos usar typescript. npx create-react-app react-auth --template typescript Entre na pasta criada. cd react-auth E inicie o app. npm start Vamos acessar o getbootstrap para pegar um template para a página. Procure por sign-in. Depois de encontrar, acesse ele, dê um view page source clicando com o botão direito do mouse e copie o form. Vai ser algo como:


<form>
  <img class="mb-4" src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
  <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

  <div class="form-floating">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" required>
    <label for="floatingInput">Email address</label>
  </div>
  <div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password" required>
    <label for="floatingPassword">Password</label>
  </div>

  <div class="form-check text-start my-3">
    <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
      Remember me
    </label>
  </div>
  <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
  <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–2023</p>
</form>

Apague o que tiver no return do src/App.tsx e cole nele o conteúdo acima e faça as correções abaixo. Temos que ajeitar algumas coisas, vamos remover a imagem, remover os labels, substituir class por className, tirar o Remember me, fechar os inputs... Vai ficar mais ou menos assim o conteúdo dentro do return:

react-auth/src/App.tsx


<form className='form-floating'>
    <h1 className="h3 mb-3 fw-normal">Please sign in</h1>
    <div className="form-signin">
        <input type="email" className="form-control" placeholder="name@example.com" required />
    </div>
    <div className="form-signin">
        <input type="password" className="form-control" placeholder="Password" required />
    </div>
    <button className="form-signin btn btn-primary w-100 py-2" type="submit">Sign in</button>
    <p className="mt-5 mb-3 text-body-secondary">&copy; 2017–2023</p>
</form>

Acesse o cdn do bootstrap para pegar as tags.

https://www.bootstrapcdn.com/ Cole no head do react-auth/public/index.html logo acima do title.

react-auth/public/index.html


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Css do Form


html,
body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

/* Estilo para o formulário */
.form-floating {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
  text-align: center;
}

.form-signin {
  margin-bottom: 15px;
}

/* Estilo para o botão */
.form-signin button {
  font-size: 18px;
}

/* Estilo para o rodapé */
.text-body-secondary {
  text-align: center;
}

/* Estilos responsivos para telas menores */
@media (max-width: 768px) {
  .form-floating {
    max-width: 100%;
  }
}

E no src/App.css, remova tudo, e cole o css do form ☝️. No react-auth/src/index.css apague tudo e coloque:


.App, #root {
  width: 100%;
  height: 100%;
}

Aula 19 - Golang - Fiber - React - Frontend