Como automatizar a criação de componentes funcionais em ReactJs

[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).

lista de componentes funcionais em ReactJS

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:

Componentes funcionais em ReactJS parte 2

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

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

Componentes funcionais em ReactJS parte 3

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

Componentes funcionais em ReactJS parte 4

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”

Componentes funcionais em ReactJS parte 5

No template de component teremos o seguinte conteúdo:

Componentes funcionais em ReactJS parte 6

E nome template de estilo temos:

Componentes funcionais em ReactJS parte 7

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:

Componentes funcionais em ReactJS parte 8

Arquivo de estilização:

Componentes funcionais em ReactJS parte 9

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″]

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!
Transformação Digital Logo Luby Azul

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

Copyright ©2023 Luby Software LLC. All rights reserved.

Rolar para cima