React Custom Setup

react-custom-setup is a command-line tool that simplifies the process of creating a React project using Vite. It automates tasks like setting up the project, installing common dependencies, and creating a structured folder layout, allowing developers to start building their applications faster.

Features

• Automated Vite Setup: Quickly creates a new React project using Vite.
• Pre-installed Dependencies: Automatically installs commonly used packages:
  • @reduxjs/toolkit
  • bootstrap
  • react-icons
  • react-redux
  • react-router-dom
• Structured Folder Creation:
  • src/components: Contains basic header.jsx, main.jsx, and footer.jsx components.
  • src/redux-store: Includes a store.jsx file for Redux setup.
  • src/Routes: Empty folder for adding routes.
• Time-saving: Skips manual setup and focuses on coding.

Installation

You can either install react-custom-setup globally using npm or run it directly with npx:

Global Installation

Install the package globally using npm:

npm install -g react-custom-setup

• Once installed, you can create a new React project by running:

create-react-custom

Using Without Installation

-If you don’t want to install it globally, you can use npx to run the tool:

npx create-react-custom

Usage

• Run the command: After installing globally or using npx, run the following command:

npx create-react-custom

Automatic Setup: The tool will then:

Create a new Vite React project. Install the necessary dependencies. Set up a predefined folder structure.

Project Structure

my-vite-app/ │ ├── src/ │ ├── components/ │ │ ├── header.jsx │ │ ├── main.jsx │ │ └── footer.jsx │ ├── redux-store/ │ │ └── store.jsx │ └── Routes/ (empty) ├── public/ ├── package.json ├── node_modules/ └── ...

Components

• The src/components folder will contain three basic components:

• header.jsx

import React from 'react';

const Header = () => {
  return (
    <div>
      <h1>Header Component</h1>
    </div>
  );
};

export default Header;

• main.jsx

import React from 'react';

const Main = () => {
  return (
    <div>
      <h1>Main Component</h1>
    </div>
  );
};

export default Main;

footer.jsx

import React from 'react';

const Footer = () => {
  return (
    <div>
      <h1>Footer Component</h1>
    </div>
  );
};

export default Footer;

Redux Store

• In the src/redux-store folder, you'll find a basic Redux store setup:

• store.jsx

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {},
});

export default store;

• This file sets up a basic store using Redux Toolkit, which you can extend with your application's reducers.

Requirements

• To run this project setup, make sure you have the following installed:

• Node.js: v14 or higher

• npm: v6 or higher (or yarn)

License

• This project is licensed under the ISC License - see the LICENSE file for details.

Author

• Tushar Mishra
• Vibhanshu Kumar
• Shivansh Tiwari

Contribution

• Feel free to contribute to this project by opening issues or submitting pull requests on GitHub. Any contributions that help improve the tool or add new features are welcome!

• This README file provides a detailed overview of the react-custom-setup tool, instructions for installation and usage, as well as a structured folder breakdown. It also includes component code examples and licensing information.