CRIE FORMULÁRIOS PROFISSIONAIS NO REACT - React Hook Form + Zod + Consumo de API

[@devjunioralves]

Quer se tornar um dev melhor? Leia esses livros: Código Limpo (Clean Code) amzn.to/3hHXVKY Como ser um programador melhor amzn.to/3POQ5fq 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

[@devjunioralves]

Pessoal, no .transform do schema (zod), no zipCode, é interessante remover a máscara. Eu esqueci de mostrar no vídeo, posso trazer um vídeo depois mostrando de forma rápida isso.

[@gomessgbr]

Por favor, traga 🙏

[@paulinha-19]

Usei o .transform((zipCode) => zipCode.replace(/\D/g, '')) e funcionou

[@smile4560]

Cara, caí n oseu canal de paraquedas mas sem dúvida um dos melhores conteúdos de programação do KZbin BR. Parabéns, excelente mesmo! Ta me ajudando demais.

[@devjunioralves]

Que massa Luan, fico feliz demais em saber que os conteúdos estão te ajudando! Valeu demais 👊

[@eduardobrito4896]

Namoral man, o conteúdo que vc tráz aqui no canal, é algo muito foda! Merece muito mais inscritos e consequentemente, reconhecimento. Desejo muito sucesso pra ti e sou muito grato de verdade! Ajuda muito no nosso aprendizado. Valeu demais!

[@washingtonchagas3324]

Video sensacional, muito top de verdade, Parabens👏👏👏👏👏

[@nettion]

Teus vídeos são muito bons, cara. Sou dev backend e faço muito trabalho devops há anos e agora to finalmente aprendendo FE e teu conteúdo ajuda muito. Abraço

[@juninfortunato]

Rapaz que conteúdo incrível, difícil achar algo parecido. Parabéns, seus vídeos tem ajudado muito.

[@devjunioralves]

Que massa saber que os vídeos tem te ajudado man, valeu demais pelo feedback!

[@lucasreact3113]

Cara, muito obrigado! Sua didática é excelente, aprendi muito com seus vídeos sobre formulário!!!

[@devjunioralves]

Que massa Lucas, fico muito feliz em estar te ajudando man!

[@_BruNNo]

Seu trabalho é muito bom ! Otima explicação, estou fazendo um formulario com alimentação de inputs pela api, e esse video me ajudou muito! Obrigado.

[@devjunioralves]

Que show Brunno!!! Fico muito feliz em saber que o vídeo te ajudou man, de verdade! Tmj 👊

[@nicolasmoises2720]

Monstro demais.. show de bola, irmão

[@devjunioralves]

Muito obrigado!!! Fico muito feliz que tenha curtido. 👊

[@estevanulian]

Cara muito foda seus vídeos, obrigado por compartilhar seus conhecimentos.

[@devjunioralves]

Que massa que tu curtiu! Tmj man 👊

[@JuiMDev]

Seus vídeos ajudam de mais!! excelente conteúdo, fica um feedback, se pudesse deixa em um repositório, poderia até dividir por branch para melhor organização, o código de cada vídeo seria muito da hora, não sei se estou pedindo muito. vlw abraço!

[@Alan4F50]

Man, parabéns pelo vídeo. Ótima didática e ótimo assunto

[@devjunioralves]

Valeu demais man!!!

[@half7752]

muito bommm junior, aprendi uma pá de coisa nova, muito obrigado pelos videos

[@devjunioralves]

Fala Rafa! Que massa saber disso man!

[@_felipeesilvaa]

não sei como é sua rotina e também da sua vontade mas se vc fizesse um curso eu compraria muito, um curso com essa didática e coisas atualizadas assim é sucesso na certa

[@devjunioralves]

Estão de fato me pedindo muito algo nesse sentido para ajudar. Eu vou trazer (boas) novidades sobre isso muito em breve o/

[@matheuscamba]

Brabo, parabéns mano , conteúdo bom demais 👌 Se puder fazer um vídeo de styled components ia ser manero

[@devjunioralves]

Com certeza man, vou trazer sim, a galera ta pedindo muito e curto demais utilizar o styled components em meus projetos. Valeu mano!!!

[@gustavobonfim7521]

Conteúdo foda demais 🔥

[@devjunioralves]

Valeu Gustavo!!!

[@626teteu]

To fazendo form de cadastro em um projeto de processo seletivo e logo lembrei que tu tinha feito um vídeo disso kkkkkkk vou aprender a fazer um form brabo agr 😎

[@devjunioralves]

Que massa Matheus hehe! Qualquer dúvida, deixa aqui 👊

[@DanielPerez-cu2wo]

Meu Deus..que preciosidade...Deus te abençoe irmão! O react hook form serve apenas para formulário ou se eu quiser criar algo que alem do usuario preencher, ele puder visualizar os dados digitados nos proprios inputs ou em uma tabela separada..Se puder traz video de Cruds..Abraços!

