Why es6 react component works only with “export default”?

by

Exporting without default means it’s a “named export”. You can have multiple named exports in a single file. So if you do this,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

then you have to import these exports using their exact names. So to use these components in another file you’d have to do,

import {Template, AnotherTemplate} from './components/templates'

Alternatively if you export as the default export like this,

export default class Template {}

Then in another file you import the default export without using the {}, like this,

import Template from './components/templates'

There can only be one default export per file. In React it’s a convention to export one component from a file, and to export it is as the default export.

You’re free to rename the default export as you import it,

import TheTemplate from './components/templates'

And you can import default and named exports at the same time,

import Template,{AnotherTemplate} from './components/templates'

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Javascript object literal: what exactly is {a, b, c}?
  3. Is it possible to import modules from all files in a directory, using a wildcard?
  4. Call async/await functions in parallel
  5. ES6 Modules: Undefined onclick function after import
  6. How to import jquery using ES6 syntax?
  7. When is the body of a Promise executed?
  8. How can I clone a JavaScript object except for one key?
  9. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  10. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  11. Why do I need to await an async function when it is not supposedly returning a Promise?
  12. Scope of Default function parameters in javascript
  13. ES6 Promises – something like async.each?
  14. React useState hook event handler using initial state
  15. Is there a downside to using ES6 template literals syntax without a templated expression?
  16. “This” within es6 class method [duplicate]
  17. What is the meaning of “…args” (three dots) in a function definition?
  18. Is using an ES6 import to load specific names faster than importing a namespace?
  19. Syntax error in IE using ES6 arrow functions
  20. Get the class name of ES6 class instance
  21. Using Array objects as key for ES6 Map
  22. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  23. Get list of duplicate objects in an array of objects
  24. What can we do with ES6 Generator that we cannot with for loop?
  25. Error: How to serialize data from getStaticProps : Next.js
  26. Access to Script at ‘ from origin ‘null’ has been blocked by CORS policy
  27. How to namespace es6 classes (for React components)
  28. ES6 module scope
  29. ECMA6 generators: yield promise
  30. ES6 – declare a prototype method on a class with an import statement

Leave a Comment