react named export vs default export

taken from https://krishankantsinghal.medium.com/named-exports-vs-default-exports-c0dffa21946d

Default export only export one item (object, function,...)

// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;

Named export can have multiple name and can be imported selectively

// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
options: {
color:'white',
thickness:'2px'
},
draw: function() {
console.log('From graph draw function');
}
}
export { cube, foo, graph };
// to use it in some other file
import { cube, foo, graph } from './my-module.js';
graph.options = {
color:'blue',
thickness:'3px'
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888