Why sometimes import has {} and sometimes doesn't?

Question

Why sometimes import has {} and sometimes doesn’t?

Answer

The way on how we import the content from another file will always depend on how it is being exported, for example when we see:

import ComponentName from './ComponentName';

it means that whatever ComponentName is, it is a default export, which means that it is the only export of it’s kind, this approach is mainly implemented with objects, or some classes like in the case of components:

class ComponentName extend React.Component {
...
}

export default ComponentName;

Then when we see:

Import { ComponentName } from './ComponentName';

It just means that it is a named export by having the export keyword assigned to it which makes it like a property of an exported object:

export class ComponentName extends React.Component {
  ...
}

As a bonus, we can also import from named exports using aliases:

import * as allComponentMethods from './ComponentName';
/* which reads: import all under the name allComponentMethods*/

import { ComponentName as NamedExported } from './ComponentName';
/*here we change the name on the name export*/
19 Likes