Skip to content
Home ยป when to use curly braces in es6 import?

when to use curly braces in es6 import?

es6 import

A component or module in es6 is sometimes imported with curly braces and sometimes without it so let’s see when to use curly braces in es6 import.

The use of curly braces in es6 import is to import Named Export.


Now, what is named Export?

There are two ways to do import/export in es6:

  • Default Export (Can have only one default export)
  • Named Export (Can have zero or more named exports)

Default Export

  • If a component/module is a default export then it is required to import it without brackets.
// Default Export.
export default App;

// Import above default export without curly braces.
import App from './path/to/your/App';

Named Export

  • If a component/module is a named export then it is required to import it with curly braces.
// Named Export.
export A = 'Test String';
export {YourComponent};

// Import above named export with curly braces.
import {A} from './path/to/A';
import {YourComponent} from './path/to/YourComponent';

References


Related Posts

Visit https://techtalkbook.com to find more related topics.

Happy Coding!!!


Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Pin
Share
Share
Share
%d bloggers like this: