? Default and Named Exports

⚡ Quick Overview

In React, you usually split your UI into multiple files — typically one component per file. To make a component available in other files, you export it from its file and import it where you want to use it.

React (via ES Modules) supports two main export styles:

✅ Default export — one “main” value per file.
✅ Named export — multiple named values per file.

Understanding when to use each style keeps your React project organized, readable, and easy to maintain.

?️ Key Concepts

Default export: A file’s primary component or value, imported without curly braces.
Named export: Any additional components, functions, or constants exported by name.
Import syntax depends on export type: default vs. named imports look slightly different.
Only one default export is allowed per file, but you can have many named exports.
Default exports can be renamed freely during import, named exports cannot.

? Default Export

A default export lets you mark one main value as the “default” thing a file provides. This is commonly used for major components like App, Layout, or feature-specific components.

? Default Export Example

? View Code Example (Header.js)

// Header.js - default export component
export default function Header() {
  return <h2>Welcome to My Website</h2>;
}

? Importing a Default Export

Basic import:

? View Code Example (App.js using Header)

// App.js - importing the default Header component
import Header from "./Header";

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

The name you use when importing a default export is not required to match the original function or component name.

? View Code Example (Renaming default import)

// App.js - renaming the default import
import MyHeader from "./Header"; // Works fine

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

? Named Export

A named export lets you export multiple things from the same file — for example several small components, helper functions, or constants.

When importing, you must use the exact exported name, wrapped in curly braces { }.

? Named Export Example

? View Code Example (components.js)

// components.js - two components as named exports
export function Navbar() {
  return <h2>Navigation Bar</h2>;
}

export function Footer() {
  return <p>© 2025 React Learning Portal</p>;
}

? Importing Named Exports

? View Code Example (App.js using Navbar & Footer)

// App.js - importing named exports with curly braces
import { Navbar, Footer } from "./components";

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

Here, both Navbar and Footer are imported by their exact names. If you change the name Navbar to something else in the import, it will no longer work.

? Mixing Default and Named Exports

You can mix one default export with multiple named exports in the same file. This is useful when a file has one main component plus some related helpers or smaller components.

? View Code Example (Layout.js)

// Layout.js - default + named export in the same file
export default function Layout() {
  return <div>Main Layout</div>;
}

export function Sidebar() {
  return <aside>Sidebar</aside>;
}

? Importing Both Default and Named Exports

? View Code Example (App.js using Layout & Sidebar)

// App.js - importing default and named export together
import Layout, { Sidebar } from "./Layout";

function App() {
  return (
    <div>
      <Layout />
      <Sidebar />
    </div>
  );
}

? Comparison Table

? Cheat Sheet · Default vs Named

Feature	Default Export	Named Export
Syntax (export)	`export default Component`	`export const Component = ...`
Syntax (import)	`import Comp from "./file"`	`import { Comp } from "./file"`
Rename on import	✅ Allowed (e.g. `import X from "./file"`)	❌ Must match exactly (e.g. `Comp` must stay `Comp`)
Number of exports	Only one default export per file	Multiple named exports per file

? Live Output & Explanation

What does the user actually see?

With the default export example:

Header.js exports a default component that returns <h2>Welcome to My Website</h2>.
App.js imports that component and renders <Header /> inside a <div>.

Rendered output in the browser:

A level-2 heading on the page that displays: Welcome to My Website

If you rename the import to MyHeader, the visual output is still the same — React doesn’t care about the import variable name for default exports, only that the file exported something by default.

? Tips & Best Practices

Use default exports for “main” components like App or Layout.
Use named exports when exporting multiple small components or utility functions.
Keep files focused: one main component + a few related named exports is a clean pattern.
Avoid mixing default + named exports unless it genuinely improves structure and grouping.
Match filenames with main components (e.g. Header.js contains Header).
Stay consistent across your project so other developers instantly understand your structure.

? Try It Yourself

Create two files — Header.js (default export) and utils.js (named exports).
In utils.js, export two functions using named exports: getDate() and getYear().
In App.js, import the default Header component and the named utilities from utils.js, then display their values on the screen.
Rename the default import (e.g. import MyHeader from "./Header") and confirm that it still works.

Goal: Clearly understand the difference between default and named exports, how to import them, and how to organize reusable components and utilities across multiple files in a React project.

? View Sample Solution Structure

// Example structure showing default + named imports
// Header.js
export default function Header() {
  return <h1>My React App</h1>;
}

// utils.js
export function getDate() {
  return new Date().toLocaleDateString();
}

export function getYear() {
  return new Date().getFullYear();
}

// App.js
import MyHeader from "./Header";
import { getDate, getYear } from "./utils";

function App() {
  return (
    <div>
      <MyHeader />
      <p>Today is: {getDate()}</p>
      <p>Current year: {getYear()}</p>
    </div>
  );
}