[@xOnlyyx]

Muito bom o vídeo deu pra aprender bastante sobre o uso do zod com rhf. Queria dar algumas sugestões de vídeos para seguir com essa série de formulários como formatações de números com react (inputs com mask BRL), inputs de data customizáveis (datepicker) e vídeos ensinando a fazer custominput para esse formulários 😉.

[@devjunioralves]

Opa, excelentes ideias man, valeu demais!

[@ramiromares4281]

Muito show cara! Obrigado pelo conteúdo de qualidade :D

[@devjunioralves]

Que massa Ramiro! Valeu demais

[@ramiromares4281]

@@devjunioralves eu que agradeço, você não imagina o tanto que tem me ajudado a progredir com next e ReactJS.

[@devjunioralves]

@@ramiromares4281 Que massa Ramiro, valeu demais

[@emanoelinfinity]

Muito bom! Eu estou utilizando muito o refine pra validação dentro do zod, acho que deveria mostrar mais dele!

[@devjunioralves]

Massa Emanoel, vou trazer mais conteúdo sobre ele sim, valeu pela dica!!!

[@elvisear]

Parabéns pelo conteúdo. Cai de paraquedas no seu vídeo e gostei muito. Tem algum vídeo onde vc ensina a fazer essa barra lateral que está no seu projeto? Outra coisa, tem como vc nos ensinar como ficaria uma intgração desse formulário com um banco de dados?

[@edu_amr]

Video que vai me salvar com certeza

[@devjunioralves]

A gente, mais cedo ou mais tarde, precisa lidar com forms e tem uns que são desafiadores né kkk Show Eduardo, que bom saber que o conteúdo vai te ajudar.

[@andlukas]

top!

[@ronaldoborges2263]

Poxa... Bem na hora que eu estou fazendo o almoço 😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢 Mas colo Jajá! Certeza que será uma baita aula... 😊

[@devjunioralves]

Tranquilo Ronaldo, bom almoço aí hehe Valeu demais!

[@junior777100]

Fala brow! Que aula sensacional... Brow rola de fazer com MUI alguma coisa pra iniciante?

[@vbruno]

Bom Dia, Junior Estou curtindo muito os seus vídeos. São bem pontuais nas duvida. Estava assistindo seu vídeo, fiquei com duvida da onde saiu o "zipCodeMask", já voltei vídeo pensei tinha perdido alguma parte porém não encontrei nada sobre mascara do cep. se tiver algum vídeo seu sobre a parte de mascaras e puder me responde fico muito agradecido. Desde já queria parabenizar pelo seu material muito bom e fácil de entender.

[@devjunioralves]

Bom dia Bruno. Que show saber que esta curtindo os vídeos! Ainda não, mas quero fazer um vídeo explicando sobre regex, creio que vai ajudar muito.

[@ranielisilveira226]

Os menus laterais e o cabeçalho de onde veio essa estrutura?

[@alveselivelton]

Queria muito esse vídeo de Styled Components

[@devjunioralves]

Boa Elivelton, vou trazer vídeos sobre styled components.

[@brunoshizukuda9486]

Tem como fazer uma api em react onde o usuário coloca a duvida e o email dele, e essa duvida tem que chegar no meu email?

[@camillotargas3133]

Parabéns pelos seus vídeos!!!! Mas ainda não entendi como colocar as máscaras... este zipCodeMask vem de onde, como implementar isso??

[@devjunioralves]

Muito obrigado Camillo! Tem um outro vídeo onde explico como eu crio minhas máscaras e ainda te ensino a base de Regex, o vídeo tá na playlist de formulários aqui no canal.

[@anekeallen]

@@devjunioralves qual vídeo você explica onde cria suas mascaras, não achei.

[@paulinha-19]

Como fazer para remover as mensagens de erro assim que a API retornar os valores para os campos? No vídeo foi removido após clicar fora do campo. Tem alguma forma de ser removido assim que os campos forem preenchidos?

[@lucascoliveira3957]

Como vc fez esse zipCodeMask() ? Poderia compartilhar? Preciso fazer uma mask pro zipCode e pro document(CPF)

[@devjunioralves]

Boas Lucas, vou fazer um vídeo explicando isso, pois é dúvida de muita gente.

[@gabrielneves7855]

Parabens irmão, conteúdo sensacional!! Mas me tira uma dúvida, qual a vantagem de fazer um monte de código sendo que poderia ser resolvido com useState? Estou tentando encaixar isso em um SaaS, e quando carregado a página preciso setar os dados do form com id passado via parms não consegui encaixar essa ideia sem useState.

[@devjunioralves]

