DCI React App Generator

DCI React App Generator is a powerful tool that allows you to quickly scaffold a Single Page Application (SPA) React app with various pre-configured features. With this generator, you can kickstart your React projects by incorporating the following features seamlessly:

• React Router: Enables easy navigation and routing within your application.
• Ant Design: Provides a set of beautiful and customizable UI components for your application.
• Sass Stylesheet: Allows you to utilize the power of Sass for styling your components.
• ESLint + Prettier: Helps maintain code quality and ensures consistent code formatting.
• ESLint + SonarQube: Analyzes your code for potential bugs, vulnerabilities, and maintainability issues.
• Analyzing the Bundle Size: Provides insights into your bundle size to optimize your application's performance.
• TanStack Query: Simplifies data fetching and state management in your application.
• Source Code Generator: Generates boilerplate code for pages, components, hooks, and services, speeding up your development process.

Installation

To install the DCI React App Generator, use npm:

npm install -g dci-react-app-generator

Usage

After installing the package globally, you can create a new React app with the desired features using the following command:

npx dci-react-app-generator

Getting Started

Follow these steps to get started with your newly generated React app:

1. Navigate to the project directory:

cd <app-name>

2. Install the dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and visit http://localhost:3000 to see your app in action.

Folder Structure

The generated project follows a common folder structure for organizing your code:

├── src
│   ├── assets
│   ├── components
│   ├── hooks
│   ├── pages
│   ├── services
│   ├── styles
│   ├── App.ts
│   └── index.ts
├── plop-templates
├── public
├── .gitignore
├── .prettierrc
├── package.json
├── plopfile.js
└── README.md
└── tsconfig.json

• src: Contains the source code of your application.
• assets: Stores static assets like images, fonts, etc.
• components: Houses reusable React components.
• hooks: Holds custom hooks used in your application.
• pages: Contains the main pages of your application.
• services: Provides services for interacting with APIs or handling data logic.
• styles: Contains global and component-specific styles.
• App.ts: The main entry point of your application.
• index.js: Renders the application and mounts it to the DOM.
• public: Contains static files that will be served as-is.
• plopfile.js: Configuration file for Source code generator.
• plop-templates: Template files for Source code generator.
• .prettierrc: Configuration file for Prettier code formatting.
• .gitignore: Specifies files and directories to ignore in version control.
• package.json: Contains project metadata and dependencies.

Source Code Generator

# Generate page called Home
npm run generate page Home

# Generate a component called DogCard
npm run generate component DogCard

# Generate a hook called useAsync
npm run generate hook useAsync

# Generate a service called petApi
npm run generate service petApi

Contributing

Contributions are welcome! If you encounter any issues or have suggestions for this tool, please contact with us.