Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Curso avançado de React: #06 - Submit do formulário com react hook form - Estado de isSubmitting
Play lesson

Curso base de React - Curso Completo de React – Do Zero à Prática com TypeScript - Curso avançado de React: #06 - Submit do formulário com react hook form - Estado de isSubmitting

5.0 (1)
21 learners

What you'll learn

This course includes

  • 11.3 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nesta aula do curso Avançado de React, a gente dá um passo importante para transformar nosso formulário em algo realmente funcional: a funcionalidade de salvar os dados no backend. Depois de configurar o React Hook Form nas aulas anteriores, agora chegou a hora de integrar de fato o formulário com a nossa API e fazer o envio dos dados de forma tipada, segura e com feedback visual para o usuário. Tudo isso mantendo uma estrutura limpa e bem organizada com TypeScript. Além de conectar o formulário com a API, também ajustamos a interface visual do formulário, aplicando estilos com foco na experiência do usuário. Mesmo que o foco do curso não seja estilização, deixamos o formulário apresentável com ajuda do ChatGPT, organizando os campos, adicionando help texts e garantindo acessibilidade com boas práticas no HTML. Esse cuidado ajuda a manter o projeto próximo do que seria usado em produção, sem perder o foco principal da aula que é a lógica e o comportamento. Por fim, exploramos recursos poderosos do React Hook Form, como o isSubmitting, para garantir que o usuário tenha uma boa experiência ao salvar os dados, desabilitando inputs automaticamente durante o envio e evitando múltiplos envios acidentais. Também vimos boas práticas para lidar com tipagens de formulários, como reaproveitar interfaces já existentes na aplicação. A ideia é mostrar que, com uma estrutura bem feita, tu consegue manter o código limpo, seguro e fácil de evoluir. Então dá o play, acompanha com atenção e comenta aqui embaixo o que tu tá achando — tua opinião é essencial pra seguir ajustando o curso para o que tu realmente precisa aprender. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/0ee84b8110f21b0fd51ecc2dbf6416b83ff3c3e4 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Apresentação da aula 0:30 | Avisos importantes 0:50 | Revisando as alterações de CSS 5:36 | Tratando o submit do formulário 10:50 | Chamando a API para criação do registro 15:00 | Configurando o delay de respostas no mock 19:20 | Finalização e agradecimentos CODARSE - [Membros apenas] Formulários avançados #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere