DEV Community

Ozoemena
Ozoemena

Posted on • Edited on

Import and Export

Import and Export
Am sure you must have seen this:

export const text = () => {
                  .....
                 }
Enter fullscreen mode Exit fullscreen mode

and

export default const text = () => {
                      ....
                }
Enter fullscreen mode Exit fullscreen mode

What is the difference and how should they be handled?
The first one is called, named export while the second is called default export. They are not the same and as such can not be handled the same.
In a Js/React file, you can have multiple named exports but cannot have more than one default export.
The way they are imported in another react component or file is not the same.
For named export, like the name, you must make sure that its name in the origin file is the same as you have in the file you are importing it to. if the origin file has:

export const text = () => {
                 ...
              }
Enter fullscreen mode Exit fullscreen mode

then you must import it as import { text } from './originFile.js'
Notice that while importing the text function, it is wrapped in a curly bracket, if you don't do this, it will give you an error, undefined.
For the default export, you are more at liberty while importing it, you don't need to wrap in a curly bracket and you don't even need to have the same name. You are advised to give it the same name for easy debugging.

export default const text = () => {
                   ....
               }
Enter fullscreen mode Exit fullscreen mode


import Banana from './originFile.js'
Like I said earlier, the name can be changed and you don't have to wrap it in a curly bracket.

Top comments (0)