💆🏾 ✌🏿 🤕 Erstellen von Reaktionskomponenten mit Hygen ♒️ 👩🏼‍🔬 💪🏿

Haben Sie jemals Hygen verwendet , einen automatischen Codegenerator? Wenn nicht bereits, eröffnet Ihnen unsere Übersetzung möglicherweise ein nützliches neues Tool.

Bei der Entwicklung in React ist das manuelle Erstellen von Komponenten recht schwierig, wenn die Anzahl der Dateien, aus denen eine Komponente besteht, zunimmt (z. B. eine Storybook-Datei, eine Datei mit Tests, ein CSS-Modul).

Stellen Sie sich eine Komponente vor, die wie

folgt aufgebaut ist : Hygen ist ein Node.js-basierter Codegenerator, der allgemeine Coderoutinen mit einem interaktiven Befehl automatisiert.

In diesem Artikel erfahren Sie, wie Sie mit Hygen React-Komponenten effizient erstellen.

Die endgültige Codebasis auf GitHub finden Sie unter diesem Link .

Überblick

Um Hygen zu testen, richten wir eine React-App ein, indem wir die folgenden Schritte ausführen:

React App erstellen
Konfigurieren Sie Hygen
Erstellen Sie Vorlagendateien
Konfigurationsdatei erstellen
Fügen Sie Skripte zu package.json hinzu .

1. Erstellen Sie eine React-Anwendung

Um die Dinge zu beschleunigen, verwenden wir die Create- React -App , um eine React -App zu erstellen:

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

Nach der Installation können Sie den Entwicklungsserver starten, indem Sie den folgenden Befehl ausführen:

yarn start

Danach sehen wir die Begrüßungsseite:

2. Hygen konfigurieren Als

nächstes installieren und konfigurieren Sie Hygen.

So installieren Sie Hygen:

yarn add -D hygen

Nächster Schritt: Wir erstellen Vorlagendateien zum Erstellen von React-Komponenten.

Standard Hygen wählt den Ordner _templates auf einer beliebigen Ebene des Projektordners aus, um die Vorlagendateien herunterzuladen.

In diesem Artikel fügen wir einen eigenen Ordner hinzu. Um dies zu tun, fügen Sie .hygen.js zu einem Projekt root:

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

Dadurch wird der Standardpfad ( _templates ) durch den Ordner .hygen ersetzt .

Und fügen Sie dem Ordner .hygen neue / Komponenten hinzu :

.hygen
      

        
        
        
      

     └── new
      

        
        
        
      

         └── component

3. Erstellen Sie Vorlagendateien

Nachdem wir Hygen konfiguriert haben, erstellen wir die folgenden Vorlagendateien:

index.ts
Komponente reagieren
Testdatei
Storybook-Datei
CSS-Modul

index.ts

Zuerst erstellen wir eine Vorlage für index.ts , die alle Abhängigkeiten des Ordners exportiert.

Fügen Sie index.tsx.ejs.t zu .hygen / new / component hinzu :

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

Hygen verwendet Frontmatter als Metadatenvorlage und EJS-Engine für den Körper.

In den Header setzen wir eine to- Eigenschaft , die für den Ausgabepfad für die Dateien verwendet wird.

Sie können alle Eigenschaften in der Dokumentation überprüfen .

<% =% AbsPath> - dieses Tag EJS , das den Wert in der Vorlage anzeigt.

In diesem Fall, wenn wir assign src / components / Atom / Knopf zum absPath Variable ist der Pfad src / components / Atom / Knopf / index.tsx .

Um die Variable zu übergeben, müssen wir eine index.js für die Anpassung erstellen , die wir uns ansehen werden. Erstellen Sie später einen Abschnitt in der Konfigurationsdatei.

Komponenten reagieren

Als Nächstes erstellen wir eine Vorlage für die React-Komponente.

Fügen Sie component.tsx.ejs.t zu .hygen / new / component hinzu :

---
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" />;
};

Testdatei

Als nächstes erstellen wir eine Vorlage für die Testdatei.

Fügen Sie test.tsx.ejs.t zu .hygen / new / component hinzu :

---
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();
});

Storybook-Datei

In diesem Schritt erstellen wir eine Vorlage für die Storybook-Datei.

Fügen Sie story.tsx.ejs.t zu .hygen / new / component hinzu :

---
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

CSS-Modul

Erstellen wir eine Vorlage für das CSS-Modul.

Fügen Sie style.module.css.ejs.t zu .hygen / new / component hinzu :

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

4. Konfigurationsdatei erstellen

Nachdem wir alle Vorlagendateien konfiguriert haben, erstellen wir eine Konfigurationsdatei für Hygen. Fügen

wir index.js zu .hygen / new / component hinzu :

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 }
      })
  }
}

Dies ist eine Konfigurationsdatei für eine interaktive Eingabeaufforderung, die Ihnen beim Start einige Fragen stellt. Sie können in dieser Datei beliebig anpassen.

Die Eingabeaufforderung empfängt die Antwortdaten und gibt sie zurück. Wie ich oben geschrieben habe, werden sie in der EJS-Vorlagendatei verwendet.

In diesem Fall werden Antworten , Pfad , absPath und Kategorie an EJS übergeben .

Detailliertere Beschreibung auf GitHub .

5. Fügen Sie Skripte zu package.json hinzu

Nachdem wir Hygen ausführen können, fügen wir package.json Skripte hinzu :

"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 überprüft automatisch die Ordnerstruktur und zeigt sie an. In diesem Fall müssen wir die neue Komponente gemäß der Ordnerstruktur übergeben: Großartig, versuchen wir es! Lassen Sie uns eine Button- Komponente erstellen :

.hygen
      

        
        
        
      

     └── new
      

        
        
        
      

         └── component

yarn new:component

Es wird ein interaktiver Tipp angezeigt, der Ihnen bei der Lösung Ihrer Fragen hilft:

Wir haben diese Dateien im Ordner src / components generiert :

├── components
      

        
        
        
      

     │   └── atoms
      

        
        
        
      

     │       └── Button
      

        
        
        
      

     │           ├── Button.stories.tsx
      

        
        
        
      

     │           ├── Button.tsx
      

        
        
        
      

     │           ├── __tests__
      

        
        
        
      

     │           │   └── Button.test.tsx
      

        
        
        
      

     │           ├── index.tsx
      

        
        
        
      

     │           └── style.module.css

Fazit

Das ist alles! Wir haben uns angesehen, wie Sie React-Entwicklungsaufgaben mit Hygen automatisieren können. Sie können es natürlich auch mit Vue.js oder Angular auf andere Projekte anwenden.

Hygen ist sehr flexibel, sodass Sie Hinweise und Vorlagen an Ihre Bedürfnisse anpassen können.

Die endgültige Codebasis finden Sie hier . Es enthält auch die Storybook-Einstellung.

Hoffe, dieser Artikel hilft Ihnen, Inspiration zu finden. Viel Glück!

Erstellen von Reaktionskomponenten mit Hygen