React - what does "export default" do?

1 answers

0 points

Asked by:

jarlh

325

What does the "export default" do?

And what is the difference between:

export const MyComponent = () => {
  return (
    <div>
      ...
    </div>
  );
};

and

const MyComponent = () => {
  return (
    <div>
      ...
    </div>
  );
};

export default MyComponent;

1 answer

0 points

Answered by:

jarlh

325

I found the solution:

Exports and imports are part of ES6 modules system.
Using export we can enable other modules to get assets and data from the module we exported.
import statement enables getting data from the imported module.

The first code example with export const MyComponent = ... is so-called "named export" and allows us to import the component in the other modules with the curly braces like this:

import { MyComponent } from './MyComponent';

With named exports we can have multiple named exports per file and name of the imported module has to be the same as the name of the exported module.

The second code example with export default MyComponent; is so-called "default export" and allows us to import the whole module.

import MyComponent from './MyComponent';

When we import such module we have to specify a name which can be completely independent from the exported name.

0 comments Add comment

React - what does "export default" do?

Native Advertising

🚀

Dirask - we help you to

solve coding problems.

Ask question.

❤️💻 🙂