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
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.
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.
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
Here you can select your preferred starter environment currently it only supports
Moreover, you can choose between yarn or npm/npx. And you can give the name to your project.
You can directly mention packages you want to add in the app.
Ex: We have
react-router-dom axios etc..
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
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
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.
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
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