Generate React/Nextjs Component with single click!

Tired of creating react component files? This extension will create a react component file for you.

Generator Z

Because i'm in love with organizing and properly structure my projects, i've created this extension to help me create react components files.

This extension provides many options for generating various types of files not only React or Nextjs components, but in this article we will focus only on these two.

Installing the extension

Open your VSCode and go to the extensions tab, search for Generator Z and install it.

Using the extension

It's pretty much straight forward, just right click on the folder you want to create the file and select the option Generate React Component or Generate Nextjs Component.

Typescript

All generated files are in typescript, if you want to use javascript, just change the extension of the file.

Generate React Component

This feature allows you to generate React component with multiple options, you can choose between:

1. Generate Basic React Component: this one will generate a component with props types and that's it.
2. Generate React Memo Component: this one will generate a component and wrap it with React.memo.
3. Generate React Forward Ref Component: this one will generate a component and wrap it with React.forwardRef.
4. Generate React Memo And Forward Ref Component: this one will generate a component and wrap it with React.memo and React.forwardRef.

Based on your needs, feel free to select the option that suits you best.

Generate Nextjs Components

If you're a Nextjs developer, you will love this feature, it allows you to generate Nextjs components with multiple options, you can choose between:

1. Client Component: Which is a React component with "use client" directive.
2. Server Component: Which is a React component with "use server" directive.

Other generated files

There are other files that are generated by this extension, like: MonPulse model which is a MongoDB model for Nodejs (A very soon article will be written related to it) but you can have a look at MonPulse.

Add More Templates

If you want to add more templates to the extension, feel free to leave a comment with your desired template and i will add it to the extension in the next releases.

Conclusion

This will increase your productivity and save you a lot of time, i hope you find this extension useful, if you have any suggestions or feedback, feel free to leave a comment.

😍 Join our community

Answer problem solving questions and get mentor to review your answer on mentoor.io

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

Courses (Articles)

• Nodejs Course 2023: Typescript, Fastify And MongoDB
• OOP In JS And TS From The Very Beginning
• ES6++: The Ultimate Guide to ES6 and Beyond
• React Js: Let"s Create File Manager With React Js and Node Js

General Topics

• Stop Using If..else
• Event Driven Architecture: A Practical Guide in Javascript
• Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
• After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL

Packages & Libraries

• Powerful File System manager for Nodejs
• Mongez Cache, a powerful storage manager for web applications
• React Atom: A simple yet powerful React JS / React Native state management
• Collections: Your ultimate Javascript Arrays Manager
• Supportive Is: an elegant utility to check types of values in JavaScript
• Localization: An agnostic i18n package to manage localization in your project