Avez-vous déjà utilisé Hygen , un générateur de code automatique? Si ce n'est déjà fait, peut-être que notre traduction vous ouvrira un nouvel outil utile.
Lors du développement dans React, la création manuelle de composants est assez difficile si le nombre de fichiers qui composent un composant augmente (par exemple, un fichier Storybook, un fichier avec des tests, un module CSS).
Imaginez un composant structuré comme ceci:
Hygen est un générateur de code basé sur Node.js qui automatise les routines de codage courantes avec une commande interactive.
Dans cet article, vous apprendrez à créer efficacement des composants React à l'aide de Hygen.
La base de code finale sur GitHub est disponible sur ce lien .
Aperçu
Pour tester Hygen, nous allons configurer une application React en suivant ces étapes:
- Créer une application React
- Configurer Hygen
- Créer des fichiers modèles
- Créer un fichier de configuration
- Ajoutez des scripts à package.json .
1. Créez une application React
Pour accélérer les choses, nous utiliserons create-react-app pour créer une application React:
npx create-react-app hygen-app --template typescript
Une fois installé, vous pouvez démarrer le serveur de développement en exécutant cette commande:
yarn start
Ensuite, nous verrons la page d'accueil:
2. Configurez Hygen
Ensuite, installez et configurez Hygen.
Pour installer Hygen:
yarn add -D hygen
Étape suivante: nous allons créer des fichiers modèles pour créer des composants React.
Par défaut Hygen sélectionne le dossier _templates à n'importe quel niveau du dossier de projet pour télécharger les fichiers de modèle.
Dans cet article, nous ajouterons son propre dossier. Pour ce faire, ajoutez .hygen.js à la racine de votre projet:
module.exports = {
templates: `${__dirname}/.hygen`,
}
Cela remplacera le chemin par défaut ( _templates ) par le dossier .hygen .
Et ajoutez de nouveaux / composants au dossier .hygen :
.hygen
└── new
└── component
3. Créez des fichiers modèles
Maintenant que nous avons configuré Hygen, nous allons créer les fichiers modèles suivants:
- index.ts
- Composant React
- Fichier test
- Fichier de livre de contes
- Module CSS
index.ts
Tout d'abord, nous allons créer un modèle pour index.ts qui exporte toutes les dépendances du dossier.
Ajoutez index.tsx.ejs.t à .hygen / new / component :
---
to: <%= absPath %>/index.tsx
---
export * from './<%= component_name %>';
Hygen utilise Frontmatter comme modèle de métadonnées et moteur EJS pour le corps.
Dans l'en-tête, nous mettons une propriété to qui est utilisée pour le chemin de sortie des fichiers.
Vous pouvez vérifier toutes les propriétés dans la documentation .
<% =% AbsPath> - cette balise EJS , qui affiche la valeur dans le modèle.
Dans ce cas, si nous affectons src / components / atom / Button à la variable absPath , le chemin est src / components / atom / Button / index.tsx .
Pour transmettre la variable, nous devons créer un index.js pour la personnalisation, que nous examinerons. Plus tard, créez une section dans le fichier de configuration.
Composants React
Ensuite, nous allons créer un modèle pour le composant React.
Ajoutez component.tsx.ejs.t à .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" />;
};
Fichier test
Ensuite, nous allons créer un modèle pour le fichier de test.
Ajoutez test.tsx.ejs.t à .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();
});
Fichier de livre de contes
Dans cette étape, nous allons créer un modèle pour le fichier Storybook.
Ajouter stories.tsx.ejs.t à .hygen / nouveau / composant :
---
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
Module CSS
Créons un modèle pour le module CSS.
Ajoutez style.module.css.ejs.t à .hygen / new / component :
--- to: <%= absPath %>/style.module.css --- .container {}
4. Créez un fichier de configuration
Maintenant que nous avons configuré tous les fichiers de modèle, nous allons créer un fichier de configuration pour Hygen.
Ajoutons index.js à .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 }
})
}
}
Il s'agit d'un fichier de configuration pour une invite interactive qui vous pose quelques questions lors de son démarrage. Vous pouvez personnaliser ce que vous voulez dans ce fichier.
invite reçoit les données de réponse et les renvoie. Comme je l'ai écrit ci-dessus, ils seront utilisés dans le fichier de modèle EJS.
Dans ce cas, les réponses , le chemin , absPath et la catégorie sont transmis à EJS .
Description plus détaillée sur GitHub .
5. Ajoutez des scripts à package.json
Maintenant que nous sommes prêts à exécuter Hygen, nous allons ajouter des scripts à 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 vérifie automatiquement la structure des dossiers et l'affiche. Dans ce cas, nous devons passer le nouveau composant en fonction de la structure des dossiers: Super, essayons-le! Créons un composant Button :
.hygen
└── new
└── component
yarn new:component
Une astuce interactive apparaîtra qui vous aidera à résoudre vos questions:
Nous avons généré ces fichiers dans le dossier src / components :
├── components
│ └── atoms
│ └── Button
│ ├── Button.stories.tsx
│ ├── Button.tsx
│ ├── __tests__
│ │ └── Button.test.tsx
│ ├── index.tsx
│ └── style.module.css
Conclusion
C'est tout! Nous avons vu comment automatiser les tâches de développement React à l'aide de Hygen. Vous pouvez bien sûr l'appliquer à d'autres projets également en utilisant Vue.js ou Angular.
Hygen est assez flexible, vous pouvez donc personnaliser des conseils et des modèles en fonction de vos besoins.
La base de code finale est donc disponible ici . Il contient également le paramètre Storybook.
J'espère que cet article vous aidera à trouver de l'inspiration. Bonne chance!