component.jsx.hbs

import './style.scss'
import React, { PropTypes } from 'react'

export default class {{ componentName }} extends React.Component {
  static propTypes = {
  };

  static defaultProps = {
  };

  render () {
    return (
      <div className='{{camelCase componentName}}'>
      </div>
    )
  }
}

component.scss.hbs

@import "~styles/colors.scss";

.{{camelCase componentName}} {
  
}

plopfile.js

'use strict'

module.exports = function (plop) {
  plop.setGenerator('component', {
    description: 'Generate a new component',
    prompts: [
      {
        type: 'input',
        name: 'componentName',
        message: 'What is the name of the new component?',
        validate: (value) => {
          if (/.+/.test(value.trim())) { return true }
          return 'Component name is required.'
        }
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/client/components/{{componentName}}/index.jsx',
        templateFile: 'plopTemplates/component.jsx.hbs',
        abortOnFail: true,
      },
      {
        type: 'add',
        path: 'src/client/components/{{componentName}}/style.scss',
        templateFile: 'plopTemplates/component.scss.hbs',
        abortOnFail: true,
      },
      function customAction (answers) {
        // inserts a line into index.js while maintaining alphabetical sort.
        const fs = require('fs')
        const toAdd = plop.renderString("export { default as {{componentName}} } from './{{componentName}}'", answers)
        let imports = fs.readFileSync('src/client/components/index.js', 'utf8')
          .split('\n').slice(0, -1) // chop off the trailing blank line
        imports.push(toAdd)
        imports = imports.sort()
        imports.push('') // add a trailing blank line
        fs.writeFileSync('src/client/components/index.js', imports.join('\n'), 'utf8')
        return 'add component to components/index.js'
      }
    ],
  })
}