Most ReactJs newbies (me included) are very comfortable making use of boilerplates as well as copying and pasting other people's code that works.

This is one sure-fire way to avoid bugs.

So when it comes to importing and exporting components many of us would use the code below:

function App(){
    ...
}

// exporting the function component App
export default App

Then in the file, we want to use, we import it this way:

import App from './App'

We just used default imports! Wait how?

About default imports

Default imports simply involve using the keyword default when exporting a component.

Rules when using default imports

1. You can only export one component (or function, variable, object, etc) when you use the default keyword e.g:

function App(){
    return (
        <h1>Hi</h1>
    )
}

// exporting the function component App
export default App

This means that if we want to export more than one component in a file, your best bet is to put the components in an object like this:

import React from "react"

function App(){
    return (
        <h1>I'm the App Component</h1>
    )
}

function AnotherComponent(){
    return (
        <h1>I'm the Second Component</h1>
    )
}

// exporting the two functions by putting them in an object
export default { App, AnotherComponent }

Then, in the file we want to use, we import the object from App in 2 steps:

// Step1: import the component as an object
import exportedComponents from './App'

// Step2: destructure the object to get the two components we want
const { App, AnotherComponent } = exportedComponents

Now we can call <App/> and <AnotherComponent/> and we won't get an error

1. When importing a component that was exported using the default keyword, you can call the component any name you prefer.

For example, we export App here as App:

import React from "react"

function App(){
    return (
        <h1>I'm the App Component</h1>
    )
}

export default App

We can import App as Application in another file:

import Application from './App'

And this will work just fine.

I believe now when you use the keyword default, you're using it intentionally. (Lol.. 🙈)

About Named imports

Since default imports involve using the keyword default then named imports involves using the keyword named right?

Nope. 🙈

Named imports to involve Not using the keyword default or any other keyword 😄.

Rules when using named imports

1. To import App (in our example using named import), we export like this:

function App(){
    return (
        <h1>I'm the App Component</h1>
    )
}

// exporting App
export { App }

Exporting an App like this export { App } doesn't mean we are exporting App as an object.

The curly braces represent a statement or declaration.

Now to import App into another file, we can do this:

import { App } from './App'

Notice the curly braces {} when importing too.

This means we make use of curly braces when exporting and also when importing.

1. You Cannot use another name for the component when importing.

This means we cannot import App as Application this way:

import { Application } from './App'

This will give an Application undefined error.

You have to use the exact name you exported it as.

1. If you must rename App as Application when importing, you can do it this way:

import { App as Application } from './App'

Now when you call Application, it won't give your an error.

1. Named imports are the preferred option when exporting and importing multiple components.

For example:

import React from "react"

function App(){
    return (
        <h1>I'm the App Component</h1>
    )
}

function AnotherComponent(){
    return (
        <h1>I'm the Second Component</h1>
    )
}

// exporting App and AnotherComponent
export { App, AnotherComponent }

We can import both App and AnotherComponent in one step:

import { App, AnotherComponent } from './App'

Now you can just call App`` andAnotherComponent``` anywhere and it should work fine.

Additional bits

Please note: You don't necessarily have to wait till the end of a file before you can export your components.

This applies to both Named and Default imports.

For example, you can do this for named imports:

export function App(){
    return (
        <h1>I'm the App Component</h1>
    )
}

And you can do this for default imports:

import React from "react"

export default function App(){
    return (
        <h1>I'm the App Component</h1>
    )
}

But also note that when you use default import like this, you can only export one component in a file.

Okay. That's it for now.

If you don't grasp all that has been said now, don't worry. It takes time and practice helps so feel free to bookmark this article so you can reference it when practicing.

Happy coding!!!