DEV Community

Cover image for Truly Understanding React (TUR) - Ep5
Paul C. Ishaili
Paul C. Ishaili

Posted on • Updated on

Truly Understanding React (TUR) - Ep5

Importing and Exporting Components in React App



In the course of Truly Understanding React, there have been a number of persisting issues which had not come to my full understanding until recently. Part of this issues includes understanding how component importing and exporting truly works in React.

Practically, skipping-that-part-to-understand when learning JavaScript contributes to this.

First, it is important to understand that their are two important ways of create a component in React App, and these include:

  • Creating component as a function, and
  • Creating component as a class

In the course of this article, including Truly Understanding React Series, the 'Creating Component as a Function' is being used.

Personally, it is has a result of my preference for functional and declarative programming paradigm (until I have discerned more).

In 'Creating component as a Function' there are different ways of doing so, as in the standard JavaScript syntax. The two most common ways are:

  • Using named function as in this case:
function NewComponent (params) { 
   ...
}
Enter fullscreen mode Exit fullscreen mode
  • Using Arrow function as in this case:
const NewComponent = (params) => {
   ...
}
Enter fullscreen mode Exit fullscreen mode

Exporting a component created using the Arrow function method to is very much the same as doing so with a component created the using named function method, but with a slight difference of limitation.

Exporting

To export a Component that is created with the named function method, there are four methods.
1.

export function NewComponent (params) { 
   ...
}
Enter fullscreen mode Exit fullscreen mode

2.

function NewComponent (params) { 
   ...
}

export default NewComponent
Enter fullscreen mode Exit fullscreen mode

3.

function NewComponent (params) { 
   ...
}

export NewComponent
Enter fullscreen mode Exit fullscreen mode

4.

export default function NewComponent (params) { 
   ...
}
Enter fullscreen mode Exit fullscreen mode

To export a Component that is created with the arrow function method, there are three methods.

1.

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

2.

const NewComponent = (params) => {
   ...
}

export default NewComponent
Enter fullscreen mode Exit fullscreen mode

3.

const NewComponent = (params) => {
   ...
}

export NewComponent
Enter fullscreen mode Exit fullscreen mode

Noticed the difference?

Yes, a component created with the arrow function cannot be exported instantly as default while creating it. It has to be declared after the component is created.

If you do know why, please, let us know in the comment section.


Importing

In importing the component into a new component file, it doesn't matter how the component was created (be it a function Component or a Class Component). What matters now is whether the component is exported as default, or not.

  • In the case of the component been exported as default, when importing, we use:
import NewComponent from './newComponentFIle'
Enter fullscreen mode Exit fullscreen mode
  • In the case of the component been exported not as default, when importing, we use:
import { NewComponent } from './newComponentFIle'
Enter fullscreen mode Exit fullscreen mode

Special thanks

Special thanks to all those who have found this series note-worthy to be reposted on other platform (and personally blogs).


Public Notice:

If reposting on other sites and platforms, kindly give credits so everyone can be tagged and carried along in this series, thank you.


Resources

Exports: MDN Web Docs. Retrieved from: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

*These React Fundamentals You Skip may be Killing You *: ohans Emmanuel. Retrieved from: https://www.freecodecamp.org/news/these-react-fundamentals-you-skip-may-be-killing-you-7629fb87dd4a/


Stay Blessed, ✌ until next time.
Mr Paul Ishaili C.

Top comments (0)