Aula 22 – Golang – Fiber – React – Register
Aula 22 – Golang – Fiber – React – Register
Voltar para página principal do site
Todas as aulas desse curso
Aula 21 Aula 23
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 22 – Golang – Fiber – React – Register
Tutorial de Fiber – Parte 2: Frontend – React – Register
Voltar para página principal do site
Todas as aulas desse curso
Aula 20 Aula 22
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 22 – Golang – Fiber – React – Register
Tutorial de Fiber – Parte 2: Frontend – React – Register
Vamos deixar logo rodando os dois projetos, o backend (Golang/Fiber) e o frontend(Typescript/React).
Para rodar o backend, entre na pasta fiber-project e execute: air
Lembrando que o Air é um Live reload para apps Go.
Para rodar o frontend, entre na pasta react-auth e execute: npm start
Lembrando que eu tô usando o banco mysql rodando localmente, portanto se você tiver também rodando localmente, certifique-se que o mysql está em execução no seu sistema.
Se tiver rodando o mysql online, em algum serviço de cloud, certifique-se que o banco esteja rodando e acessível.
Pronto! Podemos começar a codar.
Vamos criar para cada input, algumas variáveis para gerenciar o estado de cada um deles.
Nessa primeira versão, vamos só testar a função submit com um console.log(), e visualizar no console do navegador se funcionou.
O SyntheticEvent é um tipo especial de evento definido pelo React.
Ele encapsula os eventos nativos do navegador, fornecendo uma API consistente entre diferentes navegadores.
Isso significa que, independentemente do navegador em que seu código está sendo executado, o SyntheticEvent se comportará da mesma maneira.
O método preventDefault() é usado para impedir a ação padrão que pertence a um determinado evento.
No contexto desse código, o e.preventDefault() está sendo chamado dentro da função submit que é acionada quando um formulário é submetido.
O comportamento padrão de um evento de submissão de formulário em um navegador é enviar os dados do formulário para o servidor e recarregar a página.
Ao chamar e.preventDefault(), você está instruindo o navegador a não executar esse comportamento padrão de recarregamento/submissão.
Isso é crucial em aplicativos de página única (Single Page Applications – SPAs) desenvolvidos com React, onde o recarregamento da página iria contra o objetivo de ter uma experiência de usuário fluida sem recarregamentos.
E o uso de e.preventDefault() em manipuladores de eventos de formulário permite que você controle totalmente o processo de submissão, possibilitando que os dados sejam enviados de maneira assíncrona e que você manipule a resposta do servidor diretamente no cliente, sem a necessidade de recarregar a página.
src/pages/Register.tsx
import React, {useState, SyntheticEvent} from 'react';
const Register: React.FC = () => {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const submit = (e: SyntheticEvent) => {
e.preventDefault();
console.log(firstName);
}
return (
<form className='form-floating' onSubmit={submit}>
<h1 className="h3 mb-3 fw-normal">Please register</h1>
<div className="form-signin">
<input className="form-control" placeholder="First Name" required
onChange={e => setFirstName(e.target.value)}
/>
</div>
<div className="form-signin">
<input className="form-control" placeholder="Last Name" required
onChange={e => setLastName(e.target.value)}
/>
</div>
<div className="form-signin">
<input type="email" className="form-control" placeholder="name@example.com" required
onChange={e => setEmail(e.target.value)}
/>
</div>
<div className="form-signin">
<input type="password" className="form-control" placeholder="Password" required
onChange={e => setPassword(e.target.value)}
/>
</div>
<div className="form-signin">
<input type="password" className="form-control" placeholder="Password Confirm" required
onChange={e => setConfirmPassword(e.target.value)}
/>
</div>
<button className="form-signin btn btn-primary w-100 py-2" type="submit">Register</button>
<p className="mt-5 mb-3 text-body-secondary">© 2017–2024</p>
</form>
);
}
export default Register;
Na hora que você submeter o form, você deverá ver impresso o firstName no console do navegador.
Agora vamos salvar esse usuário, mas antes vamos instalar o axios, porque vamos usar ele para fazer isso.
Derrube o servidor com ctrl + c e digite s para confirmar.
Agora rode: npm i axios
O axios é um pacote para enviar de forma fácil requisições http.
src/pages/Register.tsx
import React, {useState, SyntheticEvent} from 'react';
import axios from 'axios';
const Register: React.FC = () => {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const submit = async (e: SyntheticEvent) => {
e.preventDefault();
const response = await axios.post('http://localhost:3000/api/register',{
first_name: firstName,
last_name: lastName,
email: email,
password: password,
confirm_password: confirmPassword,
});
console.log(response);
}
return (
<form className='form-floating' onSubmit={submit}>
<h1 className="h3 mb-3 fw-normal">Please register</h1>
<div className="form-signin">
<input className="form-control" placeholder="First Name" required
onChange={e => setFirstName(e.target.value)}
/>
</div>
<div className="form-signin">
<input className="form-control" placeholder="Last Name" required
onChange={e => setLastName(e.target.value)}
/>
</div>
<div className="form-signin">
<input type="email" className="form-control" placeholder="name@example.com" required
onChange={e => setEmail(e.target.value)}
/>
</div>
<div className="form-signin">
<input type="password" className="form-control" placeholder="Password" required
onChange={e => setPassword(e.target.value)}
/>
</div>
<div className="form-signin">
<input type="password" className="form-control" placeholder="Password Confirm" required
onChange={e => setConfirmPassword(e.target.value)}
/>
</div>
<button className="form-signin btn btn-primary w-100 py-2" type="submit">Register</button>
<p className="mt-5 mb-3 text-body-secondary">© 2017–2024</p>
</form>
);
}
export default Register;Com isso, encerramos essa aula.
Na próxima aula, seguimos na construção do frontend, e vamos fazer a parte de login e redirecting depois do login.
Código da aula: Github
Voltar para página principal do blog
Todas as aulas desse curso
Aula 21 Aula 23
Redes Sociais:
