No video

MELHORE SEUS FORMULÁRIOS COM ESSAS DICAS AVANÇADAS - React Hook Form

  Рет қаралды 9,886

Dev Junior Alves

Dev Junior Alves

Жыл бұрын

INFORMAÇÕES IMPORTANTES 👇
Top 10 melhores vídeos do canal:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Como ser um programador melhor
amzn.to/3POQ5fq
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑‍💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho 26 anos e moro em Goiás. Eu compartilho todo tipo de conteúdo relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #forms #hooks

Пікірлер: 66
@devjunioralves
@devjunioralves Жыл бұрын
Seja melhor como dev: Como ser um programador melhor amzn.to/3POQ5fq Código Limpo amzn.to/3hHXVKY Arquitetura Limpa amzn.to/3Viqw7v Estruturas de dados e algoritmos com JavaScript amzn.to/3hM0L1u Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos amzn.to/3BWsaEO 14 hábitos de desenvolvedores altamente produtivos amzn.to/3uZqsyy Hábitos Atômicos amzn.to/3FGllIM Aprendendo a Aprender amzn.to/3WxM0hG Rápido e devagar amzn.to/3PLrYhq A vida dos Estoicos amzn.to/3vaQIGl Meditações de Marco Aurélio amzn.to/3joFYS1
@morganaribeiro8162
@morganaribeiro8162 Жыл бұрын
Que aula top Junior! Continua trazendo conteúdos sobre formulários mais complexos, seria bem legal.
@devjunioralves
@devjunioralves Жыл бұрын
Obrigado Morgana! Com certeza, tem muito conteúdo sobre forms e quero trazer mais.
@matheus3153
@matheus3153 Жыл бұрын
Top Junior, poderia trazer uma parte 2 simulando um formulário com muitos inputs, como poderia ser feito em um componente de input reutilizável utilizando essas funções do react hook forms para ser mais performático?
@devjunioralves
@devjunioralves Жыл бұрын
Opa, ótima ideia Matheus!
@mauriciomira2
@mauriciomira2 Жыл бұрын
tb estou querendo saber kkkkk faça aí @devjunioralves
@teteus1620
@teteus1620 10 ай бұрын
Salve dev Junior Alves. Cara, que vídeo incrível! Sou iniciante nessa lib e estou aprendendo muito dela, e c j ajudou bastante com esse vídeo. Mas como sou iniciante, algumas partes do vídeo ficaram um pouco confusas pra mim de início, mas entendi logo após. Devido a isso, te recomendo que seus vídeos com conteúdos avançados como este sejam com uma linguagem mais simples para o pessoal mais iniciante entender melhor. Futuro grande esse canal!! tmj
@leolima431
@leolima431 9 ай бұрын
vc esta de parabens, e como vc disse continue fazendo videos sobre testes. a gente tem muita dificuldade em encontrar conteudos bons sobre isso.
@kinerikin
@kinerikin Жыл бұрын
Muito top! Tutorialzão de React Form! Muito bom, muita informação num vídeo só bem condensada! Obrigado 👍🏽
@devjunioralves
@devjunioralves Жыл бұрын
Opa, valeu demais Erik!!!
@denneraladim6190
@denneraladim6190 6 ай бұрын
Traz mais de formulário no react
@devjunioralves
@devjunioralves 5 ай бұрын
Haha boa! Quero fazer sim.
@lucasreact3113
@lucasreact3113 Жыл бұрын
Cara, muito obrigado! Suas aulas estão ajudando muito
@devjunioralves
@devjunioralves Жыл бұрын
Fico muito feliz em saber disso Lucas!
@Sr.zangao
@Sr.zangao 11 күн бұрын
Mano qual seu theme no vs code, achei ele lindo, ah, e bom vídeos.
@jhonathansilva8843
@jhonathansilva8843 6 ай бұрын
melhor conteúdo de react-br
@guivieiradm.
@guivieiradm. Жыл бұрын
Conteúdo e didática ótima!
@junior777100
@junior777100 9 ай бұрын
Sensacional essas dicas brow!
@babyibash8602
@babyibash8602 Жыл бұрын
Fiquei umas 5horas tentando resolve um problema de redirecionamento no app, vim ver o vídeo e lembro do que o useform retorna, me salvo, no mais parabéns ai pelo conteúdo, segunda vez que teus vídeos me salva pasdkapskpdsaods
@devjunioralves
@devjunioralves Жыл бұрын
Haha fico feliz em saber que o conteúdo ta te ajudando!!!
@erlonandrade-qq7tt
@erlonandrade-qq7tt 2 ай бұрын
Olá Junior, como ficaria o hook-form em um formulário multi-step, onde cada spet é um componente
@1825caio
@1825caio 9 күн бұрын
Qual extensão você usa, que está mostrando em vermelho que exibe para suporte?
@vidaprogramada1235
@vidaprogramada1235 Жыл бұрын
cara que conteúdo foda! mais iai quando vai rolar um live codando ?
@devjunioralves
@devjunioralves Жыл бұрын
Valeuuu demais!!! Tenho algumas viagens por agora, mas em breve vamos marcar sim!
@vitoraraujo2563
@vitoraraujo2563 Жыл бұрын
vídeo mt bom :)
@devjunioralves
@devjunioralves Жыл бұрын
Valeu Vitor!!!
@PedroPeripecias
@PedroPeripecias Жыл бұрын
Cara, sou eu de novo KKKKKKKKKKKKK, eu ri aqui, porque to maratonando seus vídeos de tão bons que são. Sou e gosto muito do front-end, um back-end quando necessário ou um pouco de cada, mas front é front e vou te falar, é cada ensinamento que tu passa, que eu fico de ponta de cabeça. Queria saber se você vai fazer um video sobre essas ou ate mais dicas, so que com a lib zod ? Ja utilizei ela, mas somente no back-end para validar o corpo da req.
@devjunioralves
@devjunioralves Жыл бұрын
Faaala mano! Cara, que massa que tu ta curtindo os vídeos! Sim, com certeza, curto muito a zod e vou trazer mais conteúdo sobre ela.
@jeffersoncarvalho2566
@jeffersoncarvalho2566 Жыл бұрын
Show demais, estou migrando do Formik pro React Hook Form. Poderia fazer um vídeo de como usar o useFormContext? Estou tentando implementar num projeto, em que alguns campos do formulário ficam fora e outros dentro de um modal
@devjunioralves
@devjunioralves Жыл бұрын
Excelente ideia! É uma feature muito útil.
@linikerdev
@linikerdev Жыл бұрын
Fala Junior, primeiro quero lhe parabenizar pelos vídeos, o conteúdo é muito bom, poderia dar aquela dica marota, e indicar qual extensão que vc usa que faz o debug de console na linha abraço !
@devjunioralves
@devjunioralves Жыл бұрын
Valeu demais!!! A extensão chama console ninja, tem um vídeo aqui no canal onde mostro minhas extensões, configs e temas, confere lá, tu vai curtir.
@cristianoalazaro
@cristianoalazaro 10 ай бұрын
valeu, me ajudou
@eduardorodrigues944
@eduardorodrigues944 Жыл бұрын
Boa noite Junior, muito top! Consegue me ajudar com input rádio preciso gravar um campo String sim S ou não N no banco mas estou com dificuldades, se tiver algum vídeo que possa me ajudar agradeço imensamente!
@devjunioralves
@devjunioralves Жыл бұрын
Valeu Eduardo! Tem várias formas para resolver seu problema, a mais simples é, ao submeter o form, você cria um objeto antes de enviar para API, e checa se o radio é true ou false, se for true => S, se for false = N. Se tu tiver usando o Zod, tu pode utilizar o .transform.
@eduardorodrigues944
@eduardorodrigues944 Жыл бұрын
@@devjunioralvesvou verificar Júnior Obrigado
@arthurkelvim5689
@arthurkelvim5689 Жыл бұрын
Mano, excelente video! Eu queria te propor algo para o crescimento do canal. Voce poderia uma dia organizar um dia, a criação de uma aplicação do absoluto ZERO, só que totalmente AO VIVO e a gente podendo tirar as nossas dúvidas que temos, obviamente de uma forma organizada e pensada. Poderia ser até paga, desde que não fosse um valor tão alto, mas que fosse completinha, como: SPA, landing-page com SEO em Next, Gerenciador de chamados, sabe? Aplicações reais. É somente uma proposta, obg pelos videos sempre muito bacana.
@devjunioralves
@devjunioralves Жыл бұрын
Sensacional sua sugestão Arthur! Posso organizar sim um live ou algo assim para gente ir trocando ideia. Preciso me organizar primeiro, tenho algumas viagens antes, mas vamos fazer sim!
@arthurkelvim5689
@arthurkelvim5689 Жыл бұрын
@@devjunioralves Perfeito Mestre, estarei no aguardo, pois seus conteúdos tem me ajudado bastante.
@devjunioralves
@devjunioralves Жыл бұрын
@@arthurkelvim5689 Po, fico muito feliz em saber disso Arthur, de verdade!
@emanoelinfinity
@emanoelinfinity Жыл бұрын
Quando eu comecei a fazer forms no React não utilizava o yup e pode ser que os jovens padawans também não usam. Então você acabou de mostrar como fazer kkkk. No mais tenta editar o vídeo pra ficar cada vez mais curto e direto! (minha opinião)
@devjunioralves
@devjunioralves Жыл бұрын
Boa, excelente adição Emanoel! Nenhum vídeo do canal é editado, por questão de tempo mesmo. Muito obrigado pelo feedback!
@FakeLewis
@FakeLewis Жыл бұрын
Junior, vendo esse vídeo me veio uma dúvida que sempre tive. Quando a gente tem um projeto com typescript e um estado de um tipo específico que precisa de valores default, qual seria a melhor maneira de representar isso? Eu costumo criar um arquivo separado pra importar o valor default e ficar mais limpo. Isso é "errado" ou tem outra dorma de fazer sem ter que inserir manualmente na inicialização dele?
@devjunioralves
@devjunioralves Жыл бұрын
Não sei se entendi bem a pergunta, mas se o componente já estiver um pouco "grande", é uma boa criar um arquivo a parte para criar o default value. Mas não tem um "regra" não.
@andredesouza
@andredesouza Жыл бұрын
Massa. tentei colocar um checkbox, mas não estou conseguindo pegar o erro quando não está selecionado. Estou usando zod. O que pode ser? Como poderia pegar a informação que o checkbox foi selecionado?
@devjunioralves
@devjunioralves Жыл бұрын
Como você criou ele no schema? Pois, se apenas colocou como boolean, false ou true (desmarcado ou marcado) ele não vai dar erro. Precisa usar o superRefine para verificar se ele é true, se não, lança um erro. Acho que pode ser isso.
@andredesouza
@andredesouza Жыл бұрын
@@devjunioralves foi isso. Coloquei como boolean., acabei fazendo de outra forma., mas vou pesquisar esse supeRefine que vc mencionou.
@andredesouza
@andredesouza Жыл бұрын
@@devjunioralves fiz assim: const schema = z.object({ name: z.string().min(3, { message: "Nome deve ter 3 ou mais caracteres" }), email: z.string().email({ message: "E-mail invalido" }), phone: z.string(), message: z.string().min(5, { message: 'Mensagem deve ter 3 ou mais caracteres' }), termIsAccepted: z.boolean({ required_error: 'Você precisa confirmar os termos' }) });
@devjunioralves
@devjunioralves Жыл бұрын
@@andredesouza Perfeito, qualquer duvida tu avisa aqui.
@half7752
@half7752 Жыл бұрын
junior, vc contribui em algum projeto open source?
@devjunioralves
@devjunioralves Жыл бұрын
Tem alguns issues abertas sim, mas queria contribuir mais!
@lucascoliveira3957
@lucascoliveira3957 Жыл бұрын
Cadê o link da explicação?
@Joao-sj2ub
@Joao-sj2ub Жыл бұрын
Pode me ajudar, minha validação sempre da erro, mesmo os dados estando correto (os dados chegam normalmente na validação)
@devjunioralves
@devjunioralves Жыл бұрын
Fala João, tu poderia mandar no nosso Discord, pra gente poder te ajudar melhor?
@Joao-sj2ub
@Joao-sj2ub Жыл бұрын
@@devjunioralves não te achei no discord, pode me mandar o link?
@devjunioralves
@devjunioralves Жыл бұрын
@@Joao-sj2ub O link esta na descrição dos vídeos e shorts. discord.com/invite/bVxW4Dhgrf
@Joao-sj2ub
@Joao-sj2ub Жыл бұрын
@@devjunioralves vlw irmão, já consegui resolver, mas vou dar uma passada lá.
@junior1992a
@junior1992a Жыл бұрын
O código dessa aula podia estar no github né?
@devjunioralves
@devjunioralves Жыл бұрын
Sim, eu vou organizar um repo para os vídeos aqui do canal.
@higorkkkkk4661
@higorkkkkk4661 Жыл бұрын
Pq não o Zod?
@devjunioralves
@devjunioralves Жыл бұрын
[Spoiler] Vai ter um vídeo só pra ele hehe
@higorkkkkk4661
@higorkkkkk4661 Жыл бұрын
@@devjunioralves Amém, acho ele bem mais amigavel com o Typescript, talvez seja só impressão.
@devjunioralves
@devjunioralves Жыл бұрын
@@higorkkkkk4661 De fato é mesmo. O Yup é muito utilizado, porém, o Zod é, sem dúvidas, muito mais indicado hoje em dia!
@higorkkkkk4661
@higorkkkkk4661 Жыл бұрын
@@devjunioralves Aproveitando o Natal, aqui está a minha carta para o Papai Noel, sugestões que cairia bem no canal, como: NextAuth(Social Auth), NextAuth(Credentials) e redux-toolkit OU Zustand(Aproveita pq eu só vi na gringa)! :)
@devjunioralves
@devjunioralves Жыл бұрын
@@higorkkkkk4661 Opa, massa!!! To preparando um conteúdo sobre Zustand hehe
FORMULÁRIOS COM REACTJS - A nova forma de criar validações #forms
24:40
艾莎撒娇得到王子的原谅#艾莎
00:24
在逃的公主
Рет қаралды 39 МЛН
WHO CAN RUN FASTER?
00:23
Zhong
Рет қаралды 25 МЛН
👨‍🔧📐
00:43
Kan Andrey
Рет қаралды 9 МЛН
Tutorial Completo de React Hook Form
1:04:49
Fazt Code
Рет қаралды 39 М.
Learn Zod In 30 Minutes
31:03
Web Dev Simplified
Рет қаралды 141 М.
React Hook Form Course for Beginners (inc. Zod + Material UI)
3:03:20
freeCodeCamp.org
Рет қаралды 38 М.
React Hook Form (+ Zod) - Complete Tutorial
31:21
ByteGrad
Рет қаралды 91 М.
Componente INPUT do ZERO ao AVANÇADO | React | Nextjs 13 | +Dicas
32:47
React Hook Form - Complete Tutorial (with Zod)
28:22
Cosden Solutions
Рет қаралды 102 М.
Context API vs Zustand - Guia de State Management no ReactJS
30:36
Dev Junior Alves
Рет қаралды 12 М.
Como TESTAR formulários com React Hook Form e TDD - React.js
43:35
Dev Junior Alves
Рет қаралды 2,7 М.
艾莎撒娇得到王子的原谅#艾莎
00:24
在逃的公主
Рет қаралды 39 МЛН