RNC CLI 🚀

A lightweight Node.js CLI tool that generates React components with support for both JavaScript (.jsx) and TypeScript (.tsx) templates.

Why RNC?

Creating React components repeatedly can be time-consuming and error-prone. RNC automates the process by generating a component folder and boilerplate code in seconds.

Benefits

• ⚡ Faster component creation
• 📁 Consistent folder structure
• ⚛️ Supports React JSX components
• 🔷 Supports React TypeScript components
• 🛠 Reduces repetitive boilerplate code
• 🚀 Easy to use from the terminal

Installation

Install globally using npm:

npm install -g rnc-cli

Or run directly using npx:

npx rnc-cli Button

Usage

Generate a JSX Component

RNC Button

Generated structure:

Button/
└── Button.jsx

Generated code:

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

export default Button;

Generate a TypeScript Component

RNC Carousel.tsx

Generated structure:

Carousel/
└── Carousel.tsx

Generated code:

type CarouselProps = {
  // add props here
};

const Carousel = (props: CarouselProps) => {
  return (
    <div>
      Carousel Component
    </div>
  );
};

export default Carousel;

How It Works

When you execute:

RNC Carousel.tsx

the CLI performs the following steps:

1. Reads command-line arguments using process.argv
2. Extracts the component name and extension
3. Defaults to .jsx if no extension is provided
4. Creates a folder with the component name
5. Generates the component file
6. Inserts a predefined React template
7. Saves the file automatically

Workflow:

Terminal Command
      ↓
process.argv
      ↓
Parse Name & Extension
      ↓
Create Folder
      ↓
Generate Template
      ↓
Write File
      ↓
Ready-to-use React Component

Examples

RNC Button

Creates:

Button/
└── Button.jsx

RNC Navbar.jsx

Creates:

Navbar/
└── Navbar.jsx

RNC Dashboard.tsx

Creates:

Dashboard/
└── Dashboard.tsx

Tech Stack

• Node.js
• JavaScript (ES Modules)
• File System API (fs)
• npm CLI Packaging

Future Enhancements

• CSS/SCSS file generation
• React Hooks templates
• Page generation
• Index export generation
• Custom template support
• Interactive CLI prompts

Planned Feature: Multiple Component Creation

Generate multiple React components at once:

RNC Button Card Modal Navbar

Output:

Button/ └── Button.jsx

Card/ └── Card.jsx

Modal/ └── Modal.jsx

Navbar/ └── Navbar.jsx

This feature will improve developer productivity by allowing batch generation of components with a single command.

License

MIT License

Built with ❤️ for React developers.