React: criando formulários com Formik e yup

Conhecendo a biblioteca - Apresentação

Olá, estudante! Sou Mônica Hillman e desejo-lhe boas-vindas a este curso de Formik com YUP.

Audiodescrição: Mônica é uma mulher branca de cabelos compridos e castanhos com mechas loiras. Usa óculos de armação grande, arredondada e metálica e um piercing no septo. Está de camiseta cinza. À sua frente, um microfone com espuma protetora. Ao fundo, duas prateleiras com livros e enfeites. O ambiente está iluminado por luzes em tons de roxo.

O que vamos aprender?

Durante este curso, vamos revisar o projeto Freelando, que já possui um formulário de cadastro de usuários com os campos Nome completo, Estado, Cidade, E-mail, Telefone, Senha e Confirme sua senha.

Esses campos serão criados com JSX dentro de um componente Form, e vamos adaptá-los para utilizar a biblioteca Formik, que será responsável pelo gerenciamento de estados e gerenciamento dos dados que serão enviados no formulário.

Depois, vamos construir os campos adicionais de Data de nascimento e o de Aceite dos termos e condições, onde também vamos aplicar validações, primeiramente feitas manualmente e depois utilizando a biblioteca YUP. Com ela, podemos validar o tipo de dado, se é obrigatório ou não, entre outras validações.

Podemos já conferir o resultado que buscaremos alcançar:

Vamos deixar todos os campos vazios e clicar em "Próxima". Ao fazer isso, a validação de informações é ativada e detecta que os campos não estão preenchidos, avisando a pessoa usuária com a mensagem "Campo obrigatório" abaixo de cada um dos campos obrigatórios.

E por que você precisa aprender tudo isso?

Porque o formulário é algo que aparece em diversos tipos de projetos, seja no login, seja em cadastro de usuário, seja em cadastro de produto, etc. Então, conhecendo novas tecnologias para implementar esses formulários, você consegue se destacar no mercado de trabalho.

Pré-requisitos

Para acompanhar o presente curso, é importante que você domine o React e a linguagem JavaScript, pois vamos receber um projeto pronto e vamos atuar em cima dele. Não vamos aprender a construir um projeto React do zero neste curso.

Sabendo dessas coisas, que tal se matricular?! Nos encontramos no próximo vídeo para começar!

Até lá!

Conhecendo a biblioteca - Instalação da biblioteca

Seremos responsáveis por aprimorar o formulário de cadastro de profissionais freelancers no Freelando.

Trabalhar com formulários no React pode ser um pouco complexo, pois precisamos lidar com gerenciamento de estado, validações e também fornecer uma experiência de usuário agradável para navegação em nossa tela.

Formulário atual

Vamos analisar o que está acontecendo nesse formulário de cadastro do Freelando. Queremos que você abra o projeto que está na atividade "Preparando o Ambiente" no seu VS Code. Dentro do VS Code, vamos no Explorador de arquivos à esquerda da tela e seguir o caminho "src > páginas > cadastro > DadosPessoais.jsx.

Da linha 39 à linha 45 desse arquivo, podemos observar que temos um estado para cada um dos campos de digitação que existem nesse formulário:

DadosPessoais.jsx

