amanjagdev / react-builder

⚙ A GUI tool to build your react app in the fastest way with all components and pages with routing.

React Builder

Build your react apps faster

Make your react app with components and pages customized to your needs with routing and navigation with desired dependencies already done for you. Everything within a click's reach.

. Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • What it does for you?
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage - Step 1 | Choose your preferences - Step 2 | Choose Dependencies to add - Step 3 | Add Components and Pages - Step 4 | Add routing - Step 5 | Build your App - Final Result
• Roadmap
• Contributing
• Contact

About The Project

An application to help you build your react apps faster. Make your react app with components and pages customized to your needs with routing and navigation with desired dependencies already done for you. Everything within a click's reach.

What it does for you?

• Create Functional or Class based components with state integrated or optional according to you.
• Create Functional or Class based pages with state integrated or optional according to you.
• Does routing for you and make the corresponding navigation component for it.
• Add dependencies to your project.
• All above things with a single click and you are ready to go.

Built With

Getting Started

To get a local copy up and for running the project locally, follow these simple steps.

Prerequisites

Have Node along with a package manager installed in the system.

Installation

1. Clone the repo and enter it

git clone https://github.com/amanjagdev/react-builder.git
cd react-builder 

3. Install packages

yarn | npm install

4. Run the development server

yarn start | npm start

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.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Aman Jagdev - GitHub - [email protected]

Made with ❤️ for 🌏 Everyone