Aula 22 - Golang - Fiber - React - Register
Tutorial de Fiber - Parte 2: Frontend - React - Register
Redes Sociais:
Quer aprender python3 de graça e com certificado? Acesse então:
Meus link de afiliados:
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
PIX para doações
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.
Código da aula: Github
Redes Sociais:
Novamente deixo meus link de afiliados:
É isso!
A gente se vê na próxima. ;)
Até lá!
\o/
Bons estudos. ;)
