i-react-cli

i-react-cli – a program to speed up work with the React library

Download

npm i -g i-react-cli

Installation in the project

rc init [templateName]

templateName - optional parameter

What can this program do?

• Save templates and layouts
• Generate templates
• Generate layouts
• Generate styles
• Download template npm packages

For the application to work, a file must be present i-react-cli.config.json

Save templates and layouts

rc add [templateName]

Saves the current templates and layouts with the name templateName

if such a template already exists, it can be overwritten with the -i flag

Generate templates

rc g [templateName] [fileName] [path]

Generates the specified template by the standard or specified path, replaces the template name not specified

To overwrite the file, specify the -i flag

Generate layouts

rc l [layoutName] [path]

Generates the specified layout by the standard or specified path

To delete unnecessary directories, add the -r flag

Generate styles

rc s [path]

To generate modular styles, you need to wrap them in [] and call the style generation command

Example

Component.tsx

...
<div className={'global style [all modular styles]'}>Content</div>
<div className='global style [all modular styles]'>Content</div>
<div className="global style [all modular styles]">Content</div>

rc s ./path/to/Component/or/ComponentDirectory

A file is created or updated in the component directory Component.module.css

...

.all {}

.modular {}

.styles {}

The Component.tsx component itself is updated: imports the classNames library, imports styles, and wraps styles in the className wrapper

...
import classNames from 'classnames';
import styles from './Component.module.css';
...
<div className={classNames('global', 'style', styles.all, styles.modular, styles.styles)}>Content</div>
<div className={classNames('global', 'style', styles.all, styles.modular, styles.styles)}>Content</div>
<div className={classNames('global', 'style', styles.all, styles.modular, styles.styles)}>Content</div>

Download template npm packages

rc i

Downloads all dependencies specified in the i-react-cli.config.json

Additionally

Default path

You can specify the default paths of templates and layouts by placing the irc.default.json file to the root of the template or layout

{
    "defaultPath": "./src/defaultPath"
}

i-react-cli.config.json

The file should have the following structure:

{
    "wordForReplace": "FILENAME",
    "templatesPath": "irc/templates",
    "layoutsPath": "irc/layouts",
    "defaultOutputPath": "./src",
    "ignoreExistingFile": false,
    "createNamedFolder": false,
    "defaultStyleExtension": "css",
    "defaultStylesWrapper": "classNames",
    "packages": [
        {
            "name": "axios",
            "dev": false
        },
        {
            "name": "classnames",
            "dev": false
        },
        {
            "name": "react-router-dom",
            "dev": false
        },
        {
            "name": "typescript-plugin-css-modules",
            "dev": true
        }
    ]
}

Word For Replace

If you put $ before FILENAME then the first letter will be uppercase, if you put $$ then all letters will become uppercase

If you put _ before FILENAME then the first letter will be lowercase, if you put __ then all letters will become lowercase

Example

Template.txt

FILENAME

$FILENAME
$$FILENAME

_FILENAME
__FILENAME

rc g template lower

Template.txt

lower

Lower
LOWER

lower
lower

rc g template UPPER

UPPER

UPPER
UPPER


uPPER
upper