Difference between export const vs. export default in React

export const indicates named export that exports a const. Export may also be applied to other declarations such as class or function declarations.

Export may also be applied to other such as class or function.

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 the 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";
Reference:
Share