Valeu Gabriel! O importante é entender seu cenário, se for um formulário simples, realmente um state pode resolver, mas mesmo assim, são re-render desnecessários. Nesse caso, o ideal seria uma ref para cada input. Para setar os valores, existem várias estratégias, da uma olhada na playlist de formulários aqui do canal, vai te ajudar demais.

[@gabrielneves7855]

@@devjunioralves e se eu tivesse um unico state de objeto, onde o input quando alterado realizaria um setDados apenas no dado dentro do objeto, ainda assim teria o mesmo problema?

[@caiomartins7807]

Conteudo sensacional! Uma dúvida: Se eu quisesse aplicar alguma validação com base no valor de outro campo (exemplo: Se estado === "SP" o complemento deve ser obrigatório) eu usaria o transform?

[@devjunioralves]

Não, utilizaria o refine ou dependendo do caso, o superRefine. Valeu demais Caio!

[@tavaresevaristo]

Tou tendo problemas com a máscara, preciso importar de algum lugar ? (zipCodeMask) O professor só colocou e já está funcionando de primeira, nn sei se lá encima foi importada ou o que aconteceu

[@devjunioralves]

Fala Evaristo! Tem um vídeo que fiz recentemente onde ensino como crio essas máscaras, da uma olhada lá, vai te ajudar!

[@rondycouto1983]

Junior, vc já aplicou máscara em campos criados dinamicamente usando o react-hook-form, por exemplo em um formulário que possibilita o usuário de ter vários telefones cadastrados?

[@devjunioralves]

Sim, tu pode utilizar o useFieldArray do RHF e utilizar as máscaras que mostro no vídeo, funciona perfeitamente!

[@_felipeesilvaa]

nesses campos que vc colocou o min = 1 só pro campo não ficar vazio não seria melhor usar o nonempty e adicionar a mensagem de erro?

[@devjunioralves]

Poderia sim Felipe, as duas formas, nesse caso, vão ter o mesmo efeito. Costumo utilizar mais o min pra ficar um padrão, quando outros precisam de um minimo de caracteres tipo cpf, cep etc.

[@jpsinieghi]

Onde defino a função ZipCodeMask?

[@devjunioralves]

Pode ser em uma pasta functions, utils ou até constants. Depende muito de como esta organizando seu projeto.

[@jpsinieghi]

@@devjunioralves vc tem este funcao? Não encontrei no vídeo.. obrigado

[@maicondlol]

Opa Junior beleza? começei a estudar Next js agora, vim do react sou área e estou tendo um problema usando o styled componets no nexti js, pelo que pesquisei tem a ver com a renderização ssr, o erro é esse " Prop `className` did not match. Server: "sc-hKgILt dugyKZ" Client: "sc-gsTCUz cZIGcY" tens algum vídeo ou pode fazer algum vídeo ensinando a configurar o next js para usar a lib styled components? Abraço!

[@devjunioralves]

Fala Maicon, blz e você? Exatamente, o problema aí é a renderização do lado do server. Tenho alguns vídeos explicando como configuro meus projetos, mas nao específico sobre styled components. Recomendo você dar uma olhada no meu Github, tem um repositório next-template, nele, tenho configurado o styled components com Nextjs além de outras ferramentas que podem te ajudar.

[@maicondlol]

@@devjunioralves valeu meu rei vou acessar lá! um abraço!

[@devjunioralves]

@@maicondlol Fechado Maicon 👊

[@_felipeesilvaa]

tem o repo p clone desse mini projeto ai ou é pessoal?

[@devjunioralves]

Esse projeto não, mas to organizando um repo pra colocar os projetos do canal, logo devo conseguir liberar ele.

[@Will-qs4qz]

mano, por favor me fala, tu ta usando styled components nessa versão mais recente no Next? como tu conseguiu? A configuração? Tem que botar tudo como 'use cliente' tbm ne..Não me dou bem com tailwind e tentei usar Chakra hoje, mas ta dando um erro estranho no emotion, mesmo seguindo a documentação.

[@devjunioralves]

Exatamente, tem que colocar o 'use client', infelizmente ainda não tem uma solução oficial pra usar o styled components com os server components do React.

[@Will-qs4qz]

@@devjunioralves mesmo tentando colocar styled components eu fico tendo o mesmo erro, só roda com tailwind.. error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ()

[@devjunioralves]

@@Will-qs4qz Mas tu ta usando a pasta pages ou app? Dependendo do projeto, se for só estudos, usa a app pra testar as novas features, mas se for algo que vai pra produção, usa a pages por enquanto.

[@Will-qs4qz]

@@devjunioralves meu ultimo projeto foi na pages, mas eu estava tentando fazer na app, já é a 3x que tento e travo.. tu ta na rockseat? queria tirar uma ideia contigo, seria bom.

[@devjunioralves]

@@Will-qs4qz Temos um discord do canal (link na descrição do vídeo), se tu quiser entrar lá, aí tu pode explicar melhor o problema.