reason behind the default keyword for ES6 [duplicate]

I am following along in a React tutorial right now that currently uses ES6. I am new to the ES6 and I have been seeing the default keyword used quite often when it comes to exporting names from modules. I have been trying to comprehend what the reasoning behind the default word is, but have not found an answer I can comprehend yet.

Here is an example:

const Header = () => { return ( <nav> <IndexLink to="/" activeClassName="active">Home</IndexLink> {" | "} <Link to="/about" activeClassName="active">About</Link> {" | "} <Link to ="/course" activeClassName="active">Courses</Link> </nav> ); }; export default Header; 

Thank you in advance and let me know if I am not clear on anything.

1 Answer

Because you can export many variables from the same file , default is used only once in the whole file 👉🏼 to let you import this default variable outside without using brackets {}:

export default Header; 

let you to import it :

import Header from './Header.jsx'; 

export {Header}; 

let you to import it :

import {Header} from './Header.jsx';