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:
- Navigate to the project directory:
cd <app-name>
- Install the dependencies:
npm install
- Start the development server:
npm start
- 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.