when to use curly braces in es6 import?

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!!!


About the Author

Sandeep Agrawal
working @ Kalpavruksh Technologies as Software Engineer. I am a simple and straightforward person adaptable to any environment and work culture. Like to work in a creative and challenging environment using cutting edge technologies where I could constantly learn and successfully deliver solutions to problems.

Be the first to comment on "when to use curly braces in es6 import?"

Leave a comment

Your email address will not be published.


*


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