Onde fica o prop-types do React?

Raphael Viana — Fri, 10 Jul 2020 21:12:45 +0000

A inspiração para esse artigo veio de algumas perguntas que encontrei pela internet sobre as 'mágicas' que percebemos no React durante o desenvolvimento.

Inclusive essa pergunta foi feita em um tutorial que eu mostrava a criação de um componente. Pode parecer básico esse questionamento,
na verdade muitos questionamentos são básico enquando são fermentados em nossa mente, na hora de explicar nem sempre é tão intuitivo.

O que é esse prop-types?
O nome é bem sugestivo depois de uma análise, podemos extrair do prop propriedade e do type a palavra tipo. Acredite, já foi meio caminho andado!

Onde ele mora?
Quando usamos o comando: npx create-react-app filename, para criar nossa estrutura inicial do nosso projeto, os scripts internos do React se encarregam de buscar lá no NPM (Node Package Manager) esse pacote chamado prop-types.

O prop-types no nosso projeto:
Depois que o React, de forma automática, baixa suas dependências, dentre elas o prop-types, ele é registrado em dois arquivos:

(1) Na pasta node_modules/prop-types, nessa pasta temos de fato o módulo (código).
(2) Outro local é no package-lock.json, onde podemos ver o endereço do repositório @types (arquivo de definição de tipos)

Se você colocar o endeço abaixo na sua barra de buscas: https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz , você vai baixar o pacote de definição de tipos automaticamente.

Pra que serve?
Se você já usou ou sabe pra quer serve o TypeScript e o Flow (dentre outras soluções) é fácil entender pra que serve o prop-types. Serve para você ter o controle do tipo das suas variáveis. Mas o benefício não é só esse, o prop-types assim como o TypeScript (inclusive, recomendo usa-lo e o próprio Facebook também recomenda).

(1) Pra usar, precisamos importar no nosso componente:
import PropTypes from 'prop-types';

(2) Depois que declaramos a nossa importação, podemos fazer uso do seus benefícios.

UserItem.propTypes = {
     user: PropTypes.object.isRequired
};

No trecho acima, temos um componente chamado UserItem, 'conectamos' ao nosso propTypes e dentro, no corpo do objeto, passamos qual variável queremos controlar, no caso a variável user que vai ser do tipo objeto e é obrigatória.

Como você pode imaginar, esse exemplo pode se extender pra outros tipos de variáveis e obrigatoriedades.

Think, code and share!

DEV Community: Raphael Viana

Onde fica o prop-types do React?