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*/