react-create-helper
CLI tool to help with creating components, reducers and actions.
Features
Create react-* with predefined templates
- Components
- Redux actions
- Redux reducers
Install
npm i -g react-create-helper
Options
Add new string to package.json
with name "react-create-helper"
base
(string) - Base dir for components, actions, and reducers. Default - project root (./
)actionsDir
(string) - Base dir for actions, extendsbase
. Default - project root (./
)reducersDir
(string) - Base dir for reducers, extendsbase
. Default - project root (./
)styleExtension
(string) - Extensions for generated style file. Default -css
componentName.prepend
(string) - Prefix for generated component. Default -undefined
componentName.append
(string) - Suffix for generated component. Default -undefined
template.component
(string) - Path for your own component template. Default -undefined
template.reducer
(string) - Path for your own reducer template. Default -undefined
template.action
(string) - Path for your own action template. Default -undefined
Example options
"react-create-helper": { "base": "./src", "actionsDir": "Actions", "reducersDir": "Reducers", "componentName": { "prepend": "My", "append": "Component" }, "styleExtension": "scss" }
Basic usage
Cli options
-c
generate component (default)-r
generate reducer-a
generate action-m
generate module-h
help (options and usage examples)
rch Header
output
Header
├── Header.js
├── Header.scss
└── index.js
Also you can specify path like rch my/path/Header
Generate action & reducers
$ rch -ar ExampleAction
This will generate something like this
src
├── Actions
│ └── ExampleAction.js
└── Reducers
└── ExampleReducer.js
Generate module
$ rch -m ExampleModule
This will generate something like this
ExampleModule
├── ExampleModule.js
├── ExampleModule.scss
├── index.js
└── redux
├── reducers.js
├── actions.js
└── constants.js
Define own templates
"react-create-helper": { "template": { "component": "rch_templates/component.js", "reducer": "rch_templates/reducer.js", "action": "rch_templates/action.js", }, }
Base template
{basename}
is the name you provided with rch -c {basename}
./rch_templates/component.js
module`import React, { Component } from 'react';import { connect } from 'react-redux'; class extends Component { render() { return ( <div></div> ) }} const mapStateToProps = (state) => { return { }};const mapDispatchToProps = (dispatch) => { return { exampleName: (exampleProps) => { dispatch(exampleActionName) } }}; export default connect(mapStateToProps, mapDispatchToProps)();`;
The same for action, and reducer.