¿Ha utilizado alguna vez Hygen , un generador de código automático? Si aún no lo ha hecho, quizás nuestra traducción le abra una nueva herramienta útil.
Al desarrollar en React, crear componentes manualmente es bastante difícil si la cantidad de archivos que componen un componente crece (por ejemplo, un archivo de Storybook, un archivo con pruebas, un módulo CSS).
Imagínese un componente estructurado así:
Hygen es un generador de código basado en Node.js que automatiza rutinas de código comunes con un comando interactivo.
En este artículo, aprenderá a crear de manera eficiente componentes React utilizando Hygen.
La base de código final en GitHub está disponible en este enlace .
Visión general
Para probar Hygen, configuraremos una aplicación React haciendo lo siguiente:
- Crear aplicación React
- Configurar Hygen
- Crear archivos de plantilla
- Crear archivo de configuración
- Agregue scripts a package.json .
1. Crea una aplicación React
Para acelerar las cosas, usaremos create-react-app para crear una aplicación React:
npx create-react-app hygen-app --template typescript
Una vez instalado, puede iniciar el servidor de desarrollo ejecutando este comando:
yarn start
Después de eso, veremos la página de bienvenida:
2. Configure Hygen
Siguiente, instale y configure Hygen.
Para instalar Hygen:
yarn add -D hygen
Siguiente paso: crearemos archivos de plantilla para crear componentes de React.
Hygen predeterminado selecciona la carpeta _templates en cualquier nivel de la carpeta del proyecto para descargar los archivos de plantilla.
En este artículo, agregaremos su propia carpeta. Para hacer esto, agregue .hygen.js a la raíz de su proyecto:
module.exports = {
templates: `${__dirname}/.hygen`,
}
Esto reemplazará la ruta predeterminada ( _templates ) con la carpeta .hygen .
Y agregue nuevos / componentes a la carpeta .hygen :
.hygen
└── new
└── component
3. Crea archivos de plantilla
Ahora que hemos configurado Hygen, crearemos los siguientes archivos de plantilla:
- index.ts
- Reaccionar componente
- Archivo de prueba
- Archivo de libro de cuentos
- Módulo CSS
index.ts
Primero, crearemos una plantilla para index.ts que exporta todas las dependencias de la carpeta.
Agregue index.tsx.ejs.t a .hygen / new / component :
---
to: <%= absPath %>/index.tsx
---
export * from './<%= component_name %>';
Hygen utiliza Frontmatter como plantilla de metadatos y motor EJS para el cuerpo.
En el encabezado, colocamos una propiedad to que se usa para la ruta de salida de los archivos.
Puede consultar todas las propiedades en la documentación .
<% =% AbsPath> : esta etiqueta EJS , que muestra el valor en la plantilla.
En este caso, si asignamos src / components / atom / Button a la variable absPath , la ruta es src / components / atom / Button / index.tsx .
Para pasar la variable, necesitamos crear un index.js para la personalización, que veremos. Más tarde, cree una sección en el archivo de configuración.
Reaccionar componentes
A continuación, crearemos una plantilla para el componente React.
Agregue 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" />;
};
Archivo de prueba
A continuación, crearemos una plantilla para el archivo de prueba.
Agregue 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();
});
Archivo de libro de cuentos
En este paso, crearemos una plantilla para el archivo Storybook.
Agregue stories.tsx.ejs.t a .hygen / new / component :
---
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
Creemos una plantilla para el módulo CSS.
Agregue style.module.css.ejs.t a .hygen / new / component :
--- to: <%= absPath %>/style.module.css --- .container {}
4. Crea un archivo de configuración
Ahora que hemos configurado todos los archivos de plantilla, crearemos un archivo de configuración para Hygen.
Add vamos index.js a .hygen / nueva / componente :
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 es un archivo de configuración para un mensaje interactivo que le hace algunas preguntas cuando se inicia. Puede personalizar lo que quiera en este archivo.
prompt recibe datos de respuesta y los devuelve. Como escribí anteriormente, se usarán en el archivo de plantilla EJS.
En este caso, las respuestas , la ruta , absPath y la categoría se pasan a EJS .
Descripción más detallada en GitHub .
5. Agregue scripts a package.json
Ahora que estamos listos para ejecutar Hygen, agregaremos 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 comprueba automáticamente la estructura de carpetas y la muestra. En este caso, tenemos que pasar el nuevo componente según la estructura de carpetas: ¡ Genial, probémoslo! Creemos un componente de botón :
.hygen
└── new
└── component
yarn new:component
Aparecerá un consejo interactivo que le ayudará a resolver sus preguntas:
Hemos generado estos archivos en la carpeta src / components :
├── components
│ └── atoms
│ └── Button
│ ├── Button.stories.tsx
│ ├── Button.tsx
│ ├── __tests__
│ │ └── Button.test.tsx
│ ├── index.tsx
│ └── style.module.css
Conclusión
¡Eso es todo! Hemos visto cómo automatizar las tareas de desarrollo de React utilizando Hygen. Por supuesto, también puede aplicarlo a otros proyectos utilizando Vue.js o Angular.
Hygen es bastante flexible, por lo que puede personalizar sugerencias y plantillas para satisfacer sus necesidades.
Entonces, el código base final está disponible aquí . También contiene la configuración del libro de cuentos.
Espero que este artículo te ayude a encontrar algo de inspiración. ¡Buena suerte!