DEV Community

Ankita Sahu
Ankita Sahu

Posted on

3 1

Ever wondered why we usually write 'export deafult [component name]' to export a React Component?

It's been quite some time that I've been wondersing the exact reason behind using export deafult [component name] to export a react component,but recently I know why?

When we export a component with default ,it in return helps us to import that component with any name in the .js file we want to use it.Still confused? Check out this example

For a Greet component write down the following code:

import React from 'react'

function Greet() {
    return (
        <div>
            <h1>Hello,Greetings!</h1>
        </div>
    )
}

export default Greet
Enter fullscreen mode Exit fullscreen mode

In the App.js file

import './App.css';
import Greet from './Greet';

function App() {
  return (
    <div className="App">
      <Greet />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

These two snippets generate the following output:
image

now if we change the import name in app.js and the snippet now looks similar to this:

import './App.css';
import Greetings from './Greet';

function App() {
  return (
    <div className="App">
      <Greetings />
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

The result is the same:
image

Named Exports

Here the Greet.js would look similar to this:

import React from 'react'

export const Greet = () => <h1>Hello,Greetings</h1>
Enter fullscreen mode Exit fullscreen mode

And the App.js similar to this:

import './App.css';
import {Greet} from './Greet';

function App() {
  return (
    <div className="App">
      <Greet />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In case of named components,we cannot change the name of the importing component on doing so it will generate an error,take a look at the App.js where we have changed the name in case of named components:

import './App.css';
import {Greetings} from './Greet';

function App() {
  return (
    <div className="App">
      <Greetings />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

also take a look at the error generated:
image

Probably now you know export takes a default and what could happen if you use named components.

Top comments (0)

Image of Bright Data

Maintain Seamless Data Collection – No more rotating IPs or server bans.

Avoid detection with our dynamic IP solutions. Perfect for continuous data scraping without interruptions.

Avoid Detection

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay