Formulários no ReactJS & React Native com Unform | MasterClass #06
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- Criar formulários no React não é uma tarefa tão difícil assim, mas manter formulários complexos e performáticos em aplicações que podem escalar para o infinito e além é um trabalho árduo principalmente pela limitação que existe nas estratégias atuais.
Nesse vídeo vamos utilizar o Unform, uma biblioteca criada pela Rocketseat para facilitar a manipulação de formulários complexos com relacionamentos mantendo a performance independente do número de campos.
Unform: github.com/Roc...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
Que trabalho incrivel, continuem assim comecei agora com React e estava procurando justamente isso para ajudar no meu trabalho, vocês realmente me ajudaram a entender melhor não só hooks mas sim toda uma lib para formulários, sou muito grato a vocês, cotinuem assim
Wooow, Tiago!
Sério!? Que bacana isso! Valeu demais por esse feedback incrível! 💜 😍
E bora pra cima com a gente! 🚀
Sério, mudou totalmente a maneira de como se lida com form em react agora. Alta performance e alta produtividade. Vocês lançaram uma revolução, estão de parabéns!!!
Valeeu, Luis! 💜💜
45:10 "Ele demorou um 'pouquinho bastante' pra carregar..." kkkkkkkkkkkkkkk Parabéns mestre! Ótima master class! Sensacional!
kkkkkkkkk
Esbarrei em algumas limitações que me fizeram crer que a lib ainda tem muito que evoluir, mas mesmo assim.... parabéns pela iniciativa.
Faala, Douglas! Conta mais pra gente quais foram essas limitações, quem sabe não é algo que possamos implementar a mais por lá! 💜💜
Tem alguns problemas na bind inicial dos dados, e tive dificuldades para implementar select simples do HTML, além do exemplo de campos com máscara que não funciona legal. Eu acho q tbm deveriam melhorar a documentação explicando os princípios da lib na implementação de novos Fields já que a documentação não descreve todos os exemplos possíveis. A documentação na minha opinião não é muito clara pra ajudar a fazer algo que foge do universo dos exemplos.
A lib é ótima. Só senti falta de uma explanação melhor sobre como trabalhar com Select e Radio.
Sensacionaaaaal! Me identifiquei com o Diego ficando emocionando no momento que estava demonstrando o "address.street"... Delicinha demaaaais, deu vontade de chorar. Quando eu experimentei fiquei meio receosa pois estranhei bastante por estar "muito personalizavel" mas depois de assistir o video percebi que na verdade eh o ponto forte. Senti falta da facilidade de passar o schema para validacao mas resolvi isso criando um arquivo com uma funcao generica que captura os erros e joga para os inputs, reaproveitando codigo em todos os componentes sem a necessidade de repeticao. Nada a reclamar!!!
Meta de vida ser um monstro na programação em React igual o Diego, o cara é zika dms e explica muito bem.
É show essa biblioteca, mas quando o cliente chega e fala "mas não dá pra exibir essas mensagens de erro na hora que o cliente digita no campo em vez de esperar até que ele submeta o formulário?", aí não tem jeito, não dá pra fugir de componentes controlados. Tem que saber pesar as vantagens e desvantagens, re-renderização não é necessariamente um "problema de performance", mas com certeza é um "code smell" indicando que o programador precisa reavaliar o código e verificar se é realmente necessário controlar os dados do input (por exemplo, para fazer validação imediata) ou se pegá-los no submit seria suficiente. Uma coisa que ficou clara no vídeo é que a Unform lida muito bem com a "formatação" dos dados no submit (já organiza os campos num objeto pronto para envio) e com o repasse dos erros pros campos (esse pra mim é talvez o destaque da Unform, ainda mais junto com a Yup e, especialmente, em monorepo, com reutilização dos esquemas do/no backend).
Que ótima biblioteca! Uso uma biblioteca similar, feita na própria empresa, mas com jquery e o maior problema é a performance quando a estrutura começa a ficar com muitos níveis. Vou testar esta com certeza! Valeu pela contribuição!
Show de bola! A única coisa que achei ruim foi lidar com a validação "na mão". Uso o unform hoje em produção e era bacana passar o schema direto no componente do Form.
Quando eu testei a nova versão a primeiro momento também senti falta, mas depois de ter visto o vídeo fiquei com a sensação de que pode ser um ponto muito positivo por ser bem personalizável. Basicamente você só vai ter um trabalho de definir um padrão de tratamento de erro que atende sua aplicação e sair reutilizado.
Incrivel mudou minha forma de pensar sobre formulários, valeu mesmo!!!!
Que demais Anderson! 💜
Eu iria assistir só o comecinho, mas foi impossível.
Foi tão show, que não conseguir parar, e assitir tudo 😀👏🎉✌💻.
rapaz, eu uso material ui para todos meus inputs (n tenho saco p fz isso na unha rsrs)...integrei meus meus inputs com o unform e foi a melhor coisa q poderia ter acontecido em toda a minha vida...obrigado Dolph Lundgren...vcs sao sensacionais
import React, { useEffect, useRef } from 'react';
import { useField } from '@unform/core';
import TextField, { TextFieldProps } from '@material-ui/core/TextField';
interface Props {
name: string;
}
type InputProps = TextFieldProps & Props;
const InputText: React.FC = ({ name, ...rest }) => {
const inputRef = useRef(null);
const { fieldName, defaultValue, registerField, error } = useField(name);
useEffect(() => {
registerField({
name: fieldName,
path: 'value',
ref: inputRef.current?.childNodes[1].childNodes[0],
})
}, [fieldName, registerField]);
return (
);
};
export default InputText;
Gostei muito vou usar em meus projetos, Parabéns a todos envolvidos neste projeto, ficou muito bom.
É incrível como todas as suas aulas tem uma funcionalidade boa...
Não achei tão mágico assim. A docs falta muita coisa pra react native com TypeScript. Pretendem melhorar isso?
Cara q q isso meu amigo. A Rocketseat está em alto nível. Nem programamo em JS e já pirei na facilidade de uso
Mais um vídeo sensacional da Rocketseat! Like antes de ver como sempre, pq sei que o conteúdo é de qualidade. Sobre a lib, acompanhei quando saiu, e essa nova versão está sensacional!! Com certeza vou testar! Obrigado pelo vídeo Diego e toda Rocketseat!
Woow! Valeu demais Maicon!!! 💜🚀
Obrigado pela lib.
Poderiam explicar melhor como usar input[type="radio"] e select multiple ?
Estou com a mesma duvida
Que incrível... Parabéns a todo o time!! É de cair o queixo essas funcionalidades que com certeza iram salvar a minha e a vida de muito outros devs... Rocketseat sempre impressionando
gostei mesmo dessa lib, muito interessante, e realmente ajuda no desempenho da aplicação
Parabéns Rocketseat... Mais uma contribuição sensacional
Cada dia que passa aprendo mais com a Rocketseat
Que contribuição estupenda para a comunidade! Parabéns!
Uma preocupação: a referência, utilizada pelo react, não poderia deixar de existir em versões futuras ou mudar sua implementação?
Faala Daniel, valeu pelo feedback! 😍
Pode, mas aí o Unform atualiza junto.. a referência na verdade nunca vai deixar de existir =)
Rocketseat ótima notícia! Já utilizei libs que dependiam demais de estruturas como essa das refs e quando o framework mudou, deixaram de ser compatíveis.
Mas vendo a evolução desta versão 2.0 e o trabalho de vocês, vou utilizar em meus próximos projetos despreocupado.
Parabéns, novamente!
Tirou umas dúvidas boas do módulo 04 do bootcamp!!
Aí sim, Danilo! 💜 Vaaaleu! 💜
sensacional, ótimo trabalho feito no Unform, parabéns!!!!
manooooooooooooooo, que video sensacional, esse ref foi uma puta sacada genial, parabens, que massa, ja vou adotar o Yup até então nunca tinha utilizado. Que conteudo massa.
Vídeo maravilhoso... com osempre Rocketseat brilhando....
Fala, Marlon!! Valeeu pelo fedback! 💜
Show de bola, vou utilizar com certeza!
React hook form também é uma opção muito boa.
Parabéns de verdade, ótimo vídeo e ótima biblioteca.
Tudo que eu precisava no momento!!! Vlw
Muito bom, mas faltou o exemplo de como utilizar o SELECT e o outros tipos de campos, estou tentando adaptar em um projeto meu e não estou conseguindo somente com a documentação
pois é, tentei usar o select, porem nao aparecem as options do mesmo
Sensacional!
O principal "defeito" do ReactJS eram os forms, mas com essa lib "ficou delicinha" (TELÓ, Michel).
😂😂💜💜
Showwww. Já vou testar hoje mesmo!!
único canal que liguei o sino
😍😍💜
Seria bom se tivesse sido com o typescript, porque estou tendo uns probleminhas
Sensacional! Adorei a lib.
Valeeeu, Giovanni! 💜💜
Mano esse cara apavora, meu pai, muito bom mesmo!!
hahaha! Vaaleu Willian 💜
Opa, vamos lá!! Era o que eu queria
Aeee! Boraa 💜🚀
Eu gosto muito do react-hook-form
Sensacional!!!!! "Delicinha" ficou teu video Diego!
Realmente amei.
Facilitou muiiiiiitoooo
Sensacional simplesmente isso
Show demais a lib! Realmente ajuda bastante para montar os formulários!
Alguém já precisou usar um editor HTML no React como o CKEditor junto com o Unform? Como fazer para o unform integrar com outros tipos de campos além do ?
Brutal, vou usar.
Booa, isso aí! 💜
só queria saber qual é o tipo daquele ErrorMessages.
"Delicinha" huuuuuuuummmmmmmmmmmm senti cheirinho de teló
vc deixa de ser fresco hein hahahaha
Muito top essa masterclass. Tenho um dúvida em relação as estruturas mais complexas, no vídeo foi mostrado o relacionamento do usuário com o endereço, porém como objeto direto, como seria com array de objetos? Tenho a seguinte situação por exemplo: Um formulário de Venda (Data, Cliente, Items, Subtotal, Desconto e Total), onde o campo Items dentro do formulário de vendas seria um select de produtos e os inputs quantidade, preço e desconto do item. Como eu faço pra ir adicionando esses items no array items que tem na venda? Tentei utilizando o Scope e colocando items[0] com o índice dinamico, porém não obtive o resultado desejado, pois quando aumento o índice, as primeiras posições do array ficam vazias. Se puderem fazer um exemplo desse por favor.
Diego inform utilizando os inputs do native base funciona?
Tenho uma duvida uso uma api para enviar os dados como faria para nao apagar os dados caso de erro no envio ?
A onda agora é flutter😎😎😎
Metralhadora de informações. entrei em choque
Hahahahaha calma aee 💜
MEEEEEEEEEEEEEEEEEEEEEEEEEEEEEU.... muito top essa lib
Vocês são demais! :D
Diego, poderia gravar uns exemplos mais complexos com File e fazer a validação do mesmo. A parte de inicializar com dados vindo da API, na versão anterior, também existe esse setData()? De qualquer maneira, obrigado por compartilhar seu conhecimento.
Alguém já passou por isso aqui, quando vou percorrer o array de erros e atribuir o nome da propriedade passando [error.path] dá esse erro aqui > Type 'undefined' cannot be used as an index type.ts(2538). Alguém pode ajudar please
😕
Será que vocês poderiam fazer um vídeo só com o AsyncSelct com o unform ? Estava esperando um exemplo, mas no vídeo acabou não tendo tempo pra mostrar isso. Somente pela documentação não consegui fazer funcionar .
Se eu precisar forçar a validação após um render por exemplo, dá pra fazer usando o yup? No form validator component do react, por exemplo, nós temos o método 'forceValidation', que nos permite fazer isso.
Diego quando tiver disponibilidade poderia fazer um vídeo do unform com FieldArray ?
Muito boa biblioteca, parabéns pra o time velho ficar renderizando cada letrinha de um formulário é doentio pra a performance, conseguiram um resultado incrível com essa lib.
Uma única pergunta como dev sem muita experiência ainda, foi uma migração grande trocar de HTML estático pra esses componentes controlados do React.
Porém em um uncontrolled form, se eu quisesse fazer uma alteração nos inputs tipo "Preencher endereço, número, etc..." à partir de um CEP em como eu faço essa verificação?
Dá pra colocar um useEffect() em alguma parte do Ref que fica observando se o input muda?
E como fazer os valores entrarem em cada devido input?
@Hans dependendo da lógica que você adotar, você pode usar os eventos do input mesmo. Então ele pode fazer a busca quando o input do cep perder o foco por exemplo e quando a api retornar os dados, você preenche
Sensacional cara 💜
Valeu Rennan
Existe alguma configuração para focar no primeiro elemento com erro, após a validação?
Fiz na unha, pois não encontrei.
Sensacional!!
Valeeeeu Larissa!! 💜
pena que o site da lib não abre
Uau! Muito massa!
Obrigado por essa biblioteca! e Parabéns pelo trabalho!
Tem algum exemplo com react-native-paper + react-native-maked-text?
Vaaaleu, Rafael! 💜 Ainda não temos esses exemplos, mas valeu pela sugestão! 💜💜💜
Nao conseguir usar da error
Muito útil. E para mudar o style do próprio campo?
Você pode adicionar uma classe ao input se possuir erro e personalizar o CSS para aplicar o estilo que deseja.
Show!!
Vai rolar algum video sobre como vcis gerarao essa documentacao do unform con o gasby ? Ta linda, so falto um buscador ali.
o arquivo Form/index.js era pra por o que dentro? não vi utilizando esse arquivo no video.
Show demais o UnForm, só uma dúvida, na pasta Forms vc criou um file com index.js que parece que nao foi usado. Se eu fizer na mesma estrutura que costuma ser feito em routes dá certo? quando o form possui mais de um tipos de componentes?
Você pode fazer uma aula com api adonisjs + socket.io e notificações push com uma pagina onde recebo chamados
Muito bomo UNFORM! consegui rodar todos os modelos da aula, mas estou com dificuldades com as bibliotecas React Select, React DatePicker, React Simple Code Editor, React Input Mask. Basicamente não consigo utilizar setData().
Brother como integra com o input mask?.. consigo colocar a mascara, mas na chamada da api para completar o endereço pelo Cep da Bug...
Como eu posso montar com objeto de array e array de objetos?
Só usar a sintaxe com []: ou usando
Parabéns, estava precisando de algo assim. Uma ótima dica se grasse a partir de JSON SCHEMA. #ficadica
Tem validação assíncrona? gostei bastante do unform
Bom demais!
Acho que deveria ter suporte ao schema do yup por padrão
Que extensão é essa que mostra o tamanho da importação?
Muito bom!!!!
Pergunta: o unform vai ter compatibilidade ainda com o react-select?
unform.dev/examples/react-select
Acho que ja tem, não testei ainda, mas na documentação ja tem sobre.
8:58
Já é possível registrar através do useField()
Sensacional! :)
tenho varios forms de cadastro, crio a pasta com nome do form? ou crio os forms com nome do crud
woow! Tava esperando por isso.
Opaa! Que massa Gleydson 💜
Ótimo
Valeeu, Daniel! 💜
E aí, conta pra gente, já usou ou pretende usar o Unform!? 😉
Faaala Diego!
Achei excelente essa lib e já estou usando em um projeto pessoal :D
Só gostaria de perguntar como funcionaria para um campo do tipo Textarea, pois fiz uma busca na documentação e não encontrei a não ser no NPM onde diz para incluir uma prop de nome "multiline". Realizei a inclusão desta propriedade nada aconteceu, somente um erro "If you want to write it to the DOM, pass a string instead: multiline="true" or multiline={value.toString()}.".
Poderia, por favor, me informar se precisaria de alguma outra configuração adicional? ou terria que criar o componente assim como realizado para o "Input"?
Agradeço!
Alguma boa alma, me fala qual tema do visual studi code que ele usa, tema lindo
Diego, e se fosse ao contrário? Tenho um json complexo e preciso exigir todos os dados tem tela... Qual é a estratégia? Forte Abraço!!!!
Teria como fazer um vídeo de como deixar um projeto no github bem apresentável? Exemplo, como um README.md igual o de vocês
Costumo assistir tudo antes de dar LIKE, mas na hora do SCOPE eu pirei o cabeção.26:00 é o momento de ver que eles não estão brincando não kkkk
Boa Diego!! 💜🚀 hahaha
ja vou testala com firebase pra ver se funfa
Depois conta pra gente, Marcus! 💜
Ficou muito bom!!
Valeeu! 💜🚀
Seria legal se desse um focus no primeiro campo com erro!
Sugestão de lib react-hook-form.com/
Usei em um projeto pequeno, me atendeu completamente! Recomendo
Valeu Ramon =))
uma concorrencia para o React Hook Form?
Como posso ajudar na tradução da lib?
Excelente lib, já estou refatorando um sistema que comecei a construir com ela rssrs.
Estou tendo problemas pra usar o TextField do materialUi. Quando uso com máscara (react-input-mask) funciona normalmente, mas campos sem máscara não funcionam.
Se alguém puder me ajudar, agradeceria muito.
Faaala, Wellington! Você já conhece a nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas 💜 Segue o link! rocketseat.com.br/comunidade
Fala Welington, conseguiu resolver o problema? tbm quero usar o unform mas uso material-ui e passei pelo mesmo problema, vou verificar a comunidade na rocketseat, mas se já conseguiu dá um alô aí, abs
Magnifica :)
Show!!
Um motivo pra mudar para o unform é a criação de grandes forumularios. Mas pq não usa o Memo pra não renderizar tanto os componentes? Não ajudaria não performance? Obrigado por compartilhar seus conhecimentos. Abraços e sucesso
Como assim usar o Memo nesse caso? Pode exemplificar por favor? não consegui pegar a ideia
@@MskMassaki ele evita "renderezicoes desnecessária" se sempre que o usuário digital um carácter no campo vc refazer todo componentes em tela, com um forumulario grande vc terá uma perda de desempenho o Memo poderia evitar isso. Caso esses seja o problema
Nesse caso acho que não precisaria nem usar o Memo, seria só pegar o valor do input pela Ref, sem alteração no State não ia renderizar novamente. Mas essa Lib tem mais funcionalidads, como por exemplo esse Scope que facilita bastante na criação dos Forms
Ajuda muito sim, acredito que mais na questão de padronização