Hygen - Never Repeat your frontend tasks
Tags: react, javascript, webdev, tutorial
Published: 2023-11-15 15:41:34

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


```terminal
npm install hygen
// or use yarn
yarn hygen
```

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

![Hygen with react examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w89b2ukyohrl4as7kdvr.png)

> 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 

```terminal
npx hygen generator new componentBase
```

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

- new
- with-prompt

![React Hygen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wupzwu0q4v881d07lli.png)

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


![Hygen with react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfpalpjzwvqffbwa61gl.png)

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

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

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

```javascript
  "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 

{% embed https://github.com/jsh854/react-hygen-boilerplate %}