Reduzindo trabalho manual em React com Hygen

Introdução

Na criação de novos componentes e módulos dentro de uma app React, normalmente se segue um padrão de projeto, de estrutura de pastas e tipos de arquivos. Partindo da criação de um novo componente, pode-se proceder por exemplo das seguintes formas: duplicar as pastas e arquivos de outro componente presente na app, renomeando os nomes dos arquivos, atualizando imports e substituindo código para corresponder as definições do novo componente ou criar as pastas e arquivos na mão. Mas como seria possível melhorar a eficiência desse processo de criação de um novo componente para ser menos manual?

Hygen

Hygen é uma lib de geração automática de código, a qual a partir de definição de templates permite a geração de arquivos e definir o local dentro da aplicação que esses arquivos serão criados.

Setup

Para adicionar o Hygen na aplicação é necessário rodar o seguinte comando:

yarn add --dev hygen

Para iniciar o Hygen no projeto:

npx hygen init self

Ele vai gerar uma pasta _templates onde estarão duas pastas com alguns arquivos iniciais para uso do Hygen. Nessa pasta _templates será onde definiremos os templates para geração de arquivos.

Onde em src/components/Tag/Tag.js tem-se a definição do componente:

import React from "react";



const Tag = ({(...)}) => (

  <div>

    (...)

  </div>

);



export default Tag;

Em src/components/Tag/Tag.test.js os testes:

import React from "react";

import "@testing-library/jest-dom";

import { render, screen } from "@testing-library/react";



import Tag from "./Tag";



describe("<Tag />", () => {

  (...)

});

Em src/components/Tag/index.js o export dentro da pasta do componente:

export { default } from "./Tag";

Em src/components/index.js o export dentro da pasta components:

export { default as Tag } from "./Tag";

O primeiro passo é criar o gerador de código, o qual por ser de criação de componente vou chamar de component. Executando no terminal:

npx hygen generator new component

Dessa forma será criada a estrutura de pastas _templates/component/new e um arquivo de exemplo:

Para executar o gerador de componentes, vai ser adicionado em package.json:

"scripts": {

  "create-component": "hygen component new"

},

Nesse exemplo vai ser criado um componente de botão chamado de Button, para isso ao executar o comando para rodar o gerador será necessário adicionar Button no final, para que todos os templates substituam o <%=name%> por Button:

yarn create-component Button

Conclusão

Por fim, a ideia desse artigo é mostrar uma forma de reduzir trabalho manual no desenvolvimento em React, automatizando parte do processo. Passei um exemplo referente a criação de componentes para ilustrar o funcionamento, mas já me deparei com o uso do Hygen para geração de módulos, que compartilham a mesma estrutura de pastas, tipos de arquivos, configuração de Babel, typescript, dentre outras, acelerando o processo de criação deles utilizando a lib.