Criação de componentes React com Hygen

Você já usou Hygen , um gerador automático de código? Se ainda não o fez, talvez a nossa tradução abra uma ferramenta nova e útil para você.








Ao desenvolver no React, criar componentes manualmente é bastante difícil se o número de arquivos que compõem um componente aumenta (por exemplo, um arquivo de Storybook, um arquivo com testes, um módulo CSS).



Imagine um componente estruturado assim:







Hygen é um gerador de código baseado em Node.js que automatiza rotinas de codificação comuns com um comando interativo.



Neste artigo, você aprenderá como criar componentes React com eficiência usando Hygen.



A base de código final no GitHub está disponível neste link .



Visão geral



Para testar Hygen, configuraremos um aplicativo React seguindo estas etapas:



  1. Criar aplicativo React
  2. Configurar Hygen
  3. Criar arquivos de modelo
  4. Criar arquivo de configuração
  5. Adicione scripts a package.json .




1. Crie um aplicativo React



Para acelerar as coisas, usaremos create-react-app para criar um aplicativo React:



npx create-react-app hygen-app --template typescript
      
      





Depois de instalado, você pode iniciar o servidor de desenvolvimento executando este comando:



yarn start
      
      





Depois disso, veremos a página de boas-vindas:







2. Configure Hygen

Em seguida, instale e configure Hygen.



Para instalar Hygen:



yarn add -D hygen
      
      





Próxima etapa: criaremos arquivos de modelo para a criação de componentes React.



Hygen padrão seleciona a pasta _templates em qualquer nível da pasta do projeto para baixar os arquivos de modelo.



Neste artigo, adicionaremos sua própria pasta para ele. Para fazer isso, adicione .hygen.js à raiz do projeto:



module.exports = {
  templates: `${__dirname}/.hygen`,
}
      
      





Isso substituirá o caminho padrão ( _templates ) pela pasta .hygen .



E adicione novos / componentes à pasta .hygen :



.hygen

└── new

    └── component









3. Crie arquivos de modelo



Agora que configuramos Hygen, criaremos os seguintes arquivos de modelo:



  • index.ts
  • Componente de reação
  • Arquivo de teste
  • Arquivo de livro de histórias
  • Módulo CSS




index.ts



Primeiro, criaremos um modelo para index.ts que exportará todas as dependências da pasta.



Adicione index.tsx.ejs.t a .hygen / new / component :



---
to: <%= absPath %>/index.tsx
---
export * from './<%= component_name %>';
      
      





Hygen usa Frontmatter como seu modelo de metadados e mecanismo EJS para o corpo.



No cabeçalho, colocamos uma propriedade to que é usada para o caminho de saída dos arquivos.



Você pode verificar todas as propriedades na documentação .







<% =% AbsPath> - esta tag EJS , que exibe o valor no modelo.



Nesse caso, se atribuirmos src / components / atom / Button à variável absPath , o caminho será src / components / atom / Button / index.tsx .



Para passar a variável, precisamos criar um index.js para a configuração, que veremos. Posteriormente, crie uma seção no arquivo de configuração.



Componentes de reação



A seguir, criaremos um modelo para o componente React.



Adicione component.tsx.ejs.t a .hygen / new / component :



---
to: <%= absPath %>/<%= component_name %>.tsx
---
import React from 'react';
import styles from './style.module.css';

type Props = {};

export const <%= component_name %>: React.FC<Props> = (props) => {
  return <div className={styles.container} data-testid="test" />;
};
      
      







Arquivo de teste



A seguir, criaremos um modelo para o arquivo de teste.



Adicione test.tsx.ejs.t a .hygen / new / component :



---
to: <%= absPath %>/__tests__/<%= component_name %>.test.tsx
---
import React from 'react';
import { render, screen } from '@testing-library/react';
import { <%= component_name %> } from '../';

test('renders component successfully', () => {
  render(<<%= component_name %>  />);
  const element = screen.getByTestId(/test/i);
  expect(element).toBeInTheDocument();
});
      
      







Arquivo de livro de histórias



Nesta etapa, criaremos um modelo para o arquivo do Storybook.



Adicionar stories.tsx.ejs.t para .hygen / novo componente / :



---
to: <%= absPath %>/<%= component_name %>.stories.tsx
---
import React from 'react';
import { <%= component_name %> } from './';
import { Story, Meta } from '@storybook/react/types-6-0';

type Props = React.ComponentProps<typeof <%= component_name %>>

const csf: Meta = {
  title: '<%= category %>/<%= component_name %>',
}

const Template: Story<Props> = (args) => <<%= component_name %> {...args} />;

export const c1 = Template.bind({});
c1.storyName = 'default'

export default csf
      
      







Módulo CSS



Vamos criar um modelo para o módulo CSS.



Adicione style.module.css.ejs.t a .hygen / new / component :



---
to: <%= absPath %>/style.module.css
---
.container {}
      
      







4. Crie um arquivo de configuração



Agora que configuramos todos os arquivos de modelo, criaremos um arquivo de configuração para Hygen.



Vamos adicionar index.js a .hygen / new / component :



module.exports = {
  prompt: ({ inquirer }) => {
    const questions = [
      {
        type: 'select',
        name: 'category',
        message: 'Which Atomic design level?',
        choices: ['atoms', 'molecules', 'organisms', 'templates', 'pages']
      },
      {
        type: 'input',
        name: 'component_name',
        message: 'What is the component name?'
      },
      {
        type: 'input',
        name: 'dir',
        message: 'Where is the directory(Optional)',
      },
    ]
    return inquirer
      .prompt(questions)
      .then(answers => {
        const { category, component_name, dir } = answers
        const path = `${category}/${ dir ? `${dir}/` : `` }${component_name}`
        const absPath = `src/components/${path}`
        return { ...answers, path, absPath, category }
      })
  }
}
      
      





Este é um arquivo de configuração para um prompt interativo que faz algumas perguntas ao ser inicializado. Você pode personalizar o que quiser neste arquivo.



prompt recebe dados de resposta e os retorna. Como escrevi acima, eles serão usados ​​no arquivo de modelo EJS.



Nesse caso, as respostas , o caminho , o absPath e a categoria são passados ​​para o EJS .



Descrição mais detalhada no GitHub .



5. Adicione scripts a package.json



Agora que estamos prontos para executar Hygen, adicionaremos scripts a package.json :



"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",

  "new:component": "hygen new component" // Add here
},
      
      





Hygen verifica automaticamente a estrutura da pasta e a exibe. Nesse caso, temos que passar o novo componente de acordo com a estrutura de pastas: Ótimo, vamos tentar! Vamos criar um componente de botão :



.hygen

└── new

    └── component















yarn new:component
      
      





Aparecerá uma dica interativa que o ajudará a resolver suas dúvidas:







Geramos esses arquivos na pasta src / components :



├── components

│   └── atoms

│       └── Button

│           ├── Button.stories.tsx

│           ├── Button.tsx

│           ├── __tests__

│           │   └── Button.test.tsx

│           ├── index.tsx

│           └── style.module.css









Conclusão



Isso é tudo! Vimos como automatizar as tarefas de desenvolvimento do React usando Hygen. É claro que você também pode aplicá-lo a outros projetos usando Vue.js ou Angular.



Hygen é bastante flexível, então você pode personalizar dicas e modelos para atender às suas necessidades.



Portanto, a base de código final está disponível aqui . Ele também contém a configuração do Storybook.



Espero que este artigo ajude você a encontrar alguma inspiração. Boa sorte!



All Articles