const DadosPessoais = () => {
  const [nome, setNome] = useState('')
  const [estado, setEstado] = useState('')
  const [cidade, setCidade] = useState('')
  const [telefone, setTelefone] = useState('')
  const [email, setEmail] = useState('')
  const [senha, setSenha] = useState('')
  const [confirmarSenha, setConfirmarSenha] = useState('')
  return (
    <form>
// código omitido

Estamos fazendo o gerenciamento desses estados através do hook useState(), que nos fornece a opção de definir o nome de uma variável que vai guardar esse estado e também uma função que vai fazer a atualização quando quisermos mudar o valor desse estado.

Para interagir com a pessoa usuária no campo de digitação, estamos fazendo como no seguinte exemplo de campo de digitação:

<Row>
  <Col>
    <CampoTexto
      titulo="Nome completo"
      valor={nome}
      onChange={setNome}
      tipo="text"
      required
    />
  </Col>
</Row>

Neste código, precisamos enviar a função setNome no onChange. Então, cada vez que o valor desse campo de digitação for alterado, ele vai chamar essa função e atualizar o valor do estado.

Agora, imagine que temos muitos mais campos de digitação nesse formulário. O código ficaria gigante e seria um pouco mais problemático lidar com esses campos, ficando mais propensos a erros quando a pessoa usuária digitar nesse formulário para preenchê-lo.

Para não ficarmos tão vulneráveis a erros, vamos trazer uma ferramenta que vai mudar a sua vida na construção de formulários: o Formik.

O que é o Formik?

Para conhecermos mais sobre o Formik e instalá-lo em nosso projeto, vamos acessar sua documentação, no site http://formik.org.

O slogan do site promete: "Construa formulários em React sem as lágrimas". Observaremos durante o curso se isso realmente acontecerá! Além disso, o texto de apresentação afirma que o Formik é a biblioteca de formulários de código aberto (open source) mais popular do mundo para React e React Native.

Podemos clicar no botão "Get Started" logo abaixo do texto de apresentação para saber como iniciar com essa biblioteca.

Essa página começa com uma explicação sobre o que o Formik pretende resolver:

Formik é uma pequena biblioteca que ajuda você com as 3 partes mais chatas na construção de formulários: 1. Obter e retirar valores do estado do formulário 2. Validação e mensagens de erro 3. Tratamento do envio do formulário

Também há um vídeo do Jared Palmer, criador do Formik, explicando suas motivações para criar essa biblioteca, com uma comunicação bastante engraçada e agradável. Recomendamos conferir esse vídeo assim que puder!

Instalando a biblioteca

Agora, vamos procurar na documentação a explicação sobre como instalar essa biblioteca. No sumário à direita da tela, vamos clicar no quarto tópico: "Installation".

Essa página indica trê maneiras de fazer essa instalação: com o NPM (Node Package Manager), com o Yarn ou através da tag <script>.

Todas as bibliotecas instaladas no nosso projeto foram instaladas com NPM. Então, vamos seguir as instruções da documentação e copiar o seguinte comando:

npm install formik --save

Em seguida retornamos ao VS Code e abrimos o terminal, clicando em "Terminal > New terminal" no menu superior. Vamos colar o comando que copiamos nesse terminal e pressionar "Enter". A instalação será feita automaticamente!

Agora que já conhecemos um pouco sobre o Formik e o instalamos em nosso projeto, vamos começar a utilizá-lo para refatorar o formulário do Freelando.

Conhecendo a biblioteca - Componente Formik

Agora que já instalamos a biblioteca Formik, precisamos começar a utilizá-la, certo?

Componente <Formik>

Um passo importante é pensar em como podemos estruturar o nosso formulário utilizando Formik.

Para isso, vamos até a linha 47 do arquivo DadosPessoais.jsx, onde temos a abertura do elemento form. Vamos abrir um espaço antes dela e inserir o componente <Formik>. Faremos o fechamento desse componente na linha 146, com </Formik>.

DadosPessoais.jsx

return (
    <Formik>
        <form>
// código omitido
        </form>
    </Formik>
); 

Depois, vamos voltar na linha 47, clicar no K do Formik e pressionar "Ctrl + Barra" para fazer o import desse componente - importante para funcionar corretamente. Vamos clicar na primeira opção, Formik, e o import é feito.

import { Formik } from 'formik';

Com isso, conseguimos começar a utilizar esse componente.

O <Formik> serve como um container para todos os elementos do formulário. Por isso, ele é inicializado antes da abertura do form e fechado depois do fechamento do form.

Ele vai ter controle e acesso sobre todos os elementos do formulário, e ele também fornece algumas propriedades que auxiliam na construção do formulário e na captação de interações, como quando digitamos no formulário, ou quando o enviamos, e até na criação de validações.

Inicialização dos campos com Formik

O primeiro passo é criar o gerenciamento dos campos, ou seja, gerenciar os estados do que é digitado nos campos de digitação. Conseguimos fazer isso através da propriedade initialValues, que colocaremos dentro do <Formik>, na linha 48. Depois colocamos um sinal de igual e abrimos chaves e fechamos chaves duas vezes: <Formik initialValues={{}}>.

Dentro das chaves do meio, vamos começar a colocar o que antes estávamos fazendo através do useState(). Ou seja, vamos criar os estados dentro do initialValues.

Começaremos, por exemplo, com o campo nome. Inserimos dois pontos, aspas simples: nome: ''. Faremos o mesmo para o campo estado, cidade, telefone e assim sucessivamente, para todos os campos do formulário já existentes. Vamos separá-los por vírgulas, colocando um em cada linha:

<Formik initialValues={{
  nome: '',
  estado: '',
  cidade: '',
  telefone: '',
  email: '',
  senha: '',
  confirmarSenha: ''
}}>

Com o código acima, estamos definindo os estados que existirão no nosso formulário. Então, não precisamos mais lidar com o hook useState() do React, porque vamos deixar esse papel para o Formik. Então, podemos apagar o trecho da linha 40-46:

Trecho apagado de DadosPessoais.jsx

const [nome, setNome] = useState('')
const [estado, setEstado] = useState('')
const [cidade, setCidade] = useState('')
const [telefone, setTelefone] = useState('')
const [email, setEmail] = useState('')
const [senha, setSenha] = useState('')
const [confirmarSenha, setConfirmarSenha] = useState('')

Temos muito menos código! Agora, temos uma biblioteca adequada que vai fazer toda a lógica por trás desse gerenciamento de estados.

Mas, apenas isso não basta. Apesar de já termos inicializado os valores que vão ser inseridos nos campos desse formulário - e iniciamos todos eles como strings vazias - ainda não temos acesso ao campo de digitação em si.

Então, vamos dar continuidade na utilização dessa biblioteca para conhecer cada vez mais as suas funcionalidades. Até a próxima aula!

Sobre o curso React: criando formulários com Formik e yup

O curso React: criando formulários com Formik e yup possui 110 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo a biblioteca
• Estruturando o formulário
• Validando dados
• Integrando componentes
• Transformando dados