Importing & Exporting Components in React

Importing and Exporting Components in React

If you’ve been putting all your components inside one file, it’s time to stop doing that.

React is built around reusability and clean code structure, and that’s exactly where imports and exports come in.

Why export/import components?

We shouldn’t create every component in a single file.

If we want to use a component in another file, we need to export it.

And to use that exported component elsewhere, we simply import it.

This keeps your code modular, reusable, and easy to manage.

Example use case:

If you create one Image component, you can reuse it in multiple places like:

• Profile picture
• Post section
• Navbar
• Dropdown

Step-by-step Example

Step 1: Create the Component

UserComponent.jsx

function Login() {
  return (
    <div>
      <h1>Login User</h1>
    </div>
  )
}

Step 2: Export the Component 

export default Login;

Step 3: Import and Use in App.jsx

import Login from "./UserComponent.jsx";

function App() {
  return (
    <div>
      <h1>Importing and Exporting Components</h1>
      <Login />
    </div>
  );
}

Default Export

You can have only one default export per file.

Import it without curly braces.

// Export
export default Login;

// Import
import Login from "./UserComponent.jsx";

Named Export

You can export multiple components or values from the same file.

// Export
export function Profile() {
  return <h1>Profile</h1>;
}

export function Setting() {
  return <h1>Setting</h1>;
}

// Import
import { Profile, Setting } from "./UserComponent.jsx";

Default and Named Exports Together

function Login() {
  return <h1>Login User</h1>;
}

export function

// Import in App.jsx
import Login, { Profile, Setting } 
from "./UserComponent.jsx";

Exporting Variables

You can also export constants or variables along with components.

// UserComponent.jsx
export const UserKey = "@#$#@$#@#$@#";

// App.jsx
import Login, { Profile, Setting, UserKey } 
from "./UserComponent.jsx";

function App() {
  return (
    <div>
      <h1>Importing and Exporting Components</h1>
      <Login />
      <Profile />
      <Setting />
      <h2>{UserKey}</h2>
    </div>
  );
}