react-gc

react-gc is A Node command line tool for quickly generating the framework of React components.

Installation

npm install react-gc -g

Install react-gc globally for use in your terminal.

Usage

New component

react-gc <filename> Creates a standard React component:

$ react-gc myComponent

//outputs myComponent.js in current directory: 

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  constructor(props){
    super(props);

  }

  render(){
    return (
      <div id="MyComponent">
    
      </div>
    )
  }

}

MyComponent.propTypes = {

}

export default MyComponent;

New component in different directory

react-gc <filename> -p <path> Creates a standard React component in a new directory (or an existing one):

$ react-gc myComponent -p components

//outputs myComponent.js in ./components/myComponent.js:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  constructor(props){
    super(props);

  }

  render(){
    return (
      <div id="MyComponent">
    
      </div>
    )
  }

}

MyComponent.propTypes = {

}

export default MyComponent;

New basic component

react-gc <filename> -b Creates a standard React component in a new directory (or an existing one):

$ react-gc myComponent -b 

//outputs a myComponent.js in current directory:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

const MyComponent = () => {
  return (
    <div id="MyComponent">

    </div>
  )
}

MyComponent.propTypes = {

}

export default MyComponent;

Add mapDispatchToProps or mapStateToProps

react-gc <filename> -d or react-gc <filename> -s Creates a standard React component with Redux mapDispatchToProps or mapStateToProps:

$ react-gc myComponent -d 

//outputs a myComponent.js in current directory:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class MyComponent extends Component {
  constructor(props){
    super(props);

  }

  render(){
    return (
      <div id="MyComponent">
    
      </div>
    )
  }

}

MyComponent.propTypes = {

}

function mapDispatchToProps(dispatch) {  
  return {};
}

export default connect(null, mapDispatchToProps)(MyComponent);