#133 What is module in React?

A module is simply a reusable piece of code (function, component, object, etc.) stored in a file.

• In React (and JavaScript), we split code into modules for reusability, maintainability, and cleaner code.
• Modules use import/export syntax (ES6 modules).

---

🔹 Types of Exports in React Modules

1. Named Export

• You can export multiple things from a file.
• Must use the same name when importing.

✅ Example:

// mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// App.js
import { add, subtract } from "./mathUtils";

console.log(add(2, 3));      // 5
console.log(subtract(5, 2)); // 3

---

2. Default Export

• A file can have only one default export.
• Can import it with any name.

✅ Example:

// greeting.js
export default function greet(name) {
  return `Hello, ${name}`;
}

// App.js
import greet from "./greeting";  // name can be anything

console.log(greet("Dev")); // Hello, Dev

---

🔹 Example in React Component

Header.js

import React from "react";

function Header() {
  return <h1>Welcome to My App</h1>;
}

export default Header; // default export

Footer.js

import React from "react";

export function Footer() {
  return <p>© 2025 My App</p>;
}

App.js

import React from "react";
import Header from "./Header";        // default import
import { Footer } from "./Footer";    // named import

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

export default App;

---

🔹 Key Takeaways

• Module = A file that contains reusable code (component, function, variables).
• Use export to share code & import to use it.
• Default export → only one per file.
• Named export → can export many, must use curly braces {} while importing.