react-template-generator-box

react-template-generator-cli

A CLI generator for react components,api config, redux store , pages and api services

Install

$ npm install -g react-template-generator-cli

Usage

The most basic command runs a wizard to create a component.

$ tg

Note: Names can be inputted in any format (slug-case(sc), camelCase(cc), PascalCase(pc), UPPERCASE(uc), lowercase(lc) etc.).

component

Directly create a component based on the current settings.

$ tg component <name>

Page [Recommended for Next.js]

Directly create a page based on the current settings.

$ tg page <name>

The generated file will be *filename.js *index.js *filename.scss

Arguments:

• name: The name you want to use for the component.

Options:

• -d, --destination <destination>: Override the destination for component.
• -p, --template-path <template-path>: Override template path.
• -t, --template <template>: Override template type. By default it uses the 'component' folder from the template path. With this option you can use a different template folder.
• -f, --force: Force creation of a component. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.

Examples:

$ tg component check-box
$ tg component RadioButton -d ./components/ui
$ tg component videoPlayer -d ./src/components/players/ -t base-video-component -f

The generated file will be *filename.css *index.js *filename.js

service

Directly create a api service based on the current settings.

$ tg service <name>

Arguments:

name: The name you want to use for the store module. Options:

• -d, --destination <destination>: Override the destination for store module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <template>: Override template type. By default it uses the 'store' folder from the template path. With this option you can use a different template folder.
• -f, --force: Force creation of a store. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.

Examples:

$ tg service user
$ tg service shopping-cart -d ./modules
$ tg service Car -t complex-store

The generated file will be

fileName.js

• The service file contains the api request for a single module

config

Directly create a api configuration based on the current settings.

$ tg config file

Arguments:

Options:

• -d, --destination <destination>: Override the destination for config.
• -p, --template-path <template-path>: Override template path.
• -t, --template <template>: Override template type. By default it uses the 'src' folder from the template path. With this option you can use a different template folder.
• -f, --force: Force creation of a store. By default it's impossible to create a config if the destination path doesn't exist. This option forces the creation of a config and will generates the destination folders if they don't exist.

Examples:

$ tg config file

This will generate a services name folder consist of config folder which contain three important files

1. apiUrl.js : consist of api end point
2. request.js : consist of http request methods wrapped with promise return and error handling.
3. storage.js : It handle the localStorage and session storage data handling.

The other folder generated is store which consist of index.js configured with redux data setup. Which need to be included in main file of the project.

store

Directly create a store module based on the current settings.

$ tg store <name>

Arguments:

name: The name you want to use for the store module. Options:

• -d, --destination <destination>: Override the destination for store module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <template>: Override template type. By default it uses the 'store' folder from the template path. With this option you can use a different template folder.
• -f, --force: Force creation of a store. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.

Examples:

$ tg store user
$ tg store shopping-cart -d ./modules
$ tg store Car -t complex-store

The generated file will be

1. actions.js => contains actions methods
2. mutation.js => contains reducer methods name
3. reducers.js => contains reducer methods to set the data to state
4. state.js => containes state variables