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
Top comments (5)
It's a nice tool, I planned to make something similar using CLI, but with more options. Although to be able to generate boilerplate for all the popular frameworks I would have to look into all of them and do a hefty amount of research.
I would try it on my next react project. Looks cool :)
If you decide to do it in cli, take a look at Plop.js. It helps me to implement such functionality in my case )
This was GREAT thanks men
this is sick! Super useful I always dread crating with npm. Thanks for this man!
Soooooooooooooooo coooool!!!! Thank you for building it!