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:
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.
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:
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
.tsx) with the required boilerplate code.
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.
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.
TypeScript Support: The CLI seamlessly handles TypeScript projects by checking for the presence of
tsconfig.json. If TypeScript is detected, it generates
.tsxcomponents; otherwise, it generates
To use the Rtfc CLI, you can either install it globally or use it with
npx without 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
<componentName> with the desired name of your React component.
To further enhance the React CLI and provide even more value to developers, I have planned the following future updates:
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.
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.
Thank you ❤️
Did you find this article valuable?
Support Pratik Sah by becoming a sponsor. Any amount is appreciated!