Import and Export

Import and Export

1. 1In React, we write different components in different files to keep the code clean, simple, and reusable.
2. 2To use a component from one file in another file, we have to export it from its file and import it wherever we want to use it.
3. 3📦 Think of "export" as sending a component out from its file. And "import" as receiving that component in another file.
4. 4💡 If we don’t export a component, other files cannot access or use it — just like a locked room that no one can enter.
5. 5There are two main ways to export things in React: Default export and Named export.
6. 6Default Export/Import: When we export one main component or function from a file.
   • We use `export default` to make available outside the file.
   • We import it without curly braces.
   • We can rename it while importing.
   • We can use default export only once from a file and can export only one component or function from a file.

   Default Export Example

   Copy code

   Copy code

   1// Header.jsx
   2    export default function Header() {
   3      return <h1>Hello</h1>;
   4    }
   5    
   6// App.jsx
   7import Header from './Header';

7. 7Named Export/Import: When we export multiple things from one file — like 2 buttons or utility functions.
   • We use `export` (without default keyword).
   • We must use curly braces `{}` while importing.
   • To export we have to write the name of the component or function inside curly braces.
   • We must use the exact same names while importing as we used while exporting.
   • We can use named export multiple times from a file and can export multiple components or functions from a file.
   • We can use default export and named export together in a file.

   Named Export Example

   Copy code

   Copy code

   1// Buttons.js
   2export function PrimaryButton() {
   3      return <button>Primary</button>;
   4    }
   5    
   6export function SecondaryButton() {
   7      return <button>Secondary</button>;
   8    }
   9    
   10// App.js
   11import { PrimaryButton, SecondaryButton } from './Buttons';

8. 8Why do we need export/import in React?
   • To break UI into small parts (Header, Footer, Button)
   • To reuse components in multiple pages
   • To keep files short and easy to manage
   • To follow modern coding standards (modular JavaScript)
9. 9Extra: Folder-level export using index.js

   In React, we usually keep one component per file and organize them inside folders.

   When a folder has multiple components, we can use a file named index.js to export them all from one place.

   This is called a folder-level export or barrel export.

10. 10Why we use folder-level export:
    • Makes imports shorter and cleaner
    • Helps in organizing large projects
    • Avoids writing long import paths again and again
11. 11Example Folder Structure:

    components folder

    Copy code

    Copy code

    1components/
    2├── Header.js
    3├── Footer.js
    4└── index.js

12. 12Step 1: Write index.js

    components/index.js

    Copy code

    Copy code

    1export { default as Header } from './Header';
    2export { default as Footer } from './Footer';

    This file gathers all component exports in one place.
13. 13Step 2: Import using folder

    App.js

    Copy code

    Copy code

    1import { Header, Footer } from './components';

    Now you don’t need to import each file separately like:

    Without index.js

    Copy code

    Copy code

    1import Header from './components/Header';
    2import Footer from './components/Footer';

14. 14Real-life Example:
    Imagine a folder is like a basket of fruits.
    • Without index.js – you pull out each fruit one by one: "give me apple", "give me banana"
    • With index.js – the shopkeeper hands you the whole basket and you pick whatever you want
15. 15Interview Key Points:
    • Default export/import = export one component or function, no curly braces needed
    • Named export/import = export many components or functions, use curly braces and exact names to import
    • React components usually use default export
    • Helper files (like constants or functions) usually use named export
    • Both import/export help organize big React projects into small reusable parts