[vc_row][vc_column][vc_column_text]No momento em que estamos “codando”, diversas vezes nos encontramos em situações em que sentimos que há uma certa repetição em algumas tarefas e isso torna o processo de criação um pouco menos interessante, além de ser contra produtivo. Uma forma de solucionar esse problema é automatizando a criação de componentes funcionais em ReactJS.  

[adrotate banner=”4″]

Isso porque, quando tratamos de ReactJs, vemos essa repetição constantemente na criação componentes, sendo eles funcionais ou de classes. Então, que tal se pudéssemos automatizar este processo, criando estes elementos que em sua estrutura inicial são tão semelhantes?

Agora, a boa notícia! Podemos! E utilizando uma biblioteca livre chamada Plop, disponibilizada neste link: https://plopjs.com/.

Configurando o Plop para automatizar componentes funcionais em ReactJs

Antes de tudo, para iniciar este breve tutorial de como utilizar esta biblioteca em projetos utilizando ReactJs, criei um projeto básico com create-react-app. Partiremos daí.

Por isso, começaremos com a instalação local no projeto utilizando o yarn (caso queira, pode utilizar o npm, fazendo as devidas conversões na hora de digitar seus comandos).

Agora, na raiz do projeto, criaremos uma pasta de nome “generators” e esta deve conter uma pasta chamada “templates” e um arquivo javascript de nome “plopfile.js”.

Portanto, a estrutura deve ficar assim:

Agora, configuraremos o nosso script no arquivo “package.json”. Em scripts, colocaremos o seguinte comando:

“generate”: “yarn plop –plopfile ./generators/plopfile.js”

Já em nosso arquivo plopfile.js, faremos a seguinte configuração:

No prompt, temos um array contendo um objeto, com algumas propriedades: “type” será o tipo de comando que será entrado, “name” será o nome do componente e “message” é a mensagem que será exibida ao usuário.

Abaixo, temos as actions que tem um array contendo alguns objetos, os quais contêm algumas propriedades:

• “type” é o tipo de ação que será executada ao gerar;
• “path” será o caminho do objeto gerado;
• “templateFile” será nosso arquivo de modelo.

Em nosso exemplo, vamos utilizar a geração de um arquivo jsx (nosso componente funcional) e um arquivo js (nosso componente de estilização).

Criando templates personalizados em componentes funcionais em ReactJs

Dentro da pasta “templates”, crie dois arquivos: um sendo “Component.jsx.hbs” e um “styles.js.hbs”

No template de component teremos o seguinte conteúdo:

E nome template de estilo temos:

Gerando os arquivos

Finalmente colocaremos a mão na massa!

Agora, é só ir no terminal e digitar o comando “yarn generate” e apertar “enter”. O prompt perguntará qual o nome do seu componente e pronto!

Foram gerados dois arquivos na pasta “components”, como definido no “path”.

O componente “button” com suas exportações:

Arquivo de estilização:

Viu só? Com alguns minutinhos de configuração podemos poupar tempo criando os mesmos arquivos toda vez! O melhor de tudo isso é que podemos criar arquivos completamente customizados. Então, em projetos mais complexos podemos ter muito mais que somente um componente e um arquivo de estilos. Assim, podemos criar estruturas de testes, arquivos de “storybook” e uma infinidade mais. 

Neste exemplo, utilizei a biblioteca de estilos “styled components”. Entretanto, é possível utilizar o css de forma pura, assim como sass. 

Por fim, leia também:

Biblioteca de artigos sobre Front End

Como Aplicar o Design Pattern Strategy

SEO – Search Engine Optimization[/vc_column_text][/vc_column][/vc_row]

[adrotate banner=”5″]