DEV Community

Cover image for Generate React/Nextjs Component with single click!
Hasan Zohdy
Hasan Zohdy

Posted on

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

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

Generate Nextjs Component

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)

General Topics

Packages & Libraries

Top comments (0)