React CLI RT is a simple and easy-to-use command-line tool designed to streamline the creation of React components and interfaces. It provides a set of commands to generate components and interfaces quickly and efficiently, offering both full command names and abbreviations for convenience.
All you have to do is download it once globally, and you'll have built-in commands for both React and Vite apps.
To install the React CLI RT globally on your system, use the following command:
npm install -g react-cli-rt
Create a new React component with the specified name.
example:
rt generate component card
This command creates a folder named card with the component files inside it (tsx
or jsx
file, a style ile and and a test file - based on your configuration in rt.json
.).
Create a new React component with the specified name.
example:
rt generate class car
This command creates a class file named car.js or car.class.js based on your configuration in rt.json
.
Create a new React component with the specified name.
example:
rt generate interface user
This command creates an interface file named user.ts or user.interface.ts based on your configuration in rt.json
.
Create a new React component with the specified name.
example:
rt generate enum direction
This command creates a enum file named direction.ts or direction.enum.ts based on your configuration in rt.json
.
Create a new React hook with the specified name.
example:
rt generate hook useFetch
This command creates a hook file named useFetch.js or useFetch.hook.js based on your configuration in rt.json
.
Create a new React context with the specified name.
example:
rt generate context theme
This command creates a context file named theme.js or theme.context.js based on your configuration in rt.json
.
Initialize a configuration file (rt.json
) in the current directory to set default options.
rt init
This command prompts you to confirm the creation of a new rt.json
file if one already exists.
Create a new React application using Vite, and automatic change of the type of style in the files, based on your configuration in rt.json
.
rt new <appName>
rt new my-app
Update the react-cli-rt
to the latest version from npm.
rt update
or
rt u
Display the current version of the CLI tool with a stylized header.
rt version
or
rt v
Run the development server using the npm run dev
script.
rt dev
Build the project for production using the npm run build
script.
rt build
Lint the project using the npm run lint script.
rt lint
Preview the production build using the npm run preview
script.
rt preview
The rt.json
file allows you to customize default behavior:
- language : Choose between js or ts for JavaScript or TypeScript.
- style: Choose between css, scss, or other styling languages.
- useModuleStyle: Boolean to determine if style files should be module-based.
- componentFileFormat: Choose between function or const.
- componentFileName: Default name for component files (e.g., index), If the field is null, the file name will be determined by the component name.
- styleFileName: Default name for style files (e.g., style), If the field is null, the file name will be determined by the component name.
- testLibrary: Specify the testing library to use. Choose between testing-library or cypress If the field is null, no test file will be created when creating the component.
- useSuffix: Boolean to add .modelName to the model file name (e.g., .interface to interfaces file).
Here is an example rt.json
configuration:
{
"language": "js",
"style": "css",
"useModuleStyle": false,
"componentFileFormat": "function",
"componentFileName": null,
"styleFileName": null,
"testLibrary": null,
"useSuffix": false
}
With the rt install
command, you can easily add packages to your React project tailored to specific needs. This command presents a menu organized by topic, allowing you to select from a curated list of packages. Whether you're looking to enhance your UI, manage state, handle forms, or add routing and animations, you can choose packages relevant to your project.
command:
rt install
or
rt i
For those who like full control, there are two template files that can be edited:
component-rt.template
: content of the component file
command to create:
rt template component
or
rt t c
style-rt.template
: content of the style file
command to create:
rt template style
or
rt t s
The detailed content of the template files will be created according to the settings in the rt.json
file
There are three variables to be aware of when editing such files:
- {{styleFileName}} - the name of the style file
- {{functionName}} - the name of the component with a capital letter at the beginning
- {{componentName}} - the name of the component
The variables in the template file are identified by double curly brackets
By editing the template files you can define a custom template for the component file and for the style file
1. Generate a TypeScript Component with SCSS Modules:
This can be achieved in two ways:
A. With rt.json
set to keep the default configuration:
Configure rt.json
:
{
"language": "ts",
"style": "scss",
"useModuleStyle": true
}
Then run:
rt generate component myComponent
B. With a command that will change the component configuration once:
run:
rt generate component myComponent --ts --style scss --useModuleStyle
2. Generate a Component inside a new or existing folder:
run:
rt generate component components/myComponent
If the components folder does not exist, the program will create it. If it does exist, the program will insert the component into it. In either case, the component will be inserted into the folder.
3. Editing template files using variables:
In component-rt.template
file add in the p tag a className of the component name:
import './{{styleFileName}}.css';
export default function {{functionName}} ({}) {
return (
<p className='{{componentName}}'> {{componentName}} works!</p>
)
};
In style-rt.template
file add a class of the component name - with a font size of 20 pixels:
.{{componentName}}{
font-size: 20px;
}
Now create a new component:
rt generate component myComponent
In the component files you can see that a className named myComponent was added to the p tag, and in the style file you can see that a class called myComponent has been added.
With React CLI RT, you can efficiently generate and manage your React components and interfaces, supporting both traditional React and modern Vite applications.