Search for a command to run...
Works on NodeJS, React, React Native and many more day in and out.
Skilled in back-end development, REST API, NodeJS, MongoDB, MySQL, React & React Native.
Connect to learn from my experience. I keep sharing them. Mostly about tech here on my LinkedIn https://www.linkedin.com/in/pratiksah/
No comments yet. Be the first to comment.
Welcome to my Node Js series where we'll discuss some of the awesome topics of Node Js with MongoDB, MySQL, Firebase, etc. Hope you'll like it.
In this post, we will learn serving static files in Node Js using Express Js. Static files are like images, CSS, js etc. The static js file is completely different from the js we are using in Node Js. Serving static files using Express Js Express Js ...
In React, managing the global state efficiently is crucial for building complex applications. While Redux has long been the go-to solution for centralized state management, React's Context API now provides a built-in mechanism for handling global sta...
Recently I came across a post by the digital ocean where they introduced us to the serverless functions which they recently launched. I'm a huge fan of them in terms of simplicity and pricing. I thought of giving it a try and found it to be really e...
While handling file uploads via the form in Express, you might have tried Multer. It is good but Formidable is awesome when it comes to simplicity without having to deal with middleware. The formidable module is used for parsing both the form data an...
We all have used console.log() at some point in time but these are just for debugging purpose only. It's not recommended in a production-level app. If you'll use them in your production level app, this may not help you in finding the exact error and ...
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.
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.
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.
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 .jsx or .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 .tsx components; otherwise, it generates .jsx components.
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.
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.
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 ❤️