How to Create a Clone Website (Fake Website) with HTML

The Ultimate Travel Companion: Top 5 Must-Have Apps For Your

March 28, 2025
Web Tutorials
Notification Show More
Latest News
code bloger facebook clone page coder

How to Create a Clone Website (Fake Website)

Mar 01, 2025
Top five app for travelling

The Ultimate Travel Companion: Top 5 Must-Have Apps

Jul 14, 2024

How to Create a...

The Ultimate Travel Companion:...

JavaScript Tutorial

JavaScript Module

JavaScript modules give you the ability to divide your code into distinct files.

This facilitates code base maintenance.

Modules are brought in via the import statement from external files.

The <script> tag’s type=”module” is also necessary for modules.

Import Module

There are the two types of Export Modules

  1. Named Export Module
  2. Default Export Module

Named Export 

				
					// Named export
export const purchaseBook = () => {
    return {
        type: BUY_BOOK
    };
};

Exporting: The function is exported with a specific name (purchaseBook), which you need to use when importing it in other files.

Importing: When importing, you must use the exact name purchaseBook.

For example, importing it in another file:

				
					import { purchaseBook } from './reduxContainer/BookAction';

You can have multiple named exports in a single file.

You must import with curly braces {}.

You must use the exact name of the export.

Default Export 

				
					// Default export
const PurchaseBook = () => {
    return {
        type: BUY_BOOK
    };
};

export default PurchaseBook;

Exporting: The function is exported as the default export. There can only be one default export per file.

Importing: When importing, you can give it any name you like.

For example, importing it in another file:

				
					import PurchaseBook from './reduxContainer/BookAction';  // Same name
// OR
import MyCustomName from './reduxContainer/BookAction';  // Can rename the import

You can have only one default export per file.

No need to use curly braces {} when importing.

You can rename the import when using it.

Named Export (export const purchaseBook)

Number of Exports : Can have multiple named exports in a file.
Import Syntax: Must use curly braces {} to import, and the name must match the export.
Renaming : Can’t rename during import (must match the export name).

 

 Default Export (export default PurchaseBook)

Number of Exports :Can only have one default export per file.
Import Syntax: No curly braces needed, and you can import with any name.
Renaming : Can rename during import.

Example Using During Import

Named Export:

				
					// Exporting
export const purchaseBook = () => {
    return {
        type: BUY_BOOK
    };
};

// Importing
import { purchaseBook } from './reduxContainer/BookAction';  // Must use exact name

Default Export:

				
					// Exporting
const PurchaseBook = () => {
    return {
        type: BUY_BOOK
    };
};
export default PurchaseBook;

// Importing
import PurchaseBook from './reduxContainer/BookAction';  // No curly braces, name can be anything

Which Is Batter Option

  • Use named exports when you want to export multiple items from a file.
  • Use a default export when your file only exports a single item, or when you want more flexibility in naming when importing.