- Button
 |- index.js
 |- Button.js
 |- Button.spec.js

// `Button/index.js`
export { default } from './Button';

// `Button/Button.js`
import React, { Component } from 'react';

class Button extends Component {
  render() {
    return <div />;
  }
}

export default Button;

This structure might appear odd to you, with an index.js that points to a named file. I've found this to be an optimal way to set up components; the index.js allows you to import from the directory (eg. import Button from 'components/Button'), while having Button.js means that you're never lost in a sea of index.js files in your editor.

• Generact - CLI tool for generating React components by replicating your own components
  • vscode-generact - @Code plugin for generact
• new-component - CLI utility for quickly creating new React components