Aula 19 – Golang – Fiber – React – Frontend
19 – Golang – Fiber – React – Frontend
Voltar para página principal do site
Todas as aulas desse curso
Aula 18 Aula 20
Fiber
Pacote Programador Fullstack
Redes Sociais:
Link para a Digital Innovation
Quer aprender python3 de graça e com certificado? Acesse então:
workover
Meus link de afiliados:
Hostinger
Digital Ocean
One.com
Código da aula: Github
Melhore seu NETWORKING
Participe de comunidades de desenvolvedores:
Fiquem a vontade para me adicionar ao linkedin.
E também para me seguir no GITHUB.
Canais do Youtube
Toti
Lofi Music Zone Beats
Backing Track / Play-Along
Código Fluente
Putz!
Vocal Techniques and Exercises
PIX para doações
PIX Nubank
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">© 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">© 2017–2023</p>
</form>
Acesse o cdn do bootstrap para pegar as tags.
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%;
}Com isso, encerramos essa aula.
Na próxima aula, seguimos na construção do frontend.
Código da aula: Github
Voltar para página principal do blog
Todas as aulas desse curso
Aula 18 Aula 20
Redes Sociais:
