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.

A seguir será necessário criar um gerador de código a partir do seguinte comando, onde no lugar denome_do_gerador é colocado o nome que representa ele (por exemplo pode ser colocadocomponent para um gerador de componentes):

npx hygen generator new nome_do_gerador

Esse comando vai gerar uma estrutura de pastas_templates/nome_do_gerador/new, com um template inicial de exemplo. Dentro denome_do_gerador/new, será definido todos os templates que serão usados ao executar o gerador no terminal. O template inicial (hello.ejs.t) de exemplo vem com o seguinte código:

---to: app/hello.js---const hello = ```Hello!This is your first hygen template.Learn what it can do here:https://github.com/jondot/hygen```console.log(hello)

Ondeto: define o local que o novo arquivo será criado e abaixo dele está o código que vai ser gerado. Todos os arquivos de template seguem o padrãonome_do_template.ejs.t.
Para rodar o gerador e criar novos arquivos a partir dos templates definidos dentro dele, sugiro criar empackage.json um script para execução dehygen nome_do_gerador new, segue um exemplo partindo de um gerador comnome_do_gerador igualcomponent:

"scripts": {  (...),  "create-component": "hygen component new"},

Para execução do gerador seria executar:

yarn create-component

Após executar esse comando, todos os templates dentro decomponent/new irão gerar novos arquivos.

Além de criação de novos arquivos o Hygen permite a injeção de código dentro de arquivos já existentes, para isso oto: tem que estar definido com o caminho de um arquivo já existente dentro da app, dentro do template tem que definirinject: true e para especificar o lugar para injeção uma das formas é definir a linha a ser incluída a adição de códigoat_line:, seguindo a estrutura abaixo:

---inject: trueto: caminho_de_arquivo_existenteat_line: 0---

Também é possível passar um valor dinâmico dentro dos templates colocando<%=name%>, tanto na definição do código a ser gerado quanto na definição do lugar do arquivo. Segue um exemplo abaixo de uso na definição do lugar do arquivo:

---to: src/components/<%=name%>.js---

Partindo do exemplo de um gerador com nomecomponent, ao executar o comandoyarn create-component Input, o<%=name%> do template acima vai ser substituído porInput e o arquivo desse template será gerado emsrc/components/Input.js.

Exemplo de execução

Agora vou apresentar um exemplo de execução do Hygen para gerar um novo componente, a ideia é mostrar o funcionamento de criação de arquivos e injeção de código em arquivo existente. Vamos partir de uma app que tem a seguinte estrutura:

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

import React from "react";const Tag = ({(...)}) => (  <div>    (...)  </div>);export default Tag;

Emsrc/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 />", () => {  (...)});

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

export { default } from "./Tag";

Emsrc/components/index.js o export dentro da pastacomponents:

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 decomponent. Executando no terminal:

npx hygen generator new component

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

Como o arquivohello.ejs.t não será utilizado, ele será removido e dentro da pastanew serão adicionados os templates.
Para a criação do componente, será criado o templatecomponent.ejs.t:

---to: src/components/<%=name%>/<%=name%>.js---import React from "react";const <%=name%> = ({}) => ();export default <%=name%>;

Para os testes o templatetest.ejs.t:

---to: src/components/<%=name%>/<%=name%>.test.js---import React from "react";import "@testing-library/jest-dom";import { render, screen } from "@testing-library/react";import <%=name%> from "./<%=name%>";describe("<<%=name%> />", () => {});

Para o export dentro da pasta do componente o templateindex.ejs.t:

---to: src/components/<%=name%>/index.js---export { default } from "./<%=name%>";

Para o export dentro da pasta de componentes, uma vez que o arquivo já existe e tem o export do componente Tag dentro dele, será feito o inject de código com o templatecomponentsIndex.ejs.t:

---inject: trueto: src/components/index.jsat_line: 0---export { default as <%=name%> } from "./<%=name%>";

O<%=name%> vai ser o nome do componente a ser criado, que será definido quando rodar o comando para usar o geradorcomponent.
Vai ficar da seguinte forma os templates definidos:

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

"scripts": {  "create-component": "hygen component new"},

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

yarn create-component Button

Mostrando no terminal os três arquivos gerados e o arquivo existente que teve código adicionado dentro dele.

Ficando a estrutura de pastas, arquivos e código da forma definida nos templates.

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.