So I guess most of you must be wondering from the title that how can I build my apps faster. Is there some sort of extension for autocomplete or some niche little vscode tricks to get your development faster.
The answer is quite different.

You all must have heard of templates and most of you might be using starter templates to make your apps. Some of you might be using good old create-react-app.

So imagine you had a GUI app to just mention the name of your component and pages in react and if you want to have routing enabled and automatically you have an app to work with.. with all the things you needed in the first place.

So I thought of making something that could achieve this.

For those who are in a hurry can directly check it out themselves.
React Builder

Journey

One day as I was doing some project, I started with the create-react-app and started making different components and pages. As most of the apps nowadays require routing, I installed react-router-dom I set it up with the Navigation bar.
I used to repeat the above-mentioned process again and again in different projects. So I thought I should make a template out of it. But that would also be troublesome cause we have different component names and different routing styles and sometimes we don't even need routing.
I might need one component to be ClassBased with state and I might need one to be functional.
So from here, I got the idea of making React-Builder.

Solution

So the solution I thought is a GUI tool to help you get started with your react apps faster.

So the Tool is named React Builder.

This is the homepage

Usage

Step 1 | Choose your preferences

Here you can select your preferred starter environment currently it only supports create-react-app.
Moreover, you can choose between yarn or npm/npx. And you can give the name to your project.

Step 2 | Choose Dependencies to add

You can directly mention packages you want to add in the app.
Ex: We have react-router-dom axios etc..

Step 3 | Add Components and Pages

Here you can add all the component Names with their type and you can select whether a component is a page or not.

Note: Routing will only be done between components marked as pages

Step 4 | Add routing

You can enable routing in your app from here. And you can select which component to use as Navigation Component or you can say Navigation Bar.

NOTE : Don't remove react-router-dom dependency if you enable routing

Step 5 | Build your App

Once you click on Create App It will download a js file and will give you a script

You would need to place that js file in the folder you want to create the react app and run the script there.

Final Result

You have successfully created your react app with desired preferences.

The folder structure generated with App.js on following the above steps looks like this.

As you can see it has generated all the components and pages and installed dependencies and also done routing in App.js and our Navigation Component.

So what are you waiting for Start Hacking now
GO to : React Builder

Contribution

It is an open-source project. Take some time to look over the project yourself and feel free to make improvements and contribute to the noble cause

REPO : https://github.com/amanjagdev/react-builder