Differences between export default Example, export { default } Example, and export default class in React

Question

Can someone explain the differences between export default Example; , export { default } Example;, and export default class Example extends Component {};

I've seen all 3 used in examples online. I've run into issues using export default class Example extends Component {} where react says that I can only have 1 default export in a module.

Which one(s) do I avoid, are there advantages to using one over the other?

Whoops I meant export { default } Example from './path/to/file' — Brian Patrick, Jan 15 '18 at 20:19
That still is. Maybe you meant `export { default as Example } from '…';`? — Bergi, Jan 15 '18 at 20:21
I feel that this is an underhanded duplicate of [when to prefer default over named exports](https://stackoverflow.com/q/33611812/1048572) — Bergi, Jan 15 '18 at 20:26
https://gist.github.com/SuperBerny/7e04eaec0b38411219331597bbc05357 — Brian Patrick, Jan 15 '18 at 20:42
Yes, `export { default } from '…'` [is fine too](https://stackoverflow.com/q/32229947/1048572), but not `export { default } Example from '…'`. — Bergi, Jan 15 '18 at 20:51

score 2 · Answer 1 · answered Jan 15 '18 at 20:24

Let's look at an example class

export default class MyComponent extends React.Component {
 ...
}

Another example of the same component could be written as follows

export class MyComponent extends React.Component {
 ...
}
export default MyComponent

Finally, you could have more than one class available in a component file.

export MyComponent extends React.Component {
 ...
}
export MyComponent2 extends React.Component {
 ...
}

Now, when I import MyComponent using

import MyComponent from "../components/MyComponent"

The default class will be exported.

Now, if I want to export specific components from a file that has components combined. I can do the following:

import { MyComponent2 } from "../components/MyComponent"

The brackets allow you to import a single feature of the class/object/file that you are importing. Syntax aside momentarily, this is the behavior that the default keyword creates. This allows you to import only specific functionality from libraries and frameworks instead of having to import everything, which is what "default" usually implies.

This was already answered here: Javascript (ES6), export const vs export default

Differences between export default Example, export { default } Example, and export default class in React

1 Answers1