🏂🏼 ☘️ ⭐️ Membuat Komponen React dengan Hygen 🎀 🕵🏿 👩🏽‍🤝‍👨🏿

Apakah Anda pernah menggunakan Hygen , pembuat kode otomatis? Jika belum, mungkin terjemahan kami akan membuka alat baru yang berguna untuk Anda.

Saat mengembangkan dengan React, membuat komponen secara manual agak sulit jika jumlah file yang membuat komponen bertambah (misalnya, file Storybook, file dengan tes, modul CSS).

Bayangkan satu komponen terstruktur seperti ini:

Hygen adalah generator kode berbasis Node.js yang mengotomatiskan rutinitas kode umum dengan perintah interaktif.

Pada artikel ini, Anda akan mempelajari cara membuat komponen React secara efisien menggunakan Hygen.

Basis kode terakhir di GitHub tersedia di tautan ini .

Gambaran

Untuk menguji Hygen, kami akan menyiapkan aplikasi React dengan mengikuti langkah-langkah berikut:

Buat Aplikasi React
Konfigurasi Hygen
Buat file template
Buat file konfigurasi
Tambahkan skrip ke package.json .

1. Buat aplikasi React

Untuk mempercepat, kami akan menggunakan create-react-app untuk membuat aplikasi React:

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

Setelah terinstal, Anda dapat memulai server dev dengan menjalankan perintah ini:

yarn start

Setelah itu kita akan melihat halaman selamat datang:

2. Konfigurasi Hygen

Selanjutnya, instal dan konfigurasi Hygen.

Untuk menginstal Hygen:

yarn add -D hygen

Langkah selanjutnya: kita akan membuat file template untuk membuat komponen React.

Hygen default memilih folder _templates di level mana pun dari folder proyek untuk mengunduh file template.

Pada artikel ini, kami akan menambahkan foldernya sendiri untuk itu. Untuk melakukan ini, tambahkan .hygen.js ke root proyek Anda:

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

Ini akan mengganti jalur default ( _templates ) dengan folder .hygen .

Dan tambahkan / komponen baru ke folder .hygen :

.hygen
      

        
        
        
      

     └── new
      

        
        
        
      

         └── component

3. Buat file template

Sekarang setelah kami mengkonfigurasi Hygen, kami akan membuat file template berikut:

index.ts
Komponen React
File uji
File Buku Cerita
Modul CSS

index.ts

Pertama, kita akan membuat template untuk index.ts yang mengekspor semua dependensi folder.

Tambahkan index.tsx.ejs.t ke .hygen / new / component :

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

Hygen menggunakan Frontmatter sebagai template metadatanya dan mesin EJS untuk tubuhnya.

Di header, kami meletakkan properti to yang digunakan untuk jalur keluaran untuk file.

Anda dapat memeriksa semua properti di dokumentasi .

<% =% AbsPath> - tag ini EJS , yang menampilkan nilai dalam template.

Dalam kasus ini, jika kita menetapkan src / components / atom / Button ke variabel absPath , pathnya adalah src / components / atom / Button / index.tsx .

Untuk meneruskan variabel, kita perlu membuat index.js untuk penyesuaian, yang akan kita lihat. Nanti, buat bagian di file konfigurasi.

Komponen React

Selanjutnya, kita akan membuat template untuk komponen React.

Tambahkan component.tsx.ejs.t ke .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" />;
};

File uji

Selanjutnya, kita akan membuat template untuk file Test.

Tambahkan test.tsx.ejs.t ke .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();
});

File Buku Cerita

Pada langkah ini, kita akan membuat template untuk file Storybook.

Menambahkan stories.tsx.ejs.t ke .hygen / baru komponen / :

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

Modul CSS

Mari buat template untuk modul CSS.

Tambahkan style.module.css.ejs.t ke .hygen / new / component :

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

4. Buat file konfigurasi

Sekarang kita telah mengkonfigurasi semua file template, kita akan membuat file konfigurasi untuk Hygen.

Mari tambahkan index.js ke .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 }
      })
  }
}

Ini adalah file konfigurasi untuk prompt interaktif yang menanyakan beberapa pertanyaan saat dijalankan. Anda dapat menyesuaikan apa pun yang Anda inginkan dalam file ini.

prompt menerima data respon dan mengembalikannya. Seperti yang saya tulis di atas, mereka akan digunakan di file template EJS.

Dalam hal ini, jawaban , jalur , absPath , dan kategori diteruskan ke EJS .

Penjelasan lebih detail tentang GitHub .

5. Tambahkan skrip ke package.json

Sekarang kami siap menjalankan Hygen, kami akan menambahkan skrip ke 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 secara otomatis memeriksa struktur folder dan menampilkannya. Dalam kasus ini, kita harus melewatkan komponen baru sesuai dengan struktur folder: Bagus, mari kita coba! Mari buat komponen Tombol :

.hygen
      

        
        
        
      

     └── new
      

        
        
        
      

         └── component

yarn new:component

Tip interaktif akan muncul yang akan membantu memecahkan pertanyaan Anda:

Kami telah membuat file-file ini di folder src / komponen :

├── components
      

        
        
        
      

     │   └── atoms
      

        
        
        
      

     │       └── Button
      

        
        
        
      

     │           ├── Button.stories.tsx
      

        
        
        
      

     │           ├── Button.tsx
      

        
        
        
      

     │           ├── __tests__
      

        
        
        
      

     │           │   └── Button.test.tsx
      

        
        
        
      

     │           ├── index.tsx
      

        
        
        
      

     │           └── style.module.css

Kesimpulan

Itu saja! Kami melihat cara mengotomatiskan tugas pengembangan React menggunakan Hygen. Anda tentu saja dapat menerapkannya ke proyek lain juga menggunakan Vue.js atau Angular.

Hygen cukup fleksibel, sehingga Anda dapat menyesuaikan petunjuk dan templat yang sesuai dengan kebutuhan Anda.

Jadi basis kode terakhir tersedia di sini . Ini juga berisi pengaturan Storybook.

Semoga artikel ini membantu Anda menemukan inspirasi. Semoga berhasil!

Membuat Komponen React dengan Hygen