No dia a dia do desenvolvimento frontend, trabalhando com frameworks como React, Vue e Angular, precisamos criar diversos arquivos de componentes. Geralmente, esses componentes vem acompanhado de um arquivo de estilos, outro de testes e todos eles têm uma mesma estrutura inicial. E sempre que precisamos criar um novo componente, precisamos repetir esse mesmo processo. Uma solução para esse problema é o Plop.js.

[adrotate banner=”4″]

Recentemente, encontrei essa ferramenta muito útil que facilita a criação de arquivos através de uma interface de linha de comando.

Neste artigo, veremos como podemos automatizar a criação de componentes em uma aplicação React utilizando o Plop.js.

O que é Plop.js?

Plop.js é um micro-generator framework, uma ferramenta que oferece uma maneira simples de gerar código ou qualquer outro tipo de arquivo de texto simples de maneira consistente.

Ele fornece uma API de alto nível e, ao mesmo tempo, muito personalizável. Além disso, no Plop.js não estamos limitados apenas a componentes. Isto é, podemos gerar containers, services, hooks, reducers, actions, utilities, docs, readme e muito mais.

Configuração do projeto

O projeto que criaremos a seguir como exemplo é uma aplicação básica criada com React, TypeScript e Styled-Components.

O exemplo de geração de arquivos é para criação de componentes. Então, se você precisa criar outros arquivos, como hooks, é necessário a criação de novas pastas e arquivos, conforme explicado no exemplo do componente.

Seguiremos a seguinte estrutura para criação dos nossos componentes:

• index.tsx: arquivo do nosso componente;
• styles.ts: arquivo de estilos, utilizando styled-components.

Instalando o Plop.js

Rode o seguinte comando no terminal:

Em seguida, crie um arquivo plopfile.js na raiz do seu projeto.

Agora, precisamos também criar o template que servirá de base para criação dos nossos componentes. Podemos criar uma pasta chamada templates, na raiz do projeto, e adicionar o arquivo component.tsx.hbs.

Assim, utilizaremos HandleBars.js para criar nossos templates.

No package.json, adicione o seguinte comando:

Após isso, é só rodar o comando acima no terminal que o prompt pedirá ao usuário que insira o nome do componente.

Neste momento, basta inserir o nome do componente, clicar em enter e pronto, o plop.js irá gerar nosso arquivo do componente.

Bem simples né?! Agora só precisamos adicionar uma nova ação no arquivo plopfile.js para que seja possível gerarmos o arquivo styles.ts junto com o arquivo do nosso componente.

Para fazer isso, basta adicionarmos uma nova ação no arquivo plopfile.js, como no exemplo abaixo:

Em seguida, iremos criar um arquivo styles.ts.hbs dentro da pasta templates. Este será nosso template base para o arquivo styles.ts. Dessa forma:

Após finalizada a configuração no arquivo plopfile.js e também a criação do template, podemos rodar o comando para criar um novo componente. Dessa vez, ele criará tanto o arquivo index.tsx quanto o arquivo styles.ts.

Como podemos ver acima, os dois arquivos foram criados com uma estrutura de código inicial definida.

Veja também:

Como desenvolver um software de radar meteorológico

Conclusão

Automatizar processos repetitivos é uma forma de aumentarmos nossa produtividade e facilitarmos nosso trabalho. Com o Plop.js podemos gerar arquivos de forma rápida e consistente.

Autor: Luiz Gustavo Santos.

[adrotate banner=”5″]