Difference between "import {Something} from somelib" and "import Something from somelib" React.js [duplicate]

Question

I do not understand the difference between:

import {Something} from somelib

and

import Something from somelib

in React.js.

Could someone, please, explain it?

Answer 1

When working with ES6 modules, you have two types of exports:

export Something
export default Something

The difference between these is how you import them. If you have a single file with multiple modules, it makes sense to give each module a name and be able to import each of them individually, without having to import the entire contents of the file.

For example, say you have 3 modules in one file, and you export them as export A; export B; export C;. You can then import any one of them using the curly brackets import syntax. So import {A, B}, for example will import module A and B only.

The default export syntax is commonly used in React when you want to export a component, and nothing else from a file. By exporting something with export default A, you can import that module by using the import X from ../file, where X is an alias and can be anything (but usually the same name is used for consistency).

You can read more about ES6 import & export here and here.