reactscaf CLI

A CLI tool for scaffolding React modules, components, hooks, and more. This tool simplifies and standardizes the process of creating structured React modules in your project.

Features

1. Create Modules:

   • Scaffolds a new module with a predefined folder structure:
     • pages/: React components with routes.
     • components/: Reusable components.
     • hooks/: Custom React hooks.
     • DTOs/: API interface with mapping logic.
     • domains/: Domain object interfaces.
     • services/: API service logic.
     • constants/: Module-specific constants like types, interfaces, static values, mock data, ...etc.
     • utils/: Utility functions.
     • routes.tsx: React Router routes for the module.

2. Create Pages:

   • Generates a new page component.
   • Adds the page route to the module’s routes.tsx.
   • Supports specifying a custom route path.

3. Create Components:

   • Generates a reusable component with boilerplate code.

4. Create Hooks:

   • Generates a custom React hook with boilerplate code.

5. Create Services:

   • Generates an API service with boilerplate code.

Installation

Prerequisites

• Node.js v14+ installed.
• A React project.

Install Globally

To use the CLI globally:

npm install -g reactscaf

Usage

Run the CLI tool using the command:

reactscaf <command>

Commands

1. Create Module

Scaffolds a new module with a predefined folder structure:

reactscaf create-module <module-name> --base <base-path>

Example:

reactscaf create-module UserManagement --base src/modules

This will create a UserManagement folder in a relative path src/modules with the following structure:

UserManagement/
├── pages/
├── components/
├── hooks/
├── DTOs/
├── domains/
├── services/
├── constants/
├── utils/
└── routes.tsx

If you didn't specify the --base option, the module will be created in a src/Feature directory of your project.

2. Create Page

Generates a new page inside an existing module:

reactscaf create-page <page-name> --module <module-name> --route <route-path>

Example:

reactscaf create-page LoginPage --module UserManagement --route /login

This creates a LoginPage component in the pages/ folder of UserManagement and adds the route to routes.tsx.

Please note that the --route & --module options are required.

3. Create Component

Generates a reusable component:

reactscaf create-component <component-name> --module <module-name>

Please note that the --module option is required.

Example:

reactscaf create-component UserCard --module UserManagement

This creates a UserCard component in the components/ folder of UserManagement.

4. Create Hook

Generates a custom hook:

reactscaf create-hook <hook-name> --module <module-name>

Please note that the --module option is required.

Example:

reactscaf create-hook useFetchUsers --module UserManagement

This creates a useFetchUsers hook in the hooks/ folder of UserManagement.

5. Create Service

Generates a custom service:

reactscaf create-service <service-name> --module <module-name>

Please note that the --module option is required.

Example:

reactscaf create-service fetchUsers --module UserManagement

This creates a fetchUsers hook in the services/ folder of UserManagement.

Contributing

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Submit a pull request.