Rcg-cli-tool NPM

React Component Generator

React Component Generator is a CLI to generate Components for your React Project.

Install

This CLI Tool should be better installed globally, so you could simply access the command line quickly.

npm install rcg-cli-tool -g

Config File
The Config File under the name of generator.config.json is an important file to set up your custom file generator.
- Initialize the config file :
  To Initialize the config file , write down the following command :
```
react-config 
```
- You can specify :
1. React Template :
  - Javascript Template
  - Typescript Template
2. Style Template
  - CSS
  - SCSS
  - SASS
3. Destination
  - All the destination files should be under the src folder. You have to type only the folder name. If it doesn't exist it will be generated.
4. Component Type :
  - Functional Component
  - Class Component

Example

This config file will generate for you a file under the components folder. The template will be JavaScript (.jsx file). The styling will be SCSS file and the type of component will be Functional

    {
        "template" : "-js",
        "style" : "-scss",
        "dist" : "components",
        "type" : "function"
    }

Properties and Values

Template :

Property	Values	Output
Template	-js	.jsx file
	-ts	.tsx file

Dist :

Property	Values	Output
Dist	Example	Generate Component Under : /src/Example

Style :

Property	Values	Output
Style	-css	.css file
	-scss	.scss file
	-sass	.sass file

Component :

Property	Values	Output
type	class	Class Component
	function	Functional Component

NOTICE : The generator file initialy have JavaScript CSS Functional Component Default Values.

Dynamic Generation

You can specify the Name of Component and generated file type directly from your command line

Component Name : To Specify the component name , you have to type it directelly after the react command. The Component Name will be automatically parsed into a valid Component Name :
- Starts With a Capital Letter
- Should Not hold spaces (spaces will be replaced with dashes)
- Should not hold any extension
Example 1:
```
react ExampleComponent
```
Result : ExampleComponent
Example 2:
```
react example-component
```
Result : Example-component
Component Proprieties : To set up a custom component dynamically separately from the generator.config.json setting , you could do that simply by setting up the field name and the value for it.
```
react FolderName -template (-ts || -js) -style (-css || -scss || -sass)
```
Properties :
Property Default Required Description
name - true Component Name
style -css false Style Type
dist components false Component Destination
type function false Component Type

Property	Default	Required	Description
name	-	true	Component Name
style	-css	false	Style Type
dist	components	false	Component Destination
type	function	false	Component Type

V 2.0.0 Features

CLI TOOL Name For simplicity , the command line tool had been changed from react-comp to react
Test Files From now on , you can get rid of the Test files without having to delete them manually everytime. You can specify the test field in the generator.config.json file to false you'll not get any testing files anymore.
```
   {
      "...options":"...values",
      "test":false
   }
```

V 2.0.0

This version is still under development . It may hold multiple bugs , I'll be working on improving it .

I had recently made a significant changes in the excution flow of this CLI tool , where you don't have to specify the fields names explicitly in the Command Line anymore :

Previous Version :

react-comp --name="FolderName" --style="css" --template="typescript"

This Approach wasn't really fast enough and it any typing error may cause you an unexcpeted error behaviour

Latest Version :

react FolderName -ts -scss

This approach is very efficient in terms of time saving. It is more of inspiration from the ng command line tool from Angular . Yet , issues to be solved but You could use it Safelly in your projects.