javascript: import v requre plus exports

module.exports = ...; is equivalent to export default .... 

exports.foo = ... is equivalent to export var foo = ...

Require:
You can have dynamic loading where the loaded module name isn't predefined /static, or where you conditionally load a module only if it's "truly required" (depending on certain code flow).
Loading is synchronous. That means if you have multiple requires, they are loaded and processed one by one.

ES6 Imports:
You can use named imports to selectively load only the pieces you need. That can save memory.

Import can be asynchronous (and in current ES6 Module Loader, it in fact is) and can perform a little better.

src: https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export


************************************************************************
// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}
**********
import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
here
************
// import
import CustomNameComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;