react component import convention

option-one.js

// ./App.js
import React from 'react';
import ComponentOne from './componentGroup/ComponentOne';
import ComponentTwo from './componentGroup/ComponentTwo';

class App extends React.Component {
  render() {
    return (
      <div>
        <ComponentOne />
        <ComponentTwo />
      </div>
    );
  }
};
export default App;


// ./componentGroup/ComponentOne.js
const ComponentOne = () => {
  // ...
};
export default ComponentOne;


// ./componentGroup/ComponentTwo.js
const ComponentTwo = () => {
  // ...
};
export default ComponentTwo;


/*
Pros:
- minimal files
- one class or constant using one default export per file
- allows extra named exports if needed
Cons:
- if file structure changes, requires mass refactor for every `import` statement
*/

option-two.js

// App.js
import React from 'react';
import {
  ComponentOne,
  ComponentTwo
} from './componentGroup';

class App extends React.Component {
  render() {
    return (
      <div>
        <ComponentOne />
        <ComponentTwo />
      </div>
    );
  }
};
export default App;


// ./componentGroup/ComponentOne.js
const ComponentOne = () => {
  // ...
};
export default ComponentOne;


// ./componentGroup/ComponentTwo.js
const ComponentTwo = () => {
  // ...
};
export default ComponentTwo;


// ./componentGroup/index.js
export { default as ComponentOne } from './ComponentOne';
export { default as ComponentTwo } from './ComponentTwo';


/*
Pros:
- easier to handle grouped components
- easier to handle refactor after moving components
Cons:
- yet another file to keep track of
*/

the second.