Languages

React - what does "export default" do?

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
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join