Named Exports vs Default Exports

If you are working on Node Js/javascripts /ES module, There are high chances that you might have imported/exported any const, class , variable etc. and some time you might have seen statement like

import React from "react";
import { MDBInput } from "mdbreact";
import * as sentry from "sentry"

So in above example , one we are exporting without curly braces and one with curly braces and one with *. And we get confused what is what ? and what are difference between these 3 type of import statement declaration.

First statement is default export, second statement is named export , third statement is alias export.

Named Export: (export)

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

// imports
// importing a single named export
  import { MyComponent } from "./MyComponent";
// importing multiple named exports
 import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}