Import/Export: Default vs Named (And Why Some Use Braces)

If you've worked with React or JavaScript modules, you might have noticed that sometimes you write imports with curly braces ({}) and sometimes without them. Ever wondered why?

Let’s break it down.

📦 Default Export

A default export allows a module to export a single value. It’s useful when your file exports just one main thing — like a component.

👉 Example:

// components/Footer.jsx
export default function Footer() {
  return <footer>...</footer>;
}

✅ Importing it:

import Footer from './components/Footer';

🚫 No curly braces needed for default exports.

🔧 Named Export

A named export allows you to export multiple values from a file. You must import them using curly braces.

👉 Example:

// components/Contact.tsx
export function Contact() { ... }
export function AnotherHelper() { ... }

✅ Importing them:

import { Contact } from './components/Contact';

✅ Curly braces required for named exports.

💡 Tip

You can combine both in one file:

export default function App() { ... }
export function Helper() { ... }

Then import like:

import App, { Helper } from './App';

Hope this clears up the mystery behind those curly braces!

Do you have questions or tips? Drop them in the comments.

Follow for more
@mahmud-r-farhan https://devplus.fun