React: Hooks, Contextos e boas práticas

Entendendo o problema - Introdução

Bem-vindos a mais um curso de react aqui na Alura. Nesse curso vamos continuar trabalhando nosso formulário, só que dessa vez vamos deixar ele muito melhor, vamos deixar com várias partes. Vamos fazer o login, a parte pessoal, a parte de entrega e de finalização de acordo com os pedidos do nosso cliente, já que ele tinha um único formulário que tinha os dados pessoais. Ele falou que queria mais dados, não podia só ter os dados pessoais, porque na hora que a pessoa fizer uma compra ele precisa entregar para ela. Na hora que ela quiser entrar na plataforma ele precisa que ela tenha login e senha.

Ele pediu para a gente criar esse formulário e criamos esse formulário usando o material ui e o react, usando os componentes funcionais. Vamos ver como o formulário está e aí a gente continua.

Se eu der meu e-mail, minha senha, e não digitar o número suficiente de caracteres a senha não passa na validação, e se não passar não posso clicar em próximo, ele não me deixa clicar em próximo. Se eu colocar minha senha com mais caracteres ele vai deixar, aí sim vou clicar no próximo e ele continua.

Continua pedindo informações. Meu nome, meu CPF válido, vou querer a parte de novidades, mas não vou querer promoções, e lembrando que se eu tiver CPF a gente pôs validação, então se eu não tiver um CPF válido ele não deixa, só que a validação por enquanto é essa quantidade de dígitos e não o CPF de fato. Existe toda uma conta para validar CPF.

Posso colocar o endereço de entrega. Meu CEP, meu endereço, meu número, Estado, cidade. A gente tem nosso campo e podemos finalizar o cadastro. Finalizei o cadastro, obrigado pelo cadastro. Essa parte de finalização pode ficar muito mais legal, ter um layout muito mais bonito, era só para a gente informar a pessoa que estava tudo certo.

Fazendo isso a gente tem nosso formulário com todas as informações que foram coletadas sendo enviadas para algum lugar. No caso, estamos enviando para o console para saber o que foi coletado. Esse é nosso projeto, é isso que vamos fazer neste curso, e vamos dar uma olhada no código, o que vamos aprender.

A gente tem muito mais classes, um projeto um pouco maior, mais componentes, mais classes, mais arquivos para trabalhar, e vamos começar a partir da app.js. Nela a gente já vai ver algumas diferenças, tenho aqui a parte de validação de cadastro, um provider.

A gente vai ver o que são providers neste curso, como vamos passar informações para componentes do react sem necessariamente precisar passar vários níveis hierárquicos e qual o problema disso, a gente vai ter nosso formulário cadastro, que é quem está com toda a lógica de gerar aquele cadastro, ao mesmo tempo que a gente tem na hora que vou enviar o formulário como quero que ele seja reutilizado, todo continuando com a injeção de dependências, falando para usar essa propriedade para enviar o formulário, porque quero receber essas informações, e aí decido como vou tratar elas.

Só preciso que você por ser um componente visual trabalhe algumas validações para mim, por favor, e que você me devolva os dados, porque aí consigo fazer todo o resto com os dados.

Nosso formulário de cadastro se eu der um F12 a gente tem várias coisas novas já. Tenho o use state que a gente está fazendo, o use effect, uma coisa nova, um hook novo que vamos aprender neste curso, a parte de renderização do formulário, usando algumas propriedades a mais do material ui, como esse stepper que a gente colocou aqui. Nossa função de próximo, coleta de dados para cada iteração, e nossos componentes. A gente está trabalhando com os componentes individualizados aqui.

Se eu vier nos dados do usuário a gente pode ver que ele tem coisas mais diferentes ainda. Ele tem a parte de use content, como vou receber as informações, do que quero que seja validado nesse contexto, vou usar um contexto externo para isso, porque aí vamos ver também quais as vantagens de usar esse contexto externo, e o use erros, que é um hook que a gente criou, um hook customizado que vamos criar neste curso.

Vou pegar e extrair lógica que estava repetida em vários componentes e a gente vai criar esse hook que está aqui. É um monte de funções do JavaScript que usam parte do react para ter um gerenciamento do estado dele mesmo e criar um hook customizado, porque aí consigo usar esse hook que eu criei entre vários projetos ou dentro de vários componentes do mesmo projeto, posso compartilhar ele em vários lugares.

Aqui a gente tem esse hook e use erros do nosso dados de usuário, e nossos dados pessoais também a gente vai usar esse use erros, porque vamos adicionar a validação do nosso formulário através desse hook customizado.

Bastante coisa que a gente trabalhou nesse curso, muita refatoração, muita boa prática de código que a gente vai ver, e alguns componentes a mais de interface, além de boas práticas com react e novas funcionalidades do react, como um todo. Eu sou o Ricardo Lugan e vou ser seu professor nesse curso.

Entendendo o problema - Entendendo o problema do cliente

Bem-vindo a mais um curso de react aqui na Alura. Nesse curso a gente vai continuar trabalhando com nosso projeto dos formulários. Nosso formulário de cadastro que criamos no curso onde aprendemos sobre function components. Começamos a aprender sobre function components, vimos como trabalhar com eles, como usar o state, o react, nessa nova maneira, essa abordagem um pouco mais moderna, e agora a gente tem um novo desafio. A gente quer aumentar esse formulário de cadastro que começamos a criar.

A gente já viu bastante coisa sobre formulários, só que dessa vez nosso cliente que está pedindo para fazer esse formulário quer muito mais informação. Ele quer informação de usuário, de entrega do produto, informações pessoais de quem estiver usando nosso site, ele quer um monte de informações.

Baseado nisso começamos a pensar, ver, falar com outras pessoas de outros times, time de design, de UX, e ficou definido que para fazer isso para o nosso cliente precisaríamos criar um formulário de múltiplas partes, porque se eu fizesse um formulário muito grande, com muitos campos em uma só tela, a pessoa, quem estiver usando nosso sistema, vai ficar desanimada, não vai querer preencher todos aqueles campos, porque são muitos campos de uma vez.

A ideia é separar essas informações em pedaços e dar pequenos pedaços para a pessoa ir preenchendo aos poucos. Nesse curso vamos trabalhar fazendo esse multiport form. Para começar, vamos ver como está nosso código. Aqui está nosso código do projeto inicial, deixei meu servidor rodando. A gente tem nosso projeto, que é o projeto inicial desse curso.

Ele é o mesmo projeto do curso anterior, não mudou nada. Se vocês tiverem vocês podem continuar a partir do que você tiver, senão a gente deixa um link aqui embaixo com o projeto inicial para você baixar e conseguir seguir as aulas a partir desse ponto.

Onde a gente tinha acabado esse projeto? Tínhamos nosso app.js, ele tem a parte de render dele, e a renderização dele tenho um container que vai alinhar as cores para a gente na tela, tenho uma tipografia, lembrando que estamos usando material ui, ou seja, essa biblioteca de prototipação e de layout que já tem o design system embutido nela, e tenho meu formulário de cadastro.

É esse formulário de cadastro que a gente trabalhou boa parte desse projeto. Nesse formulário de cadastro passo duas propriedades, que é o ao enviar e o validar CPF, então ele tem uma função de validação e uma função de envio, quando vou submeter o formulário e quando vou validar meu CPF.

Dentro dele, se eu der F12 para a gente navegar, temos toda a parte de estados, e a gente tem nosso campo form. Nosso formulário está aqui, tem o on submit e além disso a parte de campos. Tenho o text field com o nome, sobrenome, CPF da pessoa, e a parte de form control label, com os dois switches. No caso, o checkbox que a gente tinha posto. Uma para promoções e um para novidades.

A gente trabalhou nisso e no final tenho meu botão de submit, onde a pessoa vai realmente enviar as informações. Ela terminou de preencher, vem em cadastrar, terminou de preencher o formulário. Só que como a gente viu nosso switch agora não quer só o formulário, a gente quer separar isso em vários formulários.

A primeira coisa que a gente vai ter que fazer é criar os outros formulários. Vou criar novos componentes para esses outros formulários. Além desse formulário que chamei de formulário de cadastro, como ele vai ser nosso formulário principal, vou pegar todo esse código que a gente tem dentro dele e vou jogar para outro componente. Dentro da parte de formulário de cadastro vou criar um novo arquivo, vou chamar de dados pessoais jsx. Nele vou colocar todo aquele formulário que a gente tem, vai ser um novo componente que vou chamar de dados pessoais.

Para isso vou pedir para ele importar o react, importei, e vou copiar toda essa função. Aliás, vou copiar tudo, desde o import, porque ele vai precisar de tudo isso de qualquer forma. Vou copiar tudo isso, vamos trazer esse outro arquivo novo, e ao invés de chamar de formulário de cadastro, vou renomear e vou chamar de dados pessoais. É meu formulário de dados pessoais.

Como renomeei aqui ele já renomeou minha função dados pessoas e está falando que não tenho o use state, porque não importei do react. Então, use state vem do react. Agora que tenho esses dados pessoais e esse formulário separados, o meu formulário de cadastro não precisa mais de tudo isso. Posso tirar esse formulário de cadastro e tirar toda essa parte, tirar todo esse formulário, e não vou precisar mais daqueles estados, que estão dentro dos dados pessoais. Vamos tirar isso aqui também.

O que eu quero fazer é que esse formulário de cadastro vai ser quem vai controlar os diferentes cadastros que a gente tiver, tanto de dados pessoais quanto de dados de endereço quanto de dados de usuário, de login e senha. Vamos vir aqui e nesse return por enquanto vou usar só meus dados pessoais. Vou querer meu componente de dados pessoais.

Ele já fez o auto import para mim, não tenho nenhum filho dele, então não vou precisar disso, só vou fazer a declaração simples aqui, sem colocar nenhum filho, e vou apagar meu import, porque não estou usando mais esse import do material ui, já que meu formulário de cadastro só por enquanto chama meus dados pessoais.

Vamos fechar a janela de projeto, vamos salvar e ver como ficou. Aparentemente nada mudou, tudo certo desse lado. Se eu vier em inspecionar elemento a gente pode ver que está tudo funcionando da mesma maneira que tínhamos antes. O h1, nosso article, tudo certo. A única coisa que fiz foi abstrair esse componente que representa esse formulário para outro componente, porque consigo ter um novo componente de formulário. Vamos trabalhar com nossos dados de usuário, login e senha.

É mais rápido de fazer, mais simples, e vamos lá. No formulário de cadastro, novo arquivo, vou chamar de dados usuário. Dados de usuário jsx. Novamente, vamos importar o react e criar nosso componente baseado em funções. Vamos continuar mantendo a padronização do nosso projeto.

Sempre que estamos trabalhando com funções, vou trabalhar a partir desse momento com funções. Se estivesse trabalhando com classe trabalharia 100% em classes.

Para declarar uma nova function component, vou fechar minha aba lateral com "Ctrl + B", vou vir aqui e vou declarar uma função. Minha função vai ter o nome do meu componente, que vai ser dados de usuário, ele vai receber as propriedades dele aqui, mas por enquanto não tem propriedade nenhuma, e tenho o corpo da minha função.

Já para adiantar também vou pedir para fazer um export default, porque vou querer que outros módulos da minha aplicação recebam esse formulário, consigam usar esse formulário, então vou exportar minha função de dados de usuário, e aí como a gente tinha visto todo componente baseado em função do react precisa devolver, retornar nossa árvore de renderização. Vou vir aqui, dar um return na minha árvore de renderização. Vou abrir parênteses porque vou dividir em várias linhas para ficar mais fácil de ler, vou quebrar uma linha já, e ele vai ser um novo formulário.

Nesse novo formulário o que vou colocar é nosso text field para o campo de usuário. Vou vir aqui e vou colocar um text field, ele já vai fazer o auto import para imóvel do material ui core, já fez isso para mim numa boa. Esse text field vai ter o id de usuário. Vamos colocar de e-mail. Vamos usar o e-mail como login para o nosso site, e aí o label dele vai ser de e-mail também. E o tipo, meu type, vai ser text, quero um tipo text para ele. Aliás, type e-mail, vamos usar o tipo do html que a gente pode usar, que é o tipo de e-mail.

Fechei meu text field e vamos renderizar ele no nosso formulário de cadastro para ver como está ficando. Por enquanto tinha só os dados pessoais, vou usar um fragment aqui, abrir uma tag vazia em cima e fechar o fragment aqui embaixo, porque preciso que um componente do react retorne um único elemento pai.

Aqui dentro vou colocar meus dados usuário. Vou importar ele. Vamos fechar, endentar todo nosso código, e vamos ver como ficou na nossa aplicação. Tenho aqui meu formulário que já tinha antes, com o botão de cadastrar, e o campo de e-mail.

Mas a gente pode ver que na hora que cliquei no campo de e-mail nossa validação do on blur, do valida CPF falou que não é uma função, isso porque como a gente mudou, extraiu os dados pessoais para um outro componente, preciso passar as propriedades para ele. Vou passar o ao enviar, que vai receber o ao enviar como propriedade, e o validar CPF, que vai receber o validar CPF que veio como propriedade do elemento pai, do nosso app.js. Essas duas propriedades que tenho que passar agora para baixo.

Com o tempo a gente vai abstraindo e melhorando esse código, mas só para não ter erro nesse momento, vamos ver agora. Se eu vier no CPF e tirar, a validação está funcionando, mas como eu estava falando a gente tem agora nosso campo de e-mail embaixo. E se eu digitar qualquer outra coisa que não for um e-mail, quando eu der um submit nesse formulário embaixo ele deveria me dar um erro, mas vamos continuar fazendo nosso campo.

Tenho o campo de e-mail, agora quero um campo de password. Vou vir nos meus dados de usuário, vou ter outro text field, que vai ser nosso password, nossa senha. O id dele vai ser senha, o label vai ser senha, e nosso type, o tipo de formulário que quero criar vai ser o formulário de password, tenho que colocar o tipo do formulário em inglês, porque é o padrão do html, então quero um tipo password.

Dessa maneira se a gente voltar lá já tem aqui nosso e-mail e nossa senha, inclusive o senha já esconde para a gente porque é um password. E como tenho o plugin do last pass, se eu quiser gerar uma senha aleatória ele já reconhece, porque reconheceu pelo tipo do campo, o plugin do last pass no meu navegador faz isso automaticamente.

A gente tem aqui nosso text field, nosso e-mail e senha, e vamos colocar o botão. Vamos colocar também um botão dentro desse formulário que vai ter que ser um botão do tipo submit. O type dele vai ser submit, porque quero que ele envie esse formulário, que faça a submissão, do tipo submit. E aí dentro desse botão vou por em cadastrar.

Esse botão tenho que importar, vamos importar aqui em cima, e voltando na aplicação tenho o e-mail, a senha, quando venho em cadastrar digite endereço de e-mail válido, o próprio html faz a validação de que esse campo tem que ser um e-mail obrigatoriamente. Tenho que colocar o arroba qualquer coisa e ele vai reconhecer que é um e-mail e deixa submeter o formulário.

A gente tem aqui nosso formulário, mas ele não está com a mesma cara desse outro. A gente deu um trato um pouco melhor nesse formulário de cadastro pessoal aqui em cima. Então, vamos layoutar ele para ficar mais parecido e ter a identidade visual que a gente estava usando.

Para isso, posso vir nos dados pessoais e a gente pode ver que estávamos usando a variante de outlined, estava usando uma margem normal e o full width, pedi para ele usar a largura máxima do nosso container. Nesses três campos vou adicionar nossa variante, nossa margem, nosso full width, e vou pedir para endentar. Ele vai pular as linhas e vamos ver qual o estilo que estávamos usando no nosso botão.

No nosso botão aqui embaixo eu estava usando uma variante de container, de uma cor primária. Vamos copiar também isso aqui. Nossa variante e nossa cor, porque aí vamos adicionar o estilo no nosso botão, da mesma maneira que a gente estava fazendo no outro formulário.

Se eu voltar agora ele está com a cara que a gente tinha, só que é estranho. Tenho o formulário pessoal aqui, tenho um formulário de e-mail e senha, e dois botões de cadastrar. Não é isso que a gente estava querendo fazer, quero separar isso em diferentes formulários. A gente vai começar agora que já temos os dois formulários a ver como a gente pode fazer a transição de um para o outro e começar a elaborar isso um pouco melhor.

Entendendo o problema - Criando formulários

A gente tem esses dois formulários aqui, mas antes da gente começar a fazer a transição e a separação desses formulários em várias partes como tínhamos falado, vamos fazer o último formulário que o cliente pediu, é um formulário para entregas.

Se ele estiver aqui no nosso formulário, vou criar um novo arquivo e vão ser nossos dados de entrega jsx. Tenho meus dados de entrega. É a mesma coisa que vamos fazer. Se estou criando um componente do react vou ter que importar o react. Então, imr, porque estou usando os snippets do react, estou usando um plugin de snippets, simple react snippets, e aí se eu digitar imr ele já faz a linha de importação para mim, já preenche para mim essa linha.

Importei o react, vou declarar minha função, meu componente, que vão ser meus dados de entrega, esses dados de entrega vão ter algumas propriedades que vamos ter que receber, mas a gente vai tratar isso mais para a frente conforme precisarmos dessas propriedades, mas como é uma função também preciso declarar os parâmetros, vou exportar ele. Vou dar um export default nos dados de entrega.

Já tenho meu componente sendo renderizado, declarado, e sendo exportado para outros componentes poderem usar ele. Aqui dentro vou fazer a mesma coisa. Vamos retornar nossa renderização, vamos retornar o que esse componente desenha, e para isso preciso retornar o jsx, a árvore do jsx.

Vamos pular uma linha, ele também vai ser um formulário, então também tenho um form. Esse form vai ter dentro dele cinco campos. Ele vai ter o endereço, o número, o Estado, a cidade e o CEP. Para isso, a gente vai começar colocando nossos text fields. Vamos agilizar um pouco, vamos pegar os dados de usuário e vamos pegar o text field de e-mail, por exemplo, vamos copiar para cá e trazer aqui dentro, porque aí vai ficar um pouco mais fácil de entender, só preciso alterar os ids e os labels e o tipo, mas ele já vai vir estilizado como a gente estava usando.

Só vou importar o text field, import text field from @material-ui/core. Já tenho meu text field. Vamos pedir para ele endentar nosso código. Text field, nosso primeiro campo vai ser nosso CEP. O id dele vai ser CEP. O label dele vai ser CEP, o tipo dele não vai ser um tipo de e-mail, vai ser um tipo number, porque quero que ele seja só numérico. Não quero que o CEP receba outras coisas que não números.

Para a gente conseguir ir vendo e testando o que estamos fazendo, vamos importar ele aqui. Além dos dados pessoais e dados de usuário vou ter meus dados de entrega. Também vou fechar ele de maneira simples. Voltando lá, agora temos nosso CEP. Se eu colocar em texto ele até deixa, mas realmente gostaria de colocar só números.

Vamos aqui para os dados de entrega. Além do CEP, vou ter o meu endereço, nosso id endereço, nosso label também vai ser endereço, e aí ele vai ser do tipo text, quero um texto padrão nele, nada diferente disso. Além do endereço vou ter nosso número, então endereço e número. Id vai ser número. Como nosso label vai ser número. E o type dele tem que ser number, porque é numérico. Vou ter também Estado e cidade, que vão ser o mesmo tipo do endereço, então vou copiar aqui para baixo. Mais dois labels, sendo que tenho meu Estado e a minha cidade logo embaixo. Nosso label cidade.

No meu Estado e cidade não vou deixar como ocupando a linha inteira, não preciso disso para eles, vou deixar só meu endereço ocupando a linha inteira. Número não precisa ocupar linha inteira e CPF também não. Esse vai ser um formulário que vai ter uma cara um pouco diferente. Tem o CEP, endereço, número, Estado, cidade, e o que faltou é nosso botão de cadastrar para esse layout aqui, esse formulário.

Vamos adicionar esse botão cadastrar. Para facilitar vou copiar nosso botão dos dados de entrega. Botão de cadastrar dentro do form, tenho que importar meu button, e a gente tem o text field e o button. Tenho aqui nosso nome, sobrenome, CPF, cadastrar, esse cadastrar está um pouco fora, não está alinhado com o resto. Vamos colocar para ele usar a linha inteira, porque vai ficar na linha de baixo e a gente não vai sentir a diferença. Vou usar como full width. Ele vai usar a linha inteira e vai ficar lá embaixo.

Outra coisa também é que esse formulário de endereço vai ser o último. É legal que esse botão de cadastrar seja maior, a gente pode até mudar ele para finalizar cadastro. A gente pode ao invés de chamar de cadastrar, finalizar cadastro, porque mais para a frente a gente vai querer que esse campo, na hora que a gente clicar nesse botão, vou pegar todas as informações desses três formulários que a gente criou e vou fazer alguma coisa com elas, vou confirmar o cadastro da pessoa, já que estamos fazendo um cadastro em vários passos.

Agora sim temos nossos três formulários criados, e se a gente for ver realmente é muito campo para jogar para uma pessoa de uma vez. E isso podia ser muito maior, dependendo dos nossos dados que vamos querer para e-mail e senha, para nome e sobrenome, podia ter muito mais dados pessoais pedindo. Para dados de endereço eu podia pedir mais coisa, dados de compra. Acaba ficando bastante coisa. Já que vou querer fazer isso em passos, vamos pegar esses três formulários agora e separar em três passos diferentes, e ver como podemos fazer a transição entre eles.