when to use curly braces in 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

• https://stackoverflow.com/questions/41337709/what-is-use-of-curly-braces-in-es6-import-statement/41338672
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0
• https://shoutthegeek.com/when-to-use-curly-braces-for-import/

---

Related Posts

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

Happy Coding!!!

---