Understanding Exports and Imports in React

When building React applications, we’ll often split our code into multiple files—components, hooks, utilities, and more. To make this possible, JavaScript provides two important features:

• Exports — to send something out of a file
• Imports — to bring something into a file

If you’ve ever wondered why some imports use curly braces { }, why some functions use export default, or why some files end with an export statement at the bottom, this guide makes everything crystal clear.

---

🧱 Before We Begin: Where Can Exports Be Written?

Before talking about the types of exports, we need to understand that JavaScript allows exports to be written in two positions:

✅ 1. Inline Export (written next to the function or variable)

export function UserCard() {
  // component code
}

Note: UserCard here is a React component, and React components are simply JavaScript functions that return UI. A function is a reusable block of code that performs an action or returns a value — and in React, that value is usually JSX (UI).

✅ 2. Bottom Export (written after the function)

function UserCard() {
  // component code
}

export { UserCard };

⭐ Key Idea

Exports can be placed inline or at the bottom. The placement does not determine the export type — the keyword (export or export default) does as we will see in the next section.

Inline exports are quick and simple, great for small components. Bottom exports keep our file cleaner and scale better when we have multiple exports. Most larger projects and teams prefer bottom exports for consistency.

---

🔹 Types of Exports in JavaScript

JavaScript has two types of exports:

1. Named Exports
2. Default Exports

Both can appear inline or at the bottom of a file.

Let’s go through each in simple terms.

---

🟦 1. Named Exports

A named export is when we export something by its name.
We must import it using the same name.

✔ Inline Named Export

export function UserCard({ name, email }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

✔ Bottom Named Export

function UserCard({ name, email }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

export { UserCard };

✔ Importing a Named Export

import { UserCard } from "./UserCard";

⭐ Key Facts About Named Exports

• A file can have multiple named exports
• Must import using the exact same name
• Curly braces { } are required
• IDEs handle renaming and refactoring better
• Many React teams prefer named exports for consistency

---

🟩 2. Default Exports

A default export marks something as the “main” export of a file.
A file can have only one default export.

✔ Inline Default Export

export default function App() {
  return <h1>Hello World</h1>;
}

✔ Bottom Default Export

function App() {
  return <h1>Hello World</h1>;
}

export default App;

✔ Importing a Default Export

import App from "./App";

⭐ Key Facts About Default Exports

• Only one default export per file
• No curly braces needed
• We can import it using any name import MyApp from "./App"; import Hello from "./App";

---

🆚 Named Export vs Default Export: Side-by-Side

Feature	Named Export	Default Export
Syntax	export function X()	export default X
Import	import { X }	import X
Curly braces?	Yes	No
Can rename on import?	❌ No	✔ Yes
Number per file	Many	Only 1
Common use case	Components, utilities	Main component of file (e.g., App)
Refactor-friendly	✔ Strong	⚠️ Weaker

---

🧠 Which One Should You Use?

✔ Use named exports when:

• The file contains multiple functions
• We want strict naming consistency
• We want safer IDE refactoring
• We’re building large projects

✔ Use default export when:

• The file has a single main component
• We want simpler import syntax
• Frameworks expect it (e.g., App.js)

🔥 Industry Best Practice

Most teams prefer named exports for everything except App.

---

🧪 Full Example Showing Both Styles

Inline Named Export for UserCard.tsx

export function UserCard({ name, email }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

Inline Default Export for App.tsx

export default function App() {
  return (
    <div>
      <h1>Hello from App</h1>
    </div>
  );
}

Bottom Named Export for UserCard.tsx

function UserCard({ name, email }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

export { UserCard };

Bottom Default Export for App.tsx

function App() {
  return (
    <div>
      <h1>Hello from App</h1>
    </div>
  );
}

export default App;

---

⚠️ Common Mistakes to Avoid

❌ Importing a default export with braces

import { App } from "./App"; // wrong

❌ Importing a named export without braces

import UserCard from "./UserCard"; // wrong if UserCard is named export

❌ Multiple default exports in one file

export default A;
export default B; // not allowed

---

📝 Final Summary

Exports decide what leaves a file.
Imports decide what comes into a file.

Named Export

export function X() {}
import { X } from "./file";

Default Export

export default X;
import X from "./file";

Placement

Exports can be written:

• Inline
• At the bottom
  Both work for named and default exports.