Difference between export const vs. export default in React

Default export (export default)

We use the `export default` syntax to do the default export in a file. It is possible to have one default export per file.

Example of export default

// We don't need to specify any name for default export 
export default function(x) {
  return x * x * x;
}

When we import from default export we can specify any name we like. Following is an example:

// We can specify any name we like
import OrderComponent from "./DefaultExportOrder";

Named export (export)

We use the `export <name>` syntax to do the named export in a file. It is possible to have multiple named exports per file.

export function cube(x) {
  return x * x * x;
}

When we import we need to specify the exact name surrounded in braces like below:

Importing single export:

// ex. importing single export:
import { cube } from "./DefaultExportOrder";

Importing multiple export:

// ex. importing multiple exports:
import { getPaymentOptions, getOrderForm } from "./Subscription";

Giving a different name:

// ex. giving a named import a different name by using "as":
import { getPaymentOptions as Payments } from "./Subscription";

Default export along with named imports:

# It is possible to use a default export along with named imports in the same statement:
import React, { useEffect, useRef } from 'react';

Namespace import

We have seen namespace import a lot when we import react. It is also possible to import everything from the file on an object. Following is an example of namespace import.

import * as React from "react";
import * as ReactDOM from "react-dom";