react-create-helper

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, extends base. Default - project root (./)
• reducersDir (string) - Base dir for reducers, extends base. 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.exports = ({basename}) =>
`import React, { Component } from 'react';
import { connect } from 'react-redux';

class ${basename} extends Component {
  render() {
    return (
      <div></div>
	  )
  }
}

const mapStateToProps = (state) => {
  return {
    
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    exampleName: (exampleProps) => {
      dispatch(exampleActionName)
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(${basename});
`;

The same for action, and reducer.

######Have fun