Tired of creating react component files? This extension will create a react component file for you.
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.
Open your VSCode and go to the extensions tab, search for
Generator Z and install it.
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.
This feature allows you to generate React component with multiple options, you can choose between:
Generate Basic React Component: this one will generate a component with props types and that's it.
Generate React Memo Component: this one will generate a component and wrap it with React.memo.
Generate React Forward Ref Component: this one will generate a component and wrap it with React.forwardRef.
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.
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:
Client Component: Which is a React component with
Server Component: Which is a React component with
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.
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.
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.
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).
You may have a look at these articles, it will definitely boost your knowledge and productivity.
- 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
- Stop Using If..else
- 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
- Localization: An agnostic i18n package to manage localization in your project