⚛️ React ES6 Modules

ES6 introduced modules to organize code into reusable pieces.
React heavily depends on this concept — every component is usually its own module.

A module can export values (variables, functions, components) and another file can import them.

🔹 Export in ES6

There are two types of exports:

1. Named Export

2. Default Export

✅ 1. Named Export

Export Example:

Or:

Import Example:

You must use the exact same name while importing.

✅ 2. Default Export

Use this when exporting one main value from a file.

Export:

Import:

You can rename default imports.

🚀 Modules in React Components

Example Component File (Car.js):

Importing into Another File:

🧩 Modules with Named + Default Export

Import:

📦 Index Files for Cleaner Imports

Instead of importing many files individually:

Create an index.js:

Then import:

✔ Cleaner and modular!

🎯 Why ES6 Modules Are Important in React?

🧠 Summary