Introduction

As JavaScript developers, we are constantly seeking ways to enhance our productivity and streamline our workflows. One tool that has gained popularity in recent years for its ability to generate consistent, maintainable code is Hygen. In this article, we will explore the fundamentals of Hygen and dive into practical examples of how it can be seamlessly integrated into React projects to automate code generation.

What is Hygen?

Hygen is a code generation tool that allows developers to create and manage templates for generating boilerplate code. It provides a simple and flexible solution to reduce repetitive tasks, enforce best practices, and maintain consistency across a codebase.

Getting Started with Hygen

To begin using Hygen, you'll need to install it using npm or yarn:

npm install hygen
// or use yarn
yarn hygen

This will install hygen in your code base and creates a _templates folder in your app

you can put that folder inside your app if its not inside.

After the setup you need to create a generator

A generator is basically where whatever repetitive tasks you want to avoid , you create a generator for that.

In our app , every time i create a component i need to :-

• create a folder with the component name
• Inside the folder should be a index.tsx with the basic structure of a react component in place
• I also need a css file for the component
• I might also need a test file and a story file

For simplicity i am taking two files only

• index.tsx
• index.css

So we will create a generator for this task called

npx hygen generator new componentBase

Now our generator is ready and if you look inside it , it will have two folders

• new
• with-prompt

If you want to use prompts while creating a component (which we will use since we have to name the component everytime we create one) we will be using the with-prompt one

Going inside this , we see two files

• hello.ejs.t
• prompt.js

We will be adding files to however we want with different names.

Since we want to create two files , we will create two files

• hello.ejs.t
• main.ejs.t

Inside each file we have to explain what we would like to do

*For our first file , we want to create a react component with base structure in place , here is the structure for the same

---
to: src/components/<%=message%>/index.js
---
import React from 'react'

export const <%= message %> = ({ children }) => (
  <div className="<%= h.changeCase.paramCase(message) %>">{children}</div>
)

Notice we are putting <%=message%> as folder and component name , this is the prompt message which the user will be providing.

The path will be given as you like - for me i would like to put these folders inside components /

• we can also put some default styling for out css file

---
to: src/components/<%=message%>/index.css
---
.<%= h.changeCase.paramCase(message) %>{
    color:'black'
}

Now there is one more file called prompt.js
This file is responsible for what the user will see and it will have some thing like this code inside

module.exports = [
  {
    type: 'input',
    name: 'message',
    message: "Name of the folder you would like to have?"
  }
]

Notice the name is message , this can be different for you - the same name has to be used in the above components

Ok ! awesome we are good to go

Now to make our life easy , we will create a shortcut for generating the component so that we dont have to type a long command everytime

Go inside your package.json and put this inside

  "scripts": {
    "hygen-generate":"npx hygen mygen with-prompt"
  }

Superb , we are good to goooo

Drumrollll

Go inside the terminal and type

npx hygen-generate

Give a name to your component and your component will be created .

This is one of thousands of examples we can do with hygen
I would love to see what you guys come up with , with this amazing tool

Tag me or comment below what you created with this beautiful tool .

I have created this as a project as well , here is the repo for you guys to check and explore