DEV Community

Cover image for Build your React App Faster!
Aman Kumar Jagdev
Aman Kumar Jagdev

Posted on

Build your React App Faster!

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

Home Page


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.

Step1

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 2

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 3

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 4

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.

Step 5

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.

Result

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

Top comments (5)

Collapse
 
globalkonvict profile image
Sarthak Dwivedi

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 :)

Collapse
 
oleksiiivanov profile image
Oleksii Ivanov

If you decide to do it in cli, take a look at Plop.js. It helps me to implement such functionality in my case )

Collapse
 
walderfranco profile image
walderfranco

This was GREAT thanks men

Collapse
 
urielbitton profile image
Uriel Bitton

this is sick! Super useful I always dread crating with npm. Thanks for this man!

Collapse
 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป

Soooooooooooooooo coooool!!!! Thank you for building it!