oamaok / beerhunt Goto Github PK

Move each individual component's .jsx and .scss file to a directory matching the component name so that the structure looks something like this:

  client/
  ├── components/
  │   ├── app-frame/
  │   │   ├── app-frame.jsx
  │   │   └── app-frame.scss

After moving these files properly, create a file client/components/index.jsx and both import and export all the components there:

import AppFrame from './app-frame/app-frame.jsx';
import OtherComponent from './other-component/other-component.jsx';
...

export default {
  AppFrame,
  OtherComponent,
  ...
};

This allows us to import multiple components with just single import statement:

import { AppFrame, OtherComponent } from 'components';

This change also lessens the clutter of files in the client/components/ directory as now almost all the names are duplicated by the style files.