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
jsh854 / react-hygen-boilerplate
This repo is the boiler plate for react with hygen for code generation
This repo is for react with hygen for code generation
- Run ** npm i ** initially
Here is how to use and get started with this
- Go inside the terminal
- Run npm run hygen-generate
- Give a proper name for the folder you would want to create
- It will create a folder with the name provided under src/components and files
- .js
- .ts
- .css
Customisation
- If you would like to customise the folder generation , maybe add more files or add different content for the generated files
- Go inside _templates > mygen > with-prompt
- Three .ejs.t files are there . - In order to add more files , create a new file with different name but same extension of .ejs.t
- Each file has a purpose and you can customize how they look accordingly
Top comments (0)