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