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

npm install -g rtfc-cli
rtfc-cli g Navbar

Usage with npx

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 and the GitHub repository here. Feel free to check it out, provide feedback, and contribute to its development.

Thank you ❤️