JavaScript has had modules for a long time, but they were implemented using external libraries. ES6 (ECMAScript 2015) introduced native support for modules in JS.

Modules are heavily used in React, so it would be great if you would have at least basic understanding how they work before creating your first app using it.

Below you can find a quick but comprehensive guide on how to use import/export in ES6:

• Clause export:

// file exportModule.js

function testFunction(param) {
    console.log(param)
};

class TestClass {
    constructor() {
        this.name = test;
    }
};

export { testFunction, TestClass }

• Import all clause exports:

// file app.js

// importing all
import { testFunction, TestClass } from '/.exportModule'

testFunction('Imported with success!');

• Import selected clause exports:

// file app.js

// importing only selected
import { TestClass } from '/.exportModule'

const importedClass = new TestClass();

• Import clause exports with renaming:

// file app.js

// importing all
import { testFunction as myWishedName, TestClass } from '/.exportModule'

myWishedName('Imported with success!');

• Clause export with using different names:

// file exportModule.js

function testFunction(param) {
    console.log(param)
};

class TestClass {
    constructor() {
        this.name = test;
    }
};

export { testFunction as exportedFunction , TestClass as exportedClass }

• Import clause export where names have been changed:

// file app.js

// importing all
import { exportedFunction, exportedClass } from '/.exportModule'

exportedFunction('Imported with success!');

• Inline Export (can't export using different names as it was possible with clause export):

// file exportModule.js

export function testFunction(param) {
    console.log(param)
};

export class TestClass {
    constructor() {
        this.name = test;
    }
};

• Import inline export:

// file app.js

// importing all
import { testFunction, TestClass } from '/.exportModule'

testFunction('Imported with success!');

• Default export - if you want export a single value or create fallback value for your module. Can be used only once per module.

// file exportModule.js

export default const myVariableFunction = param => {console.log(param)};

// the same as:

const myVariableFunction = param => {console.log(param)};

export { myVariableFunction as default };

• Import default export (no need for curly braces):

// file app.js

import myVariableFunction from '/.exportModule'

myVariableFunction('Imported with success!')

• Default export already is an alias, and hence they don't need to be named the same as it is in the export when imported:

// file app.js

// import default doesn't require to be sorrounded by {} when importing
import importDefault from '/.exportModule'

importDefault('Imported with success!')

• Mixed export (default export and clause export):

// file exportModule.js

function testFunction(param) {
    console.log(param)
}

class TestClass {
    constructor() {
        this.name = test;
    }
}

export default const myVariableFunction = param => {console.log(param)}

export { testFunction, TestClass }

• Mixed import:

// file app.js

import importDefault, { testFunction, TestClass } from '/.exportModule'

importDefault('Log this');

• Namespace import, using alias is required here:

// file app.js

import * as myNameSpace from '/.exportModule'

myNameSpace.testFunction('Hello World');

Additional tips which you may find helpful:

• Modules require adding *type="module" attribute to script tag in HTML:

<script src="somepath.js" type="module"></script>

• Modules will run with Live Server extension only when import path contains file extension, like below:

// exportModule.js not exportModule
import * as myNameSpace from '/.exportModule.js'