react-gecost v1.0.9

react-gecost

A simple script that automates component creation. In other words it generates component structure.

Features:

• Generates React functional or classical component folder structure
• Added css modules to the folder structure
• Includes optional Redux boiler plate
• Includes prop-types
• Added custom directory

Folder structure:

Lets say you want to create a button component. The folder structure will be like this.

Button
    index.js
    index.module.css
    Button.js

File content

index.js

import Button from './Button';
export default Button;

Button.js

import React from 'react';
import PropTypes from 'prop-types';

import style from './index.module.css';

function Button(props) {
  return (
    <div className={style.button}>
      
    </div>
  )
}
Button.propTypes = {
  
}

export default Button

Button.js (with redux)

import React from 'react';
import PropTypes from 'prop-types';

import { connect } from 'react-redux'
import style from './index.module.css';

function Button(props) {
  return (
    <div className={style.button}>
      
    </div>
  )
}

Button.propTypes = {
  
}

const mapStateToProps = state => {
  return {

  }
}

const mapDispatchToProps = dispatch => {
  return {

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Button);

index.module.css is empty by default

Installation

npm i react-gecost --save-dev

Add this inside the script in package.json:

"script": {
    ... , /** All your scripts  */
    "gecost": "node node_modules/react-gecost"    
}

Usage

In your root directory: npm run gecost