Checagem de tipos com PropTypes no ReactJs
E aí pessoal, como vocês estão?
Vamos completar 1 mês do nosso blog e, espero que as publicações estejam contribuindo para sua formação profissional como desenvolvedor de software e você esteja evoluindo a cada dia sua aplicação web com React.
Hoje daremos mais qualidade e segurança ao seu código. Vou explicar o que são os PropTypes e a sua importância dentro de uma aplicação.
Pois é, a aplicação foi evoluindo, novos regras de negócio foram adicionadas ao projetos e, você começa a perceber que no Javascript tudo pode, não é mesmo?
Você que arranjar um meio de ter mais controle sobre os dados das propriedades, afinal com o crescimento da aplicação outros desenvolvedores vão começar a “codar” e, seria de certa forma bem interessante validar se as propriedades que estamos desenvolvendo em conjunto tem o mesmo tipo.
Esta preocupação com o código é um diferencial entre os programadores, afinal, não são todos que conseguem ter uma visão sistêmica e gerenciar todos esses riscos!
Então, já que hoje é quarta deixo você escolher. Cerveja ou café?
Que tal, naquele projeto que desenvolvemos desde o início ao “deploy” adicionarmos mais essa funcionalidade?
Vamos abrir o projeto e ir direto para o arquivo “src/pages/About.js”.
Criamos alguns componentes, como Header, AppTemplate, Button e na hierarquia dos componentes do React, eles são filhos do componente do tipo page About, que por sua vez é filho do componente AppRouter.
Para conseguirmos validar as propriedades que estamos passando de componente pai para componente filho, vamos usar como exemplo o componente Button.
Abra seu componente Button (“src/components/button/index.js”).
Veja que ele recebe três propriedades “type, handleChangeName, text” e, como não temos validação, você sabe que se passar para essas propriedades um valor com tipo diferente, sua aplicação pode até funcionar, mas provavelmente não como o esperado.
Então, olhando essas três propriedades, vemos que temos duas que são do tipo “string” e uma do tipo ‘function”.
O React tinha seu pacote de PropTypes. Porém, desde a versão 15.5 do React ele foi removido, então devemos instalar a biblioteca prop-types que é recomendada pela documentação do ReactJs.
Abra seu terminal, vá na raiz do seu projeto e digite “npm instal prop-types — save”.
Após finalizar a instalação, volte ao arquivo do componente do tipo botão e vamos importar esse biblioteca.
Uma linha antes do export do nosso componente, vamos adicionar ao Button a biblioteca PropTypes, que deve receber um objeto, neste primeiro momento, podemos deixá-lo vazio.
Será dentro desse objeto, que vamos definir os tipos das propriedades (“this.props”) que nosso componente espera receber.
A biblioteca PropTypes utiliza as nomenclaturas (string, func, boolean, number, etc…) para definir o tipo da propriedade.
Então, dentro do objeto vamos definir que as propriedades type e text são do tipo “string” e handleChangeName é do tipo “func”.
Vamos rodar nossa aplicação com “npm start”. Abra a rota “localhost:3000/sobre” e aperte F12 para usarmos o console do depurador do navegador.
Veja que não temos nenhuma informação de “warning” no nosso navegador, então significa que está tudo certo com nossa página About.js e seus componentes.
Mas, se voltarmos na “src/pages/About.js” e alterarmos a propriedade “text” que é um texto para um número, vamos ver o que acontece?
Retorne ao navegador e atualize a página.
De imediato, identificamos que nossa aplicação continua funcionado, porém vemos que uma mensagem de alerta é exibida no nosso console, avisando que a propriedade text está do tipo “number” mas o esperado é do tipo “string”.
Com essa validação nos componentes, podemos ter mais controle sobre os valores que as propriedades que nossos componentes vão receber.
Essa modalidade de desenvolvimento está incluída nas boas práticas de uma aplicação web,código limpo e manutenibilidade!
O uso do PropTypes nas aplicações JavaScript com React é fundamental, mesmo que seja um projeto pequeno pois, ele proporciona organização, segurança e agilidade no momento do desenvolvimento de componentes e suas funcionalidades.
Se ficou com alguma dúvida, ou quer saber mais como usar outros tipos de PropTypes na sua aplicação sinta-se a vontade para me enviar uma mensagem no comentário ou nas redes sociais.
Se por acaso não entendeu alguma parte, me mande que farei o possível para te ajudar.
Siga as nossas redes sociais (facebook e instagram)para ficar por dentro de tudo que estamos criando e acompanhar o nosso dia a dia.
Por hoje é só, nos vemos em breve!
Mas e aí, na sua máquina funciona?
