# Streamlining React Component Development with a Custom CLI

React has become one of the most popular JavaScript libraries for building user interfaces.

As a React developer, I often found myself spending valuable time manually creating components and managing CSS modules.

The lack of consistency and repetitive tasks inspired me to develop a CLI tool that would automate these processes, leading to increased productivity and code quality.

## The Inspiration from Angular CLI:

During my journey of learning Angular, I was impressed by Angular CLI's power and efficiency in generating components and managing project structure.

This inspired me to create a similar CLI tool for React, tailored to my specific needs.

### **The Pain Points**

Before the creation of my React CLI tool, I faced several challenges in my React development workflow:

1. **Manual Component Creation:** Creating react components with the necessary boilerplate code was time-consuming and error-prone. It often resulted in inconsistencies across different components.
    
2. **CSS Module Management:** Managing CSS modules for each component was a tedious task. I had to create separate CSS module files, import them into the component files, and ensure consistent naming conventions.
    

### **The Birth of the React CLI**

Motivated by my challenges, I embarked on developing a custom CLI tool for React. The goal was to automate component generation, enforce best practices, and improve development efficiency.

Key Features of the React CLI:

1. **Component Generation:** The CLI allows me to generate React components effortlessly with a single command. It takes the component name from the command and automatically generates the corresponding component file (either `.jsx` or `.tsx`) with the required boilerplate code.
    
2. **CSS Module Integration:** To maintain consistency and avoid naming conflicts, the CLI automatically creates a CSS module file for each component. It associates the CSS module with the component file and ensures a clean separation of styles.
    
3. **Project Structure Management:** The CLI intelligently detects the project's root directory, ensuring that the generated components are placed correctly within the project structure. It automatically creates the necessary directories, such as `src/components`, if they don't exist.
    
4. **TypeScript Support:** The CLI seamlessly handles TypeScript projects by checking for the presence of `tsconfig.json`. If TypeScript is detected, it generates `.tsx` components; otherwise, it generates `.jsx` components.
    

## **Installation**

To use the Rtfc CLI, you can either install it globally or use it with `npx` without global installation.

**Global Installation**

```bash
npm install -g rtfc-cli
rtfc-cli g Navbar
```

**Usage with npx**

```bash
npx rtfc-cli generate <componentName>
# example
# npx rtfc-cli g Navbar
```

Replace `<componentName>` with the desired name of your React component.

### Future Updates

To further enhance the React CLI and provide even more value to developers, I have planned the following future updates:

1. **Class Component Support:** In addition to functional components, I will introduce support for generating class components. This will cater to developers who prefer the class component syntax or have existing codebases using class components.
    
2. **Next.js Integration:** Next.js is a popular framework for server-rendered React applications. To extend the CLI's compatibility, I will add support for generating components specific to Next.js projects, incorporating Next.js conventions and features.
    

You can find the React CLI on npm [**here**](https://www.npmjs.com/package/rtfc-cli) and the GitHub repository [**here**](https://github.com/ThePratikSah/rtfc-cli). Feel free to check it out, provide feedback, and contribute to its development.

Thank you ❤️