Skip to main content

ELL Blog

JavaScript ES6 Imports Explained

If you work extensively with NodeJS, you probably already know of require('express');

However, what about the elgant ES6 imports?

No Braces

When no braces are used, you are importing the default export and get to use whatever name you want. In your file, all variables and functions that you want importable by the client need to be explicitly exported. You can also export multiple variables at once, but this article is about importing, not as much so about exporting.


In Home.js,

export default function Main() { ... }

In App.js,

// the imported name is arbitrary
import HomeComponent from './Home';

Imports follow unix file conventions!

Exporting a {} Object as default

export default { ... };


import { Fragment } from 'react';

This would be used if the variable exported is not the default. To import these non-default imports under another name we do:

import { IoSunnySharp as SunIcon } from 'react-icons/io5';
import { BsMoonStarsFill as MoonIcon } from 'react-icons/bs';


export const schedule200 = { ... };

Mass Importing and Exporting

// Files/index.js
export { default as file1 } from '/file1.js';
export { default as file2 } from '/file1.js';
// App.jsx
// import everything from Files under filese
import * as files from './Files';
// App.jsx alternative
import { file1, file2 } from './